小程序-3(页面导航+页面事件+生命周期+WXS)

目录

1.页面导航

声明式导航

导航到tabBar页面

导航到非tabBar页面

后退导航

编程式导航

后退导航

导航传参

声明式导航传参

编程式导航传参

在onload中接收导航参数

2.页面事件

下拉刷新

停止下拉刷新的效果

​编辑

上拉触底

配置上拉触底距离

上拉触底的节流控制

自定义编译模式

3.生命周期

生命周期的分类

生命周期函数

应用的生命周期函数

页面的生命周期函数

4.WXS

WXS的定义

WXS和JavaScript的关系

内嵌wxs脚本

定义外联的WXS脚本

使用定义的外联的wxs脚本

wxs的特点

判断是否还有下一页数据


1.页面导航

声明式导航:在页面上声明一个<navigator>导航组件,通过点击该组件实现页面跳转

编程式导航:调用小程序的导航API,实现页面的跳转

声明式导航

导航到tabBar页面

在navigator中要用到url属性和open-type属性,其中url表示要跳转的页面的地址,必须以"/"开头,open-type表示跳转的方式,必须为switchTab

导航到非tabBar页面

与导航到tabBar页面相似,只是open-type="navigate",导航到非tabBar页面时open-type属性可以省略

后退导航

在当前页面的wxml文件中写,open-type="navigateBack" delta="1" ,delta的值必须是数字,表示要后退的层级,如果只是后退到上一页面,可以省略delta属性,因为其默认值就是1

编程式导航

编程式导航调用wx.switchTab()方法,可以跳转到tabBar页面

编程式导航中,导航到tabBar页面与导航到非tabBar页面一样,注意网址第一位都要写"/"

后退导航

后退导航调用wx.navigateBack()方法,可以返回上一页面或多级页面

如果想退回多级页面,可以在wx.navigateBack()方法中定义一个delta来赋值想要后退的页面数

导航传参

声明式导航传参

url属性来指明路径,同时后面可以传递参数

路径和参数之间用?分隔,参数值与参数值之间用=相连(参数名=参数值),不同的参数之间用&相隔

编程式导航传参

bindtap绑定了事件,在调用事件时同样是在网址后面加上了参数,写法与上面相同

在onload中接收导航参数

通过两种导航方式得到的参数,可以直接在onload事件中得到

因为options仅作用于onload事件中,想要把得到的参数运用于整个页面,可以在data中定义一个空的query,在onload中,使用this.setData({query:options})将参数值给query,从而实现参数在整个页面的应用

2.页面事件

下拉刷新

触发下拉刷新事件,要把count的值重置为0,可以调用下拉刷新的函数onPullDownRefresh,在该函数中再调用this.setData方法,将count值重新赋值为0

停止下拉刷新的效果

实现页面的下拉刷新,在页面的.json文件中配置onPullDownRefresh:true;实现全局的下拉刷新在app.json文件中配置。backgroundColor来设置下拉界面的颜色,backgroundTextStyle来设置下拉刷新小圆点的颜色效果

下拉刷新时,页面不会自动回到顶部,这时可以在onPullDownRefresh函数中调用wx.stopPullDownRefresh()函数,仅需调用不需要写回调函数

上拉触底

在页面的.js文件中,通过onReachBottom()函数来触发上拉触底事件

配置上拉触底距离

在.json文件中,通过onReachBottomDistance属性来配置上拉触底的距离,默认是50px

上拉触底的节流控制

自定义编译模式

3.生命周期

生命周期的分类

应用生命周期(小程序)和页面生命周期

生命周期函数

生命周期函数是小程序框架提供的内置函数,伴随着生命周期执行

生命周强调的是时间段,生命周期函数强调的是时间点

生命周期函数又分为应用生命周期函数和页面生命周期函数

应用的生命周期函数

小程序的应用生命周期函数在app.js中进行声明

onLaunch 小程序初始化完成,执行此函数,全局只触发一次

onShow 小程序启动,或者从后台进入前台显示时触发(可触发多次)

onHide 小程序从前台进入后台时触发(可触发多次)

页面的生命周期函数

页面的生命周期函数在页面的.js文件中进行声明

onLoad监听页面加载,一个页面只调用1次;可以初始化一些数据或者转存一些参数

onShow 监听页面显示

onReady 监听页面初次渲染完成,一个页面只调用一次; 可以调用wx.setNavigationBarTitle去修改页面内容

onHide 监听页面隐藏

onUnload 监听页面卸载,一个页面只调用1次

4.WXS

WXS的定义

wxs是小程序独有的脚本语言,用来渲染wxml结构,wxml无法调用页面中在.js中定义的函数,但是wxml可以调用wxs中定义的函数

WXS和JavaScript的关系

内嵌wxs脚本

wxs代码可以写在wxml文件中的<wxs>标签内,就像是javascript代码可以写在html文件的<script>标签内一样

wxml文件中的每个<wxs></wxs>标签,必须提供module属性,用来指定当前wxs的模板名称,方便询问

module.exports.toUpper+function(){} 该句话中toUpper是方法,module.exports是模块导入这个方法,在后面调用的时候,可以直接使用module名.方法名{{参数}}

定义外联的WXS脚本

wxs代码还可以编写在以.wxs为后缀名的文件内,就像javascript代码可以编写在以.js为后缀名的文件中一样

写在.wxs文件中的代码要注意格式的完整和正确性

使用定义的外联的wxs脚本

先定义好的外联wxs文件,在wxml文件中引入外联文件并进行命名

<wxs src="../../utils/tools.wxs" module="命名"></wxs>

其中src必须是相对路径

wxs的特点

  1. 与javascript语言不同,虽然借鉴了较多,但本质上是不相同的
  2. 不能作为组件的回调函数,wxs经常与Mustache搭配使用,但在wxs中定义的函数不能作为组件的回调函数使用
  3. 隔离性:不能调用js中定义的函数,不能调用小程序提供的API
  4. 性能好:在iOS设置上,小程序内的wxs会比js快2-20倍;在android设备上,二者的运行效率无差异

判断是否还有下一页数据

arr.splice(a,b,'c') 在数组的索引a处,删除b个元素,添加c

相关推荐
也无晴也无风雨25 分钟前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational2 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
程序员入门进阶5 小时前
基于微信小程序的电子购物系统的设计与实现(lw+演示+源码+运行)
微信小程序·小程序
郝晨妤5 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js