一、生命周期
1、定义
生命周期(Life Cycle）是指一个对象从创建>运行→>销毁的整个阶段，强调的是一个时间段。
2、分类
应用生命周期（app.js）：特指小程序从启动->运行→销毁的过程
-
App({
-
//小程序初始化完成时，执行此函数，全局只触发一次。可以做一些初始化的工作。
-
onLaunch:
function(
options){ },
-
//小程序启动,或从后台进入前台显示时触发。
-
onShow:
function(
options) { },
-
//小程序从前台进入后台时触发。
-
onHide :
function(
){ }
-
})
页面生命周期（页面.js）：特指小程序中，每个页面的加载→渲染→销毁的过程
-
Page({
-
onLoad :
function(
options){ }，
// 监听页面加载，一个页面只调用1次
-
onShow :
function(
) { }，
//监听页面显示
-
onReady :
function(
) { },
//监听页面初次渲染完成，一个页面只调用1次
-
onHide :
function(
) { },
//监听页面隐藏
-
onUnload:
function(
) { }
//监听页面卸载，一个页面只调用1次
-
})
3、生命周期函数
定义：由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。
作用：允许程序员在特定的时间点，执行某些特定的操作。例如，页面刚加载的时候，可以在onLoad生命周期函数中初始化页面的数据。
注意：生命周期强调的是时间段,生命周期函数强调的是时间点。
二、wxs脚本
1、定义
wxs ( weixin Script)是小程序独有的一套脚本语言，结合wxml，可以构建出页面的结构。
2、应用场景
wxml 中无法调用在页面的.js中定义的函数，但是wxml 中可以调用wxs 中定义的函数。因此，小程序中wxs的典型应用场景就是“过滤器”。
3、wxs和Javascript的关系
wxs的语法类似于JavaScript，但是wxs和JavaScript是完全不同的两种语言:
I、wxs有自己的数据类型:
- number数值类型
- string字符串类型
- boolean布尔类型
- object对象类型
- function函数类型
- array数组类型
- date日期类型
- regexp正则
II、wxs 不支持类似于ES6及以上的语法形式:
- 不支持: let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc...
- 支持: var定义变量、普通function函数等类似于ES5的语法
III、wxs遵循CommonJS规范:
- module对象
- require()函数
- module.exports对象
4、wxs的基本用法
内嵌wxs脚本：
wxs代码可以编写在wxml文件中的<wxs>标签内，就像Javascript 代码可以编写在html文件中的<script>标签内一样。
wxml文件中的每个<wxs></wxs>标签，必须提供 module属性，用来指定当前wxs的模块名称，方便在wxml中访问模块中的成员:
-
<view>{{m1.toUpper(username)}}
</view>
-
-
<wxs module="m1">
-
//将文本转为大写形式he ->HE
-
module.exports.toUpper = function(str) {
-
return str.toUpperCase()
-
}
-
</wxs>
定义外联的wxs脚本：
wxs 代码还可以编写在以.wxs为后缀名的文件内，就像javascript 代码可以编写在以.js为后缀名的文件中一样。示例代码如下:
-
function
toLower(
str) {
-
return str.
toLowerCase()
-
}
-
-
module.
exports = {
-
toLower: toLower
-
}
使用外联的wxs脚本:
在wxml中引入外联的wxs 脚本时，必须为<wxs>标签添加 module和 src属性，其中:
- module用来指定模块的名称
- src用来指定要引入的脚本的路径，且必须是相对路径
-
<!--调用m2模块中的方法-->
-
<view>{{m2.toLower(country)}}
</view>
-
-
<!--引用外联的 tools.wxs脚本，并命名为m2 -->
-
<wxs src="../ ../utils/tools.wxs" module="m2">
</wxs>
5、wxs的特点
不能作为组件的事件回调：wxs典型的应用场景就是“过滤器”，经常配合Mustache语法进行使用：
<view>{{m2.toLower(country)}}</view>在wxs中定义的函数不能作为组件的事件回调函数。例如，下面的用法是错误的:
<button bindtap="m2.toLower">按钮</button>
隔离性： 指的是 wxs的运行环境和其他JavaScript 代码是隔离的。体现在如下两方面:
- wxS 不能调用js中定义的函数
- wxs不能调用小程序提供的API
性能好：
- 在iOS设备上，小程序内的wxs会比JavaScript代码快2～20倍
- 在android设备上，二者的运行效率无差异
6、使用wxs处理手机号
utils--->tools.wxs:
-
function
spliPhone(
str){
-
if(str.
length!==)
return str
-
-
var arr= str.
split(
'')
-
arr.
splice(
3,
0,
'-')
-
arr.
splice(
8,
0,
'-')
-
return arr.
join(
'')
-
}
-
-
module.
exports={
-
spliPhone:spliPhone
-
},
-
<text>电话:{{tools.splitPhone(item.phone)}}
</text>
-
-
<wxs src="../../utils/tools.wxs" module="tools">
</wxs>
三、案例总结
1、九宫格改造——navigator传参
-
<!--九宫格区域-->
-
<view class="grid-list">
-
<navigator class="grid-item" wx:for="{{gridList}}" wx:key="id" url=" /pages/shoplist/shoplist?id={{item.id}}&title={{item.name}}">
-
<image src="{{item.icon}}">
</image>
-
<text>{{item.name}}
</text>
-
</navigator>
-
</view>
2、动态设置页面标题：wx.setNavigationBarTitle(Object object)
-
data:{
-
query:{}
-
},
-
-
onLoad:
function (
options){
-
this.
setData({
-
query:options
-
})
-
},
-
-
onReady:
function (
){
-
wx.
SetNavigationBarTitle({
-
title:
this.
data.
query.
title,
-
})
-
},
3、列表页面的API接口
以分页的形式，加载指定分类下商铺列表的数据:
- 接口地址：https:/ /www.escook.cn/categories/:cate_id/shops，其中URL地址中的:cate_id是动态参数，表示分类的ld
- 请求方式：GET请求
- 请求参数：_page表示请求第几页的数据、_limit表示每页请求几条数据
-
data:{
-
query:{},
-
shopList:[],
-
page:
1,
-
pageSize:
10,
-
total:
0
-
},
-
-
-
onLoad:
function (
options){
-
this.
getShopList()
-
},
-
-
-
getShopList(
) {
-
//展示Loading效果
-
wx.
showLoading({
-
title:
'数据加载中...'
-
})
-
-
wx.
request({
-
url:
`https: / /www.escook.cn/categories/${this.data. query.id};/shops`,
-
method:
'GET'，
-
data: {
-
_page:
this.
data.
page,
-
_limit:
this.
data.
pageSize
-
}
-
}),
-
success(res)=>{
-
this.
setData({
-
shopList:[...
this.
data.
shopList,...res.
data],
-
total:res.
header[
'X-Total-Count']-
0
-
})
-
},
-
complete()=>{
-
//隐藏Loading效果
-
wx.
showLoading()
-
}
-
},
4、初步实现上拉加载效果并加载下一页数据
注意：json开启onReachBottom节点。
-
onReachBottom:
function (
){
-
this.
setData({
-
page:
this.
data.
page +
1
-
})
-
-
this.
getShopList()
-
},
一定要配置节流阀！！！（节流阀配置见mp2）
5、判断数据是否加载完毕
页码值（page）*每页显示多少条数据(pageSize)>=总数据条数(total)
-
onReachBottom:
function (
){
-
if(
this.
data.
page*
this.
data.
pageSize>=
this.
data.
total){
-
//没有下一页数据
-
return wx.
showToast({
-
title:
'数据加载完毕！',
-
icon:
'none'
-
})
-
}
-
this.
setData({
-
page:
this.
data.
page +
1
-
})
-
-
this.
getShopList()
-
},
6、 实现下拉刷新功能（相关配置见mp2）
注意：json开启enablePullDownRefresh节点。
-
onPullDownRefresh:
function (
){
-
//重置关键信息
-
this.
setData({
-
page:
1,
-
shopList:[],
-
total:
0
-
})
-
//重新发起请求
-
this.
getShopList(
()=>{
-
wx.
stopPullDownRefresh()
-
})
-
},
-
-
-
-
//cb&&cb()
转载：https://blog.csdn.net/weixin_47281685/article/details/127912047