一、data

和vue中的data不同的是，直接修改data的數據 不會實時更新
比如：

data: {
    count: 0,
    items: []
},
onLoad: function (){
    vat that = this
    that.data.count = 2 // 毫無卵用
    console.log(that.data.count) // 2 說明改是改對了，但是頁面沒有更新
}

解決辦法： setData

onLoad: function(){
    var that = this
    that.setData({
          count: 2 ,  // 左邊參數是data中得參數，右邊賦值。復雜的賦值比如操作數組之類的，最好定義變量接收後使用
          key: value,
          ...
     })
}
 

setData對數組元素操作：

let items = that.data.items // 聲明一個變量保存data-items的值
items.push/pop/..(數組操作方法)(value) // 對改變量進行數組操作
that.setData({
    items: items // 將該變量賦值給data中的items
})

二、input雙向綁定

小程序裏面沒有v-model 需要添加綁定事件 bindinput="functionName"
示例：

<input bindinput="bindKeyInput"></input>
<view>{{inputValue}}</view>
data: {
    inputValue: ‘‘
},
bindKeyInput: function(e){
    var that = this
    that.setData({
          inputValue: e.detail.value     // 這裏是input輸入的值。這樣賦值就可以做到inputValue與input框中輸入的值實時綁定
     })
}
 

三、循環:wx.for

語法：wx:for="{{value}}" wx:key="{{index}}"
示例：

<view wx:for="items" wx:key="{{index}}">{{item}} {{index}}</view> // 這裏的items是data中聲明的數組，index：下標，item：循環後的值。對像操作也一樣，item加上對應的key值
data: {
    items: [‘one‘, ‘two‘, ‘three‘]
}

四、條件：wx:if

語法：wx:if="{{條件語句}}"
條件語句都是寫在{{}}裏面的 else 寫法直接： wx:else

五、本地存儲： wx.getStorage/wx.setStorage

使用方式:

wx.setStorage({
    key: ‘value‘,
    data: ‘value‘
})
類似於 setStorage(‘key‘, ‘value‘)

wx.getStorage({
    key: ‘value‘, // 與setStorage中的key值對應
    success: (res) => {
          console.log(res.data) // 這裏面獲取到的便是setStorage中的key值對應的data
     }
})
類似於：getStorage(‘key‘)

六、點擊事件綁定: bindtap

使用方法：

<button bindtap="functionName"></button>
functionName: fucntion(){
    console.log(2) // 點擊按鈕觸發functionName方法，在js中寫對應的方法
}

初學小程序學習筆記