小程序生命周期

页面生命周期函数

wxs脚本

应用场景“过滤器”

wxs和Javascript的关系

image-20221111101359049

内嵌wxs脚本

类似在html中使用javascript代码块。在wxml页面使用wxs标签，且必须提供module属性。

1
2
3
<wxs module="m1">
	...
</wxs>

外联wxs脚本

在外部文件夹中，定义以.wxs结尾的文件，在文件中定义方法和导出方法

1
2
3
4
5
6
7
8
//定义函数方法
function func(x){
	return ...
}
//向外暴露对应的方法
module.exports ={
	funcExported:func
}

如何使用

在wxs中添加src属性，并提供一个module属性

wxs的特点

  1. 性能好，在iOS中体验明显，Android中基本无差别
  2. wxs和Javascript是完全不同的语言
  3. wxs独立性好，不能调用微信api
  4. wxs不能作为回调事件

本地生活实例之数据列表

列表页面的API接口

以分页的形式，加载指定分类下的数据

:cate_id

api url中的动态参数，表示分类的id

1
url:'https://www.example.com/${this.data.quary.id}/list'

请求参数

  • _page：表示请求第几页的数据
  • _limit：表示每页请求几条数据

判断是否还有数据

页码值*每页显示的数据量>=总数据条数

1
page*pageSize>=total //条件成立时，没有下一页数据了，不再发起请求

下拉刷新

重置关键信息

1
2
3
4
5
this.setData({
  page:1,
  missionlist:[],
  total:0
})

重新获取数据

1
2
3
this.getMissionList(()=>{
  wx.stopPullDownRefresh() //传入一个回调函数，来执行停止下拉刷新函数
})