微信小程序开发之——调查问卷-表单数据绑定(2.2.4)

一 概述

• 表单数据绑定的实际需求
• 将data数据替换表单默认数据
• 服务器返回data数据给微信小程序

二 实际需求

前面的小节中，表单是完全编写在WXML中的，然而在实际开发中，会经常需要对表单的默认值进行变更。例如，用户发现已经提交的调查问卷中有些内容填写错误，需要进行修改，希望程序提供一个修改的表单，该表单默认已经填写了上次提交的内容，这就需要从服务器获取已经提交的数据，然后将数据填入到表单中

三 将data数据替换表单默认数据

3.1 修改的数据

• 针对上述需求，可以通过表单数据绑定来实现。
• 首先在pages/index/index.js文件的data数据中保存表单的默认数据

3.2 index.js中data数据

1 2 3 4 5 6 7 8 9 10 11 12 13 14

data: { name:'张三', gender:[ {name:'男',value:'0',checked:true}, {name:'女',value:'1',checked:false} ], skills:[ {name:'HTML',value:'html',checked:true}, {name:'CSS',value:'css',checked:false}, {name:'JavaScript',value:'js',checked:false}, {name:'Photoshop',value:'ps',checked:false} ], opinion:'测试' },

3.3 index.wxml中代码(预览画面已有数值)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<view class="container"> <form bindsubmit="submit"> <view> <text>姓名：</text> <input name="name" value="{{name}}"/> </view> <view> <text>性别：</text> <radio-group name="gender"> <label wx:for="{{gender}}" wx:key="value"> <radio value="{{item.value}}" checked="{{item.checked}}"/> {{item.name}} </label> </radio-group> </view> <view> <text>专业技能：</text> <checkbox-group name="skills"> <label wx:for="{{skills}}" wx:key="value"> <checkbox value="{{item.value}}" checked="{{item.checked}}" />{{item.name}} </label> </checkbox-group> </view> <view> <text>您的意见：</text> <textarea name="opinion" value="{{opinion}}" /> </view> <button form-type="submit">提交</button> </form> </view>

3.4 说明

上述代码中，

• wx:for列表渲染，用于根据给定的数组重复渲染该组件。
• 在列表渲染标签内，可以使用item表示数组的当前项，使用index表示当前项的下标。
• wx:key表示每一项的唯一标识，值为value表示将每一项的value属性作为唯一标识，也可以用保留关键字*this表示将每一项本身作为唯一标识
• 在列表渲染中，设置wx:key可以在数据改变后在页面中重新渲染时，使原有的组件保持自身的状态，而不是重新创建，并且提高了列表渲染时的效率

四 服务器返回data数据给微信小程序

4.1 说明

通过以上操作，实现了将表单中的数据分离出来，就可以通过程序控制表单的各项的选中状态。下面在服务器端项目index.js文件的app.listen()前面增加代码，将data中的数据放入服务器端，由服务器将data返回给小程序

4.2 服务器端index.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

const express=require('express') const bodyParser=require('body-parser') const app=express() app.use(bodyParser.json()) //处理POST请求 app.post('/',(req,res)=>{ console.log(req.body) res.json(req.body) }) var data={ name:'张三', gender:[ {name:'男',value:'0',checked:true}, {name:'女',value:'1',checked:false} ], skills:[ {name:'HTML',value:'html',checked:true}, {name:'CSS',value:'css',checked:false}, {name:'JavaScript',value:'js',checked:false}, {name:'Photoshop',value:'ps',checked:false} ], opinion:'测试' } app.get('/',(req,res)=>{ res.json(data) }) //监听300接口 app.listen(3000,()=>{ console.log('server running at http://localhost:3000') })

上述代码，用于实现GET请求方式，将data以JSON格式返回

4.3 小程序 index.js

完成服务器端代码后，在小程序pages/index/index.js文件的onLoad事件函数中实现页面打开后自动向服务器发送请求，获取表单中的初始数据，具体代码如下：

1 2 3 4 5 6 7 8 9

onLoad: function (options) { var that=this wx.request({ url: 'http://localhost:3000/', success:function(res){ that.setData(res.data) } }) },

4.4 that和this

上述代码中，success的回调函数中，this的指向发生了变化，因此需要通过代码将this保存为that后使用。除了这种方式，还可以利用ES6的箭头函数语法来更好地解决这个问题，无需再用that保存ths，具体代码如下

1 2 3 4 5 6 7 8

onLoad: function (options) { wx.request({ url: 'http://localhost:3000/', success:res=>{ this.setData(res.data) } }) },

值得一提的是，由于wx.request()参数中的method属性的默认值为GET，因此在发送GET请求时可以省略method属性