页面渲染
条件渲染
wx:if
在小程序中,使用wx:if="{{condition}}"来判断是否需要渲染该代码块
<view wx:if="{{condition}}">True</view>
也可以用wx:elif和wx:else来添加一个else块
<view wx:if="{{length>5}}">1</view>
<view wx:elif="{{length>2}}">2</view>
<view wx:else>3</view>
block wx:if
因为wx:if是一个控制属性,需要将它添加到一个标签上,如果要一次性判断多个组件标签,可以使用一个标签将多个组件包装起来,并在上边使用wx:if控制属性
<block wx:if="{{length>5}}">
<view>1</view>
<view>1</view>
</block>
注意:并不是一个组件。它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
hidden
小程序中,直接使用hidden="{{condition}}"也能控制元素的显示与隐藏
<view hidden="{{flag}}">条件为true隐藏,条件为false显示</view>
wx:if与hidden的对比
1.被wx:if控制的区域,框架有一个局部渲染的过程,会根据控制条件的改变,动态创建或销毁对应的uI结构
2.同时,wx:if也是惰性的,如果在初始渲染条件为false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染
3.相比之下,hidden简单得多,组件始终会被渲染,只是简单的控制显示与隐藏
4.总结:wx:if有更高的切换消耗而hidden有更高的初始化渲染消耗。因此,如果需要频繁切换的情景下,用hidden更好,如果在运行条件不大可能改变则wx:if较好
列表渲染
wx:for
在组件使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项下标变量名默认为index,数组当前项的变量名默认为item
<view wx:for="{{list}}" wx:key="index">索引是:{{index}},item项是{{item}}</view>
手动指定索引和当前项的变量名
1.使用wx:for-item可以指定数组当前元素的变量名
2.使用wx:for-index可以指定数组当前下标的变量名,示例代码如下:
<view wx:for="{{list}}" wx:key="index" wx:for-index="idx" wx:for-item="itname">索引是:{{idx}},item项是{{itname}}</view>
block wx:for
类似block wx:if,也可以将wx:for用在标签上,以渲染一个包含多节点的结构块,示例如下
<block wx:for="{{[1,2,3]}}" wx:key="index">
<view>索引是:{{index}}</view>
<view>item项是{{item}}</view>
</block>
列表渲染中key
1、key在列表循环中的作用
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如中输入内容,的选中状态),需要使用wx:key来指定列表中项目的唯一标识符
当数据改变触发渲染层重新渲染的时候,会校正带有key的组件,框架会确保他们被重新排序,而不是重新创建,以确保是组件保持自身的状态,并且提高列表渲染时的效率
2.key值的注意点
1.key值必须具有唯一性,且不能动态改变
2.key的值必须是数字或字符串
3.保留关键字*this代表在for循环中的item本身,它可以充当key值,但是有以下限制:需要item本身是一个唯一字符串或者数字
4.如果不提供wx:key;会报一个warning,如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略
页面事件
下拉刷新
下拉刷新的概念及应用场景
概念:下拉刷新是移动端更新列表数据交互行为,用户通过手指在屏幕上自上而下的滑动,可以触动页面的下拉刷新,更新列表数据
应用场景:在移动端,数据列表是常见的页面效果,更新列表数据是最基本的页面需求,相比按钮刷新、定时刷新来说,下拉刷新的用户体验友好,已经成为移动端列表数据的最佳解决方案
启用下拉刷新
两种方式
1.需要在app.json的window选项中或者页面配置中开启enablePullDownRefresh.但是,一般情况下,推荐在页面配置中为需要的页面单独开启下拉刷新行为
2.可以通过wx.startPullDownRefresh()触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致
配置下拉刷新窗口的样式
需要在app.json的window选项中或者页面配置中修改backgroundColor和backgroundTextStyle选项
1.backgroundColor用来配置下拉刷新窗口的背景颜色,仅支持16进制颜色值
2.backgroundTextStyle用来配置下拉刷新loading的样式,仅支持dark和light.
监听页面下拉刷新事件
为页面添加onPullDownRefresh()函数,可以监听用户在当前页面的下拉刷新
停止下拉刷新效果
当处理下拉刷新后,下拉刷新的loading效果会一直显示,不会主动消失,所以需要手动隐藏下拉刷新的loading效果。此时,调用wx.stopPullDownRefresh()可以停止当前页面的下拉刷新
上拉加载更多
上拉加载更多的概念及应用场景
概念:在移动端,随着手指不断向上滑动,当内容要到达屏幕底部的时候,页面会随之不断地加载后续内容,直到没有内容为止,我们称之为上拉加载更多。上拉加载更多的本质是数据的分页加载。
应用场景:在移动端,列表数据的分页加载,首选的实现方式就是上拉加载更多
配置上拉触底的距离
配置上拉加载触底的距离
可以在app.json的window选项中或者页面配置中设置触底距离onReachBottomDistance.单位为px,默认的距离是50px.
监听页面的上拉触底事件
为页面添加onReachBottom()函数,可以监听用户在当前页面的上拉触底事件,从而实现上拉加载更多列表数据的效果
其它页面事件
1.onPageScroll(object)
监听用户滑动页面事件。其中object参数说明如下:
属性 | 类型 | 说明 |
---|---|---|
scrollTop | Number | 页面在垂直方向已经滚动的距离(单位px) |
2.onShareAppMessage(object)
监听用户点击页面内转发按钮(转发)或者右上角菜单“转发”按钮的行为,并自定义转发内容。其中object参数说明如下:
参数 | 类型 | 说明 |
---|---|---|
from | String | 转发事件来源。button:页面内转发按钮;menu:右上角转发菜单 |
target | Object | 如果from值是button,则target是触发这次转发事件的button,否则为undefined |
webViewUrl | String | 页面包含组件时,返回当前的url |
同时,此转发事件需要return一个object,用于自定义转发内容,返回内容如下:
字段 | 说明 | 默认值 |
---|---|---|
title | 转发标题 | 当前小程序名称 |
path | 转发路径 | 当前页面path,必须是以/开头的完整路径 |
imageUrl | 自定义图片路径,可以是本地文件路径,代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是5:4 | 使用默认截图 |
onShareAppMessage: function (obj) {
console.log(obj)
return {
title:'转发标题',
path:'/pages/index/index',
imageUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574138116103&di=fa7a559a2149efb8397937ac860225a3&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F12%2F20181012135421_yctdg.jpg'
}
}
3.onTabItemTap(object)
点击tab时触发,其中object参数说明
参数 | 类型 | 说明 |
---|---|---|
index | String | 被点击tabItem的序号,从0开始 |
pagePath | String | 被点击tabItem的页面路径 |
text | String | 被点击tabItem的按钮文字 |
页面导航
小程序页面导航的两种方式
1.声明式导航:通过点击navigator组件实现跳转的方式
2.编程式导航:通过调用小程序的API接口实现跳转的方式
声明式导航
1.导航到非tabBar页面
非tabBar页面指的是没有当作tabBar进行切换的页面
示例代码如下:
<navigator url="/pages/index/index">去index页面</navigator>
上述代码使用url属性指定要跳转到的页面路径;其中,页面路径应该以/开头,且路径必须提前在app.json的pages节点下声明,才能实现正常的跳转
2.导航到tabBar页面
tabBar页面指的是被当作tabBar进行切换的页面。如果navigator组件单纯使用urI属性,无法导航到tabBar页面,需要结合open-type属性导航。
示例代码如下:
<navigator url="/pages/home/home" open-type="switchTab">返回到home页面</navigator>
3.后退导航
如果后退到上一个页面或多级页面,需要把open-type设置为navigateBack,同时使用delta属性指定后退的层数,示例代码如下:
<navigator open-type="navigateBack" delta="2">后退</navigator>
注意:此页面和上一级页面不能在tabBar里面注册,否则不能实现后退功能
编程式导航
1.导航到非tabBar页面
通过wx.navigateTo(Object object)方法,可跳转到应用内的某个页面。但是不能跳转到tabBar页面。其中Obeject参数对象的属性列表如下:
属性 | 类型 | 是否必填 | 说明 |
---|---|---|---|
url | String | 是 | 需要跳转的应用非tabBar的页面路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如path?key=value&key2=‘value2’ |
success | function | 否 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数(调用成功,失败都会执行) |
示例代码:
bindtap:function(){
wx.navigateTo({
url: '/pages/index/index',
})
}
2.导航到tabBar页面
通过wx.switchTab(Object object)方法,可以跳转到tabBar页面,并关闭其他所有非tabBar页面。其中Object参数对象属性列表如下:
属性 | 类型 | 是否必填 | 说明 |
---|---|---|---|
url | String | 是 | 需要跳转的tabBar页面(需要在app.json的tabBar字段定义的页面),路径后不能带参数 |
success | function | 否 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数(调用成功,失败都会执行) |
xx:function(){
wx.switchTab({
url: '/pages/home/home',
})
}
3.后退导航
通过wx.navigateBack(Object object)方法,关闭当前页面,返回上一页面或多级页面。其中Object参数对象属性列表如下
属性 | 类型 | 是否 | 说明 |
---|---|---|---|
delta | number | 是 | 返回的页面数,如果delta大于现有页面数,则返回到首页 |
success | function | 否 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口结束的回调函数(调用成功,失败都会执行) |
示例代码:
vvv:function(){
wx.navigateBack({
delta:1
})
}
导航传参
1.声明式导航传参
navigator组件的url用来指定导航到的页面路径,同时路径后面还可以携带参数,参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔
代码如下
<navigator url="/pages/index/index?name=zs&age=12">去index页面</navigator>
2.编程式导航
wx.navigateTo(Object object)方法的object参数中,url属性用来指定需要跳转的应用内非tabBar页面的路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔。
代码如下
wx.navigateTo({
url: '/pages/index/index?name=zs & age=12',
})
页面接受导航传递过来的参数
不论是声明式导航还是编程式导航,最终导航到的页面可以在onLoad生命周期函数中接收传递过来的的参数
代码如下:
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options)
}
自定义编译模式快速传参
小程序每次修改代码并编译后,或默认从首页进入,但是在开发阶段,我们经常会针对特定的页面进行开发,为了方便编译后直接进入对应的页面,可以配置自定义编译模式,步骤如下:
1.单击工具栏上的“普通编译”下拉菜单;
2.单击下拉菜单中的“添加编译模式”选项
3.在弹出的“自定义编译条件窗口”,按需添加模式名称、启用页面、启用参数、进入场景等。
网络数据请求
配置服务器域名
每个微信小程序需要事先设置一个通讯域名,小程序只可以跟指定域名进行网络通信
服务器域名请在[小程序后台–开发–开发设置–服务器域名]中进行配置,配置时需要注意:
1.域名只支持https(request\uploadFile\downloadFile)和wss(connetSocket)协议
2.域名不能使用IP地址或localhost
3.域名必须经过ICP备案
4.服务器域名一个月内可申请5次修改
跳过域名校验
在微信开发者工具中,可以临时开启 「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」 选项,跳过服务器域名的校验。此时,在微信开发者工具中及手机
开启调试模式时,不会进行服务器域名的校验
**注意:**在服务器域名配置成功后,建议开发者关闭此选项进行开发,并在各平台下进行测试,以确认服务器域名配置正确。
发起网络数据请求
发起get请求
调用 wx.request(Object object)
方法发起 get 请求,代码示例如下
wx.request({// 请求的URL地址,必须基于 HTTPS 协议
url: 'https://www.liulongbin.top:8082/api/get',
// 发送到服务器的数据
data: { name: 'zs', age: 20 },
method: 'GET',
// 成功之后的回调函数
success: function(result) {
//result.data 就能获取服务器返回的数据
console.log(result)
}
})
发起post请求
调用 wx.request(Object object)
方法发起 post 请求,代码示例如下:
wx.request({// 请求的URL地址,必须基于 HTTPS 协议
url: 'https://www.liulongbin.top:8082/api/post',
// 发送到服务器的数据
data: { name: 'zs', age: 20 },
method: 'POST',
// 成功之后的回调函数
success: function(result) {
//result.data 就能获取服务器返回的数据
console.log(result)
}
})
小程序中没有跨域限制
在普通网站开发中,由于浏览器的同源策略限制,存在数据的跨域请求问题,从而衍生出了 JSONP 和 CORS 两种主流的跨域问题解决方案。但是,小程序的内部
运行机制与网页不同,小程序中的代码并不运行在浏览器中,因此小程序开发中,不存在数据的跨域请求限制问题
关于微信小程序更多的数据请求内容,请翻阅 wx.request()
的相关文档:
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html