《微信小程序开发》课件——第3章 微信小程序页面交互_169-184.pdf

04【案例3-4】调查问卷

案例分析

“调查问卷”微信小程序的页面效果见右图。

调查问卷需要填写的信息包括姓名、性别、专业

技能和您的意见。

案例分析

①“姓名”通过单行输入框填写；

②“性别”通过单选框选择；

③“专业技能”通过多选框选择；

④“您的意见”通过多行输入框填写；

⑤页面底部的“提交”按钮用于将用户输入的信

息提交。

知识储备

双向数据绑定

先定一个小

目标！

掌握双向数据绑定，能够运用双向绑定

实现数据的动态更改

知识储备

双向数据绑定

在之前的学习中，普通属性的绑定都是单向的，示例代码如下。

inputvalue={{value}}/

如果使用this.setData({value‘leaf’})来更新value，则this.data.value和输入框中显

示的值都会被更新为leaf；但是如果用户在页面中修改了输入框里的值，则

this.data.value的值不会发生改变，这个现象就是单向数据绑定。

知识储备

双向数据绑定

如果需要在用户输入数据的同时改变this.data.value，则可以通过双向数据绑定来实现。

双向数据绑定的实现方式是在对应属性之前添加model前缀，示例代码如下。

inputmodelvalue={{value}}/

此时，如果输入框的值被更改了，this.data.value也会随之更改。同时，页面的WXML

文件中所有绑定了value的位置也会被一同更新，数据监听器也会被正常触发。

案例实现

1.准备工作

先定一个小

目标！

掌握“调查问卷”微信小程序的准备工

作，能够成功搭建小程序目录结构

案例实现

1.准备工作

123

创建项目配置页面配置导航栏

在微信开发者工具中创项目创建完成后，在在pages/form/form.json文

建一个新的微信小程序app.json文件中配置1个件中配置页面导航栏。

项目，项目名称为“调form页面。

查问卷”，模板选择

“不使用模板”。

案例实现

1.准备工作

45

复制素材启动服务器

从本书配套源代码中找到本案例，复制从本书配套资源中找到本案例的源代码，进入

pages/form/form.wxss文件到本项目“服务器端”文件夹，该文件夹下的内容为No

中。de.js本地HTTP服务器程序。打开命令提示符，

切换工作目录到当前目录，然后在命令提示符