初学小程序学习笔记

和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中写对应的方法 }