初學小程式學習筆記
一、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中寫對應的方法 }