微信小程序Day3笔记

1、页面导航

1. 什么是页面导航

页面导航指的是页面之间的相互跳转。例如:浏览器中实现页面导航的方式有如下两种:

2. 小程序中实现页面导航的两种方式:

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

    • 声明式导航到tabBar页面:在使用组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性,其中:url属性表示要跳转的页面的地址,必须以 / 开头;open-type表示跳转的方式,必须为switchTab。例如:导航到home页面
    • 导航到非tabBar页面(没有被配置为tabBar的页面):在使用组件跳转到指定的非tabBar页面时,需要指定url属性和open-type属性,其中:url属性表示要跳转的页面的地址,必须以 / 开头;open-type表示跳转的方式,必须为navigate。导航到非tabBar页面时,open-type属性可以省略不写。例如:导航到info页面
    • 后退导航:如果要后退到上一页面或多级页面,需要指定open-type属性和delta属性。open-type的值必须是navigateBack,表示要进行后退导航;delta的值必须是数字,表示要后退的层级。例如:返回上一页
  • 编程式导航:
    调用小程序的导航API,实现页面的跳转

    • 导航到tabBar页面:调用wx.switchTab(object)方法,其中object参数对象的属性列表如下:
    属性 类型 是否必选 说明
    url string 需要跳转的tabBar页面的路径,路径后不能带参数
    success function 接口调用成功的回调函数
    fail function 接口调用失败的回调函数
    complete function 接口调用结束的回调函数(调用成功、失败都会执行)
    
    
    gotoMessage() {
      wx.switchTab({
        url: '/pages/message/ message',
      })
    },
    
    • 跳转到非tabBar页面:调用wx.navigateTo(object)方法,object参数对象的属性列表和上表一致。
    
    gotoInfo() {
      wx.navigateTo({
        url: '/pages/info/info',
     })
    },
    
    • 后退导航:调用wx.navigateBack(object)方法,其中object参数对象的属性列表如下:
    属性 类型 是否必选 说明
    delta number 否(为默认值1时可以不写) 返回页面的页数,如果delta值大于现有页面数,则返回首页
    success function 接口调用成功的回调函数
    fail function 接口调用失败的回调函数
    complete function 接口调用结束的回调函数(调用成功、失败都会执行)
    
    gotoBack() {
      wx.navigateBack();
    },
    

3. 导航传参

  1. 声明式导航传参
    navigator组件的url属性用来指定将要跳转的页面的路径,路径的后面可以携带参数:
  • 参数和路径之间使用?分隔
  • 参数键与参数值用=连接
  • 不同参数用&分隔
    跳转到info页面
  1. 编程式导航传参
    调用wx.navigateTo(object)方法跳转页面时,也可以携带参数。示例如下:

goInfo() {
  wx.navigateTo({
    url: '/pages/info/info?name=ls&age=18',
  })
},
  1. 在onLoad中接收导航参数
    通过声明式导航传参或编程式导航传参所携带的参数,可以直接在onLoad事件中直接获取到。示例如下:
onLoad: function(options) {
  console.log(options); // options 就是导航传递过来的参数对象
}

2、页面事件

1. 下拉刷新

  1. 启用下拉刷新有两种方式:
  • 全局开启下拉刷新:在app.json的window节点中,将enablePullDownRefresh设置为true
  • 局部开启下拉刷新:在页面的.json配置文件中,将enablePullDownRefresh设置为true
    在实际开发中,推荐使用第2种方式,为需要的页面单独开启下拉刷新的效果。
  1. 配置下拉刷新窗口的样式
  • backgroundColor:用来配置下拉刷新窗口的背景颜色,仅支持16进制的颜色值
  • backgroundTextStyle:用来配置下拉刷新loading的样式,仅支持dark和light
  1. 监听页面的下拉刷新事件
    在页面的.js文件中,通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件。
  2. 停止页面下拉刷新的效果
    当处理完下拉刷新后,下拉刷新的loading效果会一直显示,不会主动消失,需要手动停止,调用wx.stopPullDownRefresh()可以停止当前页面的下拉刷新。

2. 上拉触底

  1. 监听页面的上拉触底事件
    在页面的.js文件中,通过onReachBottom()函数即可监听当前页面的上拉触底事件。
  2. 配置上拉触底距离
    上拉触底距离,就是触发上拉触底事件时,滚动条距离页面底部的距离。
    可以在全局或页面的.json配置文件中,通过onReachBottomDistance属性来配置上拉触底的距离。
    默认是50px,实际开发中,可以根据需求修改这个值。
  3. 对上拉触底进行节流处理
  • 在data中定义isLoading节流阀:true 正在进行数据请求,false 当前没有进行任何数据请求
  • 在getColor()方法中修改isLoading节流阀的值:刚调用 设置为 true,在网络请求的complete中 重置为 false
  • 在onReachBottom中判断节流阀的值,从而对数据请求进行节流控制:true 阻止当前请求,false 可以发起数据请求

3、生命周期

1. 生命周期的分类

  1. 应用生命周期:小程序从启动 -> 运行 -> 销毁的过程,范围比较大
  2. 页面生命周期:小程序中,每个页面的加载 -> 渲染 -> 销毁的过程,范围较小

2. 生命周期函数

  1. 自动按次序执行。
    生命周期函数的作用:允许程序员在特定的时间点,执行某些特定的操作。
    生命周期强调的是时间段,生命周期函数强调的是时间点。
  2. 分类:应用的生命周期函数、页面的生命周期函数

3. 应用的生命周期函数

  1. 应用生命周期函数需要在app.js中进行声明:
    onLaunch 小程序初始化完成时 执行此函数 全局只触发一次 可以做一些初始化的工作, onShow 小程序启动或从后台进入前台显示时触发, onHide 小程序从前台进入后台时触发
  2. 页面生命周期函数在页面的.js文件中进行声明:
    onLoad 监听页面加载 一个页面只调用一次, onShow 监听页面显示, onReady 监听页面初次渲染完成 可以修改页面的样式 一个页面只调用一次, onHide 监听页面隐藏, onUnload 监听页面卸载 一个页面只调用一次

4. WXS脚本

1. 什么是WXS

WXS是小程序独有的一套脚本语言,结合WXML,可以构建出页面的结构。
WXML中无法调用在页面的.js中定义的函数,但是可以调用WXS中定义的函数。因此,小程序WXS的典型应用场景就是过滤器。

2. WXS和JavaScript的关系

  1. WXS有自己的数据类型:number 数值类型、string 字符串类型、 Boolean 布尔类型、 object 对象类型、 function 函数类型、 array 数组类型、date 日期类型、 regexp 正则
  2. WXS不支持类似于ES6以及以上的语法形式
  • 不支持:let,const,解构赋值,展开运算符,箭头函数,对象属性简写
  • 支持:var定义变量,普通function函数类似于ES5的语法
  1. WXS遵循CommonJS规范:module对象,require()函数,module.exports对象

3. 基础语法

  1. 内嵌WXS脚本
    WXS代码可以编写在WXML文件中的标签内,就像JavaScript可以写在HTML中的

你可能感兴趣的:(微信小程序,笔记,小程序,前端)