微信小程序-页面导航

WGenji Lv4
  2024-08-26 13:51:51 2024-08-26 13:51:51 Created   2024-08-26 13:51:51 2024-08-26 13:51:51 Updated      

页面导航

​ 两种方式

声明式导航

在页面上声明一个组件

通过点击组件实现页面跳转

tabBar页面

image-20221009102332814

非tabBar页面

​ open-type= “navigate”

​ 为了方便，默认可以不写

后退导航

image-20221009103102448

编程式导航

调用小程序的导航API，实现页面跳转

image-20221009184324138

tabBar

image-20221009103249150

非tabBar

image-20221009103615400

后退导航

image-20221009104046472

传参和接收

声明式和编程式同理

image-20221009104353540

==onload接收参数==

1
2
3
4
5
6
onLoad(options){
    console.log(options) //options等于传递过来的参数
    this.setData({
        query:options    //赋值给data里的自定义对象query，供页面来使用
    })
}

下拉刷新事件

image-20221009105720352

在实际开发中推荐第二种，为需要的页面单独开启下拉刷新的效果

onPullDownRefresh 监听用户下拉动作

wx.stopPullDownRefresh()

当处理完下拉刷新后，loading效果会一直显示，不会主动消失

需要手动关闭下拉刷新效果

上拉触底事件

通过手指上拉操作，实现加载更多数据的行为

onReachBottom 上拉处理函数

配置上拉触底距离

image-20221009111525146

loading效果

数据加载时触发loading效果，成功后使用hide手动关闭image-20221009113638783

节流

定义一个节流阀

image-20221009114305986

自定义编译模式

image-20221009114713333

默认每次重新编译会返回首页，通过自定义配置可以实现定位，传参

生命周期

小程序分为两类 ：

​ 1.应用生命周期 启动 -> 运行 -> 销毁

​ 2.页面生命周期 每个页面的加载 -> 渲染 -> 销毁

image-20221009184851428

应用生命周期函数

image-20221009190843402

页面生命周期函数

image-20221009190927440

WXS脚本

WXS是小程序独有的一套脚本语言

wxml中无法调用页面的JS中定义的函数，但可以调用WXS

一般当过滤器使用

特点

  • 性能好,在iOS设备上wxs比js快好几倍
  • 隔离性，不能调用js的函数和小程序提供的API
  • 不能作为组件的事件回调函数

WXS和JS的关系

image-20221009191604013

内嵌脚本

将文本变成大写形式

image-20221009192225170

外联脚本

将文本变成小写形式

​ 一、定义

image-20221009192628655

二、引入image-20221009192747907

  • Title: 微信小程序-页面导航
  • Author: WGenji
  • Created at : 2024-08-26 13:51:51
  • Updated at : 2024-08-26 13:51:51
  • Link: https://redefine.ohevan.com/2024/08/26/微信小程序/3.页面导航/
  • License: This work is licensed under CC BY-NC-SA 4.0.
On this page
微信小程序-页面导航
  1. 页面导航
    1. 声明式导航
    2. 编程式导航
    3. 传参和接收
  2. 下拉刷新事件
  3. 上拉触底事件
    1. loading效果
    2. 节流
  4. 自定义编译模式
  5. 生命周期
    1. 应用生命周期函数
    2. 页面生命周期函数
  6. WXS脚本
    1. 特点
    2. WXS和JS的关系
    3. 内嵌脚本
    4. 外联脚本