6、WXML 模板语法
6.1、数据绑定
(1) 基本原则
- 在 data 中定义数据
- 在 wxml 中使用数据
(2) 在 data 中定义页面的数据
在页面对应的 .js 文件中,把数据定义到 data 对象中即可
代码实现:
// index.js 代码
Page({
/**
* 页面的初始数据
*/
data:{
info :'hello world'
}
})
<!--index.wxml 代码-->
<view>{{info}}</view>
效果如下:
(3) Mustache 语法的应用场景
-
绑定内容(在第(2)部分的代码实现的结果就是绑定内容)
-
绑定属性
代码实现:
Page({ data:{ imgSrc :'https://profile- avatar.csdnimg.cn/175e7898736246f3a3c5626654317790_ping_love_.jpg!2' } }) <!--index.wxml--> <image src="{{imgSrc}}" mode="widthFix"></image>
效果如下:
-
运算(三元运算、算术运算等)
代码实现:
Page({ randomNum: Math.random() *10 ,//生成10以内的随机数 randomNum1: Math.random().toFixed(2) //生成一个带两位数的随机数 }) <!--index.wxml--> <view>{{randomNum >= 5 ?'随机数字大于5' :'随机数字小于5' }}</view> <view>生成100以内的随机数:{{randomNum1*100}}</view>
效果如下:
6.2、事件绑定
(1) 什么是事件
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
(2) 小程序中常用的事件
类型 | 绑定方式 | 事件描述 |
---|---|---|
tap | bindtap 或 bind:tap | 手指触摸后马上离开,类似于 HTML 中的 click 事件 |
input | bindinput 或 bind:input | 文本框的输入事件 |
change | bindchange 或 bind:change | 状态改变的触发 |
(3) 事件对象的属性列表
当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示:
属性 | 类型 | 说明 |
---|---|---|
type | String | 事件类型 |
timeStamp | Integer | 页面打开到触发事件所经过的毫秒数 |
target | Object | 触发事件的组件一些属性值集合 |
currentTarget | Object | 当前组件的一些属性值集合 |
detail | Object | 额外的信息 |
touches | Array | 触摸事件,当前停留在屏幕前中的触摸点信息的数组 |
changedTouches | Array | 触摸事件,当前变化的触摸点信息的数组 |
(4) target 和 currentTarget 的区别
- target 时触发该事件的源头组件
- currentTarget 是当前事件所绑定的组件
(5) bindtap 的语法格式
在小程序中,不存在 HTML 中的 onclick 鼠标点击事件,而是通过 tap 事件来响应用户的触摸行为。
代码实现:
Page({
// 定义按钮事件的处理函数
btnTapHandle(e) {
console.log(e);
}
})
<!--index.wxml-->
<button type="primary" bindtap="btnTapHandle">按钮</button>
效果如下:
(6) 在事件处理函数中为 data 中的数据赋值
通过调用 this.setData(dataObject) 方法,可以给页面 data中的数据重新赋值。
代码实现:
Page({
data{
count: 0
},
// +1 按钮点击事件处理函数
CountChange() {
this.setData({
count: this.data.count + 1
})
}
})
效果如下:
(7) 事件传参
可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字。
<button type="primary" bindtap="btnTap2" data-info="{{2}}">+2</button>
最终:
- info 会被解析为参数的名字
- 数值2会被解析为参数的值
在事件处理函数中,通过 event.target.dataset.参数名即可获取具体参数值。
代码实现:
Page({
data{
count: 0
},
// +2 按钮点击事件处理函数
btnTap2(e) {
this.setData({
count: this.data.count + e.target.dataset.info
})
}
})
效果如下:
(8) bindinput 的语法格式
在小程序中,通过 input 事件来响应文本框的输入事件,语法格式如下:
-
通过 bindinput,可以为文本框绑定输入事件
<input type="text" bindinput="inputHandle"></input>
-
在页面的 .js 文件中定义事件处理函数
// input 输入框的事件处理函数 Page({ inputHandle(e) { console.log(e.detail.value); } })
效果如下:
(9) 实现文本框和 data 之间的数据同步
实现步骤:
-
定义数据
Page({ data:{ msg: '你好,' } })
-
渲染结构
<input value="{{msg}}" type="text" bindinput="inputHandle"></input>
-
美化样式
input{ border: 1px solid black; margin: 5px; padding: 5px; border-radius: 3px; }
-
绑定 input 事件处理函数
Page({ // input 输入框的事件处理函数 inputHandle(e) { this.setData({ msg: e.detail.value }) } })
-
效果如下:
6.3、条件渲染
(1) wx:if
在小程序中,使用 wx:if=“{{condition}}” 来判断是否需要渲染改代码块
<view wx:if="{{type === 1}}">男</view>
也可以用 wx:elif 和 wx:else 来添加 else 判断
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>
效果如下:
(2) 结合 使用 wx:if
要一次性控制多个组件的展示与隐藏,可以使用一个 标签将多个组件包装起来。
代码实现:
<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</block>
效果如下:
注意:并不是一个组件,它只是一个包裹性的容器,不会在页面中做任何渲染。
(3) hidden
在小程序中,直接使用 hidden=“{{condition}}” 也能控制元素的显示和隐藏。
代码实现:
<view hidden="{{flag}}">条件为 true 则隐藏,为 false 隐藏</view>
Page({
data:{
flag: true
}
})
效果如下:
flag为 true 时
flag为 false 时
(4) wx:if 与 hidden 的对比
- 运行方式不同
- wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏
- hidden 以切换样式的方式(display:none/block;),控制元素的显示与隐藏
- 使用建议
- 频繁切换时,建议使用 hidden
- 控制条件时,建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换
(5) wx:for
通过 wx:for 可以根据指定的数组,循环渲染重复的组件结构。
代码实现:
<!--index.wxml-->
<view wx:for="{{arr1}}">
索引是:{{index}}, 当前项是:{{item}}
</view>
//index.js
Page({
data:{
arr1: ['联想','华硕','惠普']
}
})
效果如下:
(6) wx:key 的使用
小程序在实现列表渲染时,建议为渲染出来的列表项指定唯一的key值,从在提高渲染的效率。
代码实现:
// wxml结构
<view wx:for="{{list}}" wx:key="id">
{{item.name}}
</view>
//js结构
Page({
list: [
{id:1,name:'小明'},
{id:2,name:'小红'},
{id:3,name:'小黄'}
]
})
效果如下:
7、WXSS 模板样式
7.1、WXSS 和 CSS 的关系
如图所示:
7.2、rpx
(1) 什么是 rpx 尺寸单位
rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位。
(2) rpx 的实现原理
鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx 把所有设备的屏幕,在宽度上等分位750分。
- 在较小的设备上,1rpx 所代表的宽度较小
- 在较大的设备上,1rpx 所代表的宽度较大
7.3、样式导入
(1) 什么是样式导入
使用 WXSS 提供的 @import 语法,可以导入外联的样式表。
(2) @import 的语法格式
@import + 导入路径 + ;
代码实现:
/* common.wxss */
.userName{
color: red;
}
/**index.wxss**/
@import "/pages/common/common.wxss";
效果如下:
7.4、全局样式和局部样式
(1) 全局样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。
(2) 局部样式
在页面的 .wxss 文件中定义的样式为局部样式,只作用于当前页面。
注意:
- 当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全部样式
- 当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式。
7.5、全局配置
(1) 全局配置文件及常用的配置项
- pages
- 记录当前小程序所有页面的存放路径
- window
- 全局设置小程序窗口的外观
- tabBar
- 设置小程序底部的 tabBar 效果
- style
- 是否启用新版的组建样式
(2) window
- 小程序窗口的组成部分
-
了解 window 节点的配置项
属性名 类型 默认值 说明 navigationBarTitleText String 字符串 导航栏标题文字内容 navigationBarBackgroundColor HexColor #000000 导航栏背景颜色 navigationBarTextStyle String white 导航栏标题颜色 backgroundColor HexColor #ffffff 窗口的背景颜色 backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark/light enablePullDownRefresh Boolean false 是否全局开启下拉刷新 onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为 px -
设置导航栏的标题
步骤:app.json➡window➡navigationBarTitleText
代码实现:
效果如下:
-
设置导航栏的背景颜色
步骤:app.json➡window➡navigationBarBackgroundColor
代码实现:
效果如下:
-
设置导航栏的标题颜色
步骤:app.json➡window➡navigationBarTextStyle
代码实现:
效果如下:
注意:navigationBarTextStyle 的可选值只有 black 和 white
-
全局开启下拉新功能
步骤:app.json➡window➡enablePullDownRefresh 的值设为 true
代码实现:
效果如下:
注意:在 app.json 中启用下拉刷新功能,会作用于每个小程序页面!
-
设置下拉刷新窗口的颜色
步骤:app.json➡window➡backgroundColor。
代码实现:
效果如下:
-
设置下拉刷新时 loading 的样式
步骤:app.json➡window➡backgroundTextStyle 指定为 dark。
代码实现:
效果如下:
-
设置上拉触底的距离
步骤:app.json➡window➡为 onReachBottomDistance 设置新的数据
注意:默认距离为50px,如果没有特殊需求,建议使用默认值即可。
8、tabBar
8.1、什么是 tarBar
tabBar 是移动端应用常见的页面效果,与用于实现多页面的快速切换。
小程序通常将其分为:
- 底部 tabBar
- 顶部 tabBar
注意:
- tarBar 中只能配置最少2个,最多5个 tab 页签
- 当渲染顶部 tabBar 时,不显示 icon,只显示文本
8.2、tabBar 的6个组成部分
- backgroundColor:tabBar的背景色
- selectedIconPath:选中时的图片路径
- borderStyle:tabBar上边框的颜色
- iconPath:未选中时的图片路径
- selectedColor:tab上的文字选中时的颜色
- color:tab上文字的默认(未选中)颜色
8.3、tabBar节点的配置项
属性 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
position | String | 否 | bottom | tabBar的位置,仅支持 bottom/top |
borderStyle | String | 否 | black | tabBar 上边框的颜色,仅支持 black/white |
color | HexColor | 否 | tab 上文字的默认(未选中)颜色 | |
selectedColor | HexColor | 否 | tab 上的文字选中时的颜色 | |
backgroundColor | HexColor | 否 | tabBar 的背景颜色 | |
list | Array | 是 | tab 页签的列表 |
8.4、每个 tab 项的配置选项
属性 | 类型 | 必填 | 描述 |
---|---|---|---|
pagePath | String | 是 | 页面路径,页面必须在 pages 中预先定义 |
text | String | 是 | tab 上显示的文字 |
iconPath | String | 否 | 未选中时的图标路径;当 position 为 top 时,不显示 icon |
selectedIconPath | String | 否 | 选中时的图标路径;当position 为 top 时,不显示 icon |
9、页面配置
9.1、页面配置文件的作用
小程序中,每个页面都有自己的 .json 配置文件,用来当前页面的窗口外观、页面效果进行配置。
9.2、页面配置和全局配置的关系
小程序中,app.json 中的 window 节点,可以全局配置小程序中每个页面的窗口表现。
注意:当页面配置与配置冲突时,根据就近原则,最终的效果以页面配置为准。
9.3、页面配置中常用的配置项
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
navigationBarTextStyle | String | white | 导航栏标题颜色 |
navigationBarTitleText | String | 字符串 | 导航栏标题文字内容 |
backgroundColor | HexColor | #ffffff | 窗口的背景颜色 |
backgroundTextStyle | String | dark | 下拉 loading 的样式,仅支持 dark/light |
enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为 px |
10、网络数据请求
10.1、小程序中网络数据请求的限制
- 只能请求 HTTPS 类型的接口
- 必须将接口添加到信任列表中
10.2、配置 request 合法域名
配置步骤:登录微信小程序管理后台➡开发➡开发设置➡服务器域名➡修改 request 合法域名
注意事项:
- 域名只支持 https 协议
- 域名不能使用 IP 地址或 localhost
- 域名必须经过 ICP 备案
- 服务器域名一个月内最多可申请 5 次修改
10.3、发起 GET 请求
调用为小程序提供的 wx.request() 方法,可以发起 GET 数据请求。
代码实现:
//发起GET请求
getInfo() {
wx.request({
url: 'https://www.escook.cn/api/get',
method: 'GET',
data: {
name: 'zs',
age: '20'
},
success: (res) => {
console.log(res.data);
}
})
}
效果如下:
10.4、发起 POST 请求
调用微信小程序提供的 wx.request() 方法,可以发起 POST 数据请求。
代码实现:
//发起POST请求
postInfo() {
wx.request({
url: 'https://www.escook.cn/api/post',
method: 'POST',
data: {
name: 'ls',
age: '22'
},
success: (res) => {
console.log(res.data);
}
})
}
效果如下:
10.5、在页面刚加载时请求数据
在页面的 onLoad 事件中调用获取数据的函数。
代码实现:
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getInfo()
this.postInfo()
}
效果如下:
10.6、跳过 request 合法域名校检
如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口。
此时为了不耽误开发的进度,我们可以微信开发者工具中,临时开启『开发环境不校验请求域名、TLS 版本及 HTTPS 证书』选项,跳过 request 合法域名的校验。
注意:跳过 request 合法域名校验的选项,仅限在开发与调试阶段使用!
10.7、关于跨域和 Ajax 的说明
跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器,而是微信客户端,所以程序中不存在跨域的问题。
Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象,由于小程序宿主环境是微信客户端,所以小程序中不能叫做“发起 Ajax 请求”,而是叫做“发起网络请求”。
未完待续……