小程序-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

相关推荐

  1. 程序-生命周期(2) 应用周期/页面周期

    2024-07-18 03:08:01       28 阅读
  2. 程序生命周期以及页面生命周期

    2024-07-18 03:08:01       30 阅读
  3. 程序页面导航

    2024-07-18 03:08:01       26 阅读
  4. 微信程序——程序页面生命周期详解

    2024-07-18 03:08:01       40 阅读
  5. Flutter页面生命周期

    2024-07-18 03:08:01       33 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-18 03:08:01       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-18 03:08:01       71 阅读
  3. 在Django里面运行非项目文件

    2024-07-18 03:08:01       58 阅读
  4. Python语言-面向对象

    2024-07-18 03:08:01       69 阅读

热门阅读

  1. Spring源码-读取XML文件配置信息

    2024-07-18 03:08:01       20 阅读
  2. 使用 Django 框架进行开发的基本模板

    2024-07-18 03:08:01       21 阅读
  3. ubuntu安装mininet-wifi

    2024-07-18 03:08:01       20 阅读
  4. VPN介绍

    2024-07-18 03:08:01       21 阅读
  5. Ubuntu下如何设置程序include搜索路径及链接路径

    2024-07-18 03:08:01       24 阅读
  6. 生成式 AI 的发展方向,是 Chat 还是 Agent?

    2024-07-18 03:08:01       25 阅读
  7. Chapter 2: An Introduction to ASP.NET Core in Layman‘s Terms

    2024-07-18 03:08:01       18 阅读
  8. function calling实现调用理杏仁api获取数据

    2024-07-18 03:08:01       23 阅读
  9. 算法热门工程师面试题(一)

    2024-07-18 03:08:01       25 阅读