小程序核心开发：数据绑定、事件处理与样式控制（三）

1、数据绑定

1.1 基本原则

• 在data中定义数据
• 在WXML中使用数据

1.2 定义数据

在页面对应的js文件中，把数据定义到data对象中即可；

1.3 渲染数据

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可；

语法格式：<view>{{ 要绑定的数据名称 }}</view>

1.4 应用场景

1.4.1 绑定内容

页面数据：

页面结构：

1.4.2 绑定属性

页面数据：

页面结构：

1.4.3 运算（三元运算、算术运算等）

页面数据：

数据结构：

2、事件绑定

2.1 定义

通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理；

2.2 常用的事件

2.3 事件对象的属性列表

2.4 触摸事件语法格式

2.5 数据赋值

2.5.1 定义

通过this.setData(dataObject)方法，重新赋值

js:

wxml:

2.6 事件传参

2.6.1 定义：

不能在绑定事件时，传递参数；需要通过data-*的方式传递，语法如下：

data-*="{{2}}" data-是固定写法，*代表方法名，2是传的参数 eg: data-info="{{2}}"

{{}} :传过去是数字 不加双括号是文本

2.6.2 使用

通过event.target.datset.参数名获取参数的值；

eg：event.target.dataset.info

js:

wwml:

2.7 数据同步

js:

wxml:

3、条件渲染

3.1 wx:if

语法：wx:if="{{type}}"

<block></block> 是一个包裹性质的容器，不会再页面中做任何渲染

3.2 hidden

控制元素显示和隐藏

语法：hidden="{{flag}}" flag 为true 隐藏，否则显示

3.3 两者相比

1、运行方式不同

wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏

hidden 以切换样式的方式（display：none/block），控制元素的显示与隐藏

2、使用建议

频繁切换，使用hidden

切换条件复杂，使用wx:if

4、列表渲染

4.1 wx:for

4.1.1 作用

根据指定的数组，循环渲染重复的组件结构

4.2 wx:key

4.2.1 作用

提高渲染的效率；既可以使用id，也可以使用索引index；

语法：wx:key="index"

5、wxss样式

5.1 定义

用来美化小程序样式的一套样式规（当全局样式与局部样式冲突时，显示权重大的，局部样式与全局样式权重一样，也显示局部样式）

5.2 与CSS的区别

特有：rpx尺寸单位

@import样式导入

5.3 RPX尺寸单位

5.3.1 作用：

用来解决屏适配的尺寸单位

5.3.2 实现原理

鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份；

在较小的设备上，1rpx代表宽度较小

在较大的设备上，1rpx代表的宽度较大

5.4 样式导入

语法：@import "cn/src/common.css";

wxml:

wxss:

common.wxss:

6、全局配置

6.1 小程序页面组成

导航栏+窗口+页面

6.1.1 导航栏配置

在app.json -》 window 下配置

6.1.2 下拉刷新

在app.json -》 window 下配置

6.1.2.1 下拉刷新后的背景色

在app.json -》 window 下配置backgroundColor

6.1.2.2 下拉刷新时的loading

在app.json -》 window 下配置backgroundTextStyle

6.1.3 上拉触底的距离

在app.json -》 window 下配置onReachBottomDistance（默认50px）

6.1.4 tabBar

6.1.4.1 作用：

tarBar用于实现多页面的快速切换；小程序通常将其分为两种：底部tabBar，顶部tabBar

注意：

tabBar最少配置2个，最多配置5个tab页签

当渲染顶部tabBar是，不显示icon，只显示文本

6.1.4.2 组成：

配置路径：

app.json -> 新建tabBar对象

配置项

每个list中页签的配置项：

demo：

7、页面配置

如果全局样式与局部样式冲突时，就近原则，最终效果以页面配置为准

8、网路请求

8.1 限制

1、只能请求HTTPS类型的接口

2、必须将接口的域名添加到信任列表中

8.2 配置合法域名

小程序后台 -》 开发 -》 开发设置 -》 服务器域名 -》 修改request合法域名

注意事项：

1、域名只支持HTTPS

2、域名不能使用IP或者localhost

3、域名必须ICP备案

4、在管理端一个月只能修改5次

8.3 GET、POST请求

语法：wx.request()

eg:

8.4 页面加载时，初始化数据

8.5 跳过request域名合法校验

只限于开发测试，上线之后还需要HTTPS

8.6 跨域

宿主环境是微信客户端，不存在跨域