初學小程式學習筆記

摘要： 一、data 和vue中的data不同的是，直接修改data的資料不會實時更新 比如： data: { count: 0, items: [] }, onLoad: function (){ vat that = thi...

一、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中寫對應的方法
}