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

• 针对上述需求，可以通过表单数据绑定来实现。

• 首先在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},

分享读者

作者2013年java转到Android开发，在小厂待过，也去过华为，OPPO等大厂待过，18年四月份进了阿里一直到现在。

被人面试过，也面试过很多人。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长，而且极易碰到天花板技术停滞不前！

我们整理了一份阿里P7级别的Android架构师全套学习资料，特别适合有3-5年以上经验的小伙伴深入学习提升。

主要包括阿里，以及字节跳动，腾讯，华为，小米，等一线互联网公司主流架构技术。如果你有需要，尽管拿走好了。

35岁中年危机大多是因为被短期的利益牵着走，过早压榨掉了价值，如果能一开始就树立一个正确的长远的职业规划。35岁后的你只会比周围的人更值钱。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
体系的学习效果低效漫长，而且极易碰到天花板技术停滞不前！

我们整理了一份阿里P7级别的Android架构师全套学习资料，特别适合有3-5年以上经验的小伙伴深入学习提升。

主要包括阿里，以及字节跳动，腾讯，华为，小米，等一线互联网公司主流架构技术。如果你有需要，尽管拿走好了。

[外链图片转存中…(img-4DH9YJ5v-1715277429977)]

35岁中年危机大多是因为被短期的利益牵着走，过早压榨掉了价值，如果能一开始就树立一个正确的长远的职业规划。35岁后的你只会比周围的人更值钱。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！