微信小程序实现双向绑定

微信小程序实现双向绑定

用过vue的人，可能都会感觉使用微信小程序很坑，举个例子，最简单的双向绑定都没有，需要开发人员自己搞定，很麻烦。这里就教大家怎么实现小程序的双向绑定

1.添加需要引用的公共js文件

创建commonMixin.js commonMixin.js具体内容如下：

module.exports = {
  inputgetName(e) {
    let name = e.currentTarget.dataset.name;
    let nameMap = {}
    if (name.indexOf('.')) {
      let nameList = name.split('.')
      if (this.data[nameList[0]]) {
        nameMap[nameList[0]] = this.data[nameList[0]]
      } else {
        nameMap[nameList[0]] = {}
      }
      nameMap[nameList[0]][nameList[1]] = e.detail.value
    } else {
      nameMap[name] = e.detail.value
    }
    this.setData(nameMap)
  }
}

2.在需要用到双向绑定的页面引用

commonMixin.js文件创建成功后，在需要用到双向绑定的页面引用即可。下面以login.wxml登录界面为例，

login.js具体操作如下：

// 引用公共app.js公共内容
var app = getApp();
// page/component/login/login.js
// 引用双向绑定js
var commonMixin = require('../../../util/commonMixin')
Page(Object.assign({
  // 页面的初始数据
  data: {
    userInfo: {
      loginName: '',
      password: ''
    }
  },
}, commonMixin))

引用成功后，重点是最下面“, commonMixin))”不要忽略了。这样就成功引用了

login.wxml具体操作如下：

<input class="weui-input" data-name='userInfo.loginName' value='{{userInfo.loginName}}' bindinput="inputgetName" placeholder="请输入登录账号" />

控件需要bindinput绑定inputgetName方法，data-name属性也要与需要操作的变量匹配，否则会失效，这样就完成了。