【原创纯手打】如何用微信小程序写留言板(附代码)

 首先我们先创建三个输入框，分别绑定响应的触发条件，微信双向绑定和VUE不一样，需要setData

名字<input type="text" value="{{name}}" bindinput="setName"/>
年龄<input type="text" value="{{age}}" bindinput="setAge"/>
留言<input type="text" value="{{title}}" bindinput="setTitle"/>

在js文件中写

  setName(e){
    this.setData({
      name:e.detail.value
    })
  },
  setAge(e){
    this.setData({
      age:e.detail.value
    })
  },
  setTitle(e){
    this.setData({
      title:e.detail.value
    })
  },

接着在按钮上绑定事件，当按下时触发条件，然后传递给数组，然后渲染

  add(){
    if(this.data.name=="" || this.data.age==""){
      return wx.showToast({
        title: '填入不能为空',
      })
    }
    var obj={name:this.data.name,age:this.data.age,title:this.data.title,flag:false}
    var arr=this.data.arr
    arr.push(obj)
    this.save()
    this.setData({
      arr
    })
    this.updataNum()
  },

this.save()方法是本地存储，需要不断在每个功能下触发

  save(){
    wx.setStorageSync('todo', this.data.arr)
  },

然后在页面上渲染

<view class="list" wx:for="{{arr}}">
  <checkbox checked="{{item.flag}}" value="{{item.flag}}" bindtap="change" data-key="{{index}}"></checkbox>
  <view>{{item.name}}</view>
  <view>{{item.age}}</view>
  <view">{{item.title}}</view>
  <button type="warn" size="mini" plain="true" bindtap="del" data-key="{{index}}">删除</button>
</view>

这个时候我们可以绑定选定按钮，当我多选时可以做更多的操作，比如选中删除等等

这样一个完整的留言板就出来了！！！