一 概述
- 表单数据绑定的实际需求
- 将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属性