初学微信小程序学习笔记(持续更新)

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

七、使用循环后列表中item的点击事件

外层使用wx:for循环,需要在里面再包裹一层,并将点击事件写在那层元素中,重点加上data-name属性。
示例:

<view wx:for="{{ietms}}">
    <view bindtap="clickItem" data-name="item">124</view>
</view>
clickItem: function(e) {
   console.log(e.currentTarget.dataset.name) //能够输出data-name指定的值
}

猜你喜欢

转载自blog.csdn.net/qq_41927909/article/details/82624074
今日推荐