微信小程序Day3笔记

1、页面导航

1. 什么是页面导航

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

• <a>链接
• location.href

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

• 声明式导航：

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

  • 声明式导航到tabBar页面：在使用<navigator>组件跳转到指定的tabBar页面时，需要指定url属性和open-type属性，其中：url属性表示要跳转的页面的地址，必须以 / 开头；open-type表示跳转的方式，必须为switchTab。例如：<navigator url="/pages/home/home" open-type="switchTab">导航到home页面</navigator>
  • 导航到非tabBar页面（没有被配置为tabBar的页面）：在使用<navigator>组件跳转到指定的非tabBar页面时，需要指定url属性和open-type属性，其中：url属性表示要跳转的页面的地址，必须以 / 开头；open-type表示跳转的方式，必须为navigate。导航到非tabBar页面时，open-type属性可以省略不写 。例如：<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>
  • 后退导航：如果要后退到上一页面或多级页面，需要指定open-type属性和delta属性。open-type的值必须是navigateBack，表示要进行后退导航；delta的值必须是数字，表示要后退的层级。例如：<navigator open-type="navigateBack" delta="1">返回上一页</navigator>

• 编程式导航：

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

  • 导航到tabBar页面：调用wx.switchTab(object)方法，其中object参数对象的属性列表如下：

  属性	类型	是否必选	说明
  url	string	是	需要跳转的tabBar页面的路径，路径后不能带参数
  success	function	否	接口调用成功的回调函数
  fail	function	否	接口调用失败的回调函数
  complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

  <button bindtap="gotoMessage">跳转到消息页面</button>
  
  gotoMessage() {
    wx.switchTab({
      url: '/pages/message/ message',
    })
  },
  

  • 跳转到非tabBar页面：调用wx.navigateTo(object)方法，object参数对象的属性列表和上表一致。

    <button bindtap="gotoInfo">跳转到info页面</button>
    gotoInfo() {
    wx.navigateTo({
    url: '/pages/info/info',
    })
    },

  • 后退导航：调用wx.navigateBack(object)方法，其中object参数对象的属性列表如下：

  属性	类型	是否必选	说明
  delta	number	否（为默认值1时可以不写）	返回页面的页数，如果delta值大于现有页面数，则返回首页
  success	function	否	接口调用成功的回调函数
  fail	function	否	接口调用失败的回调函数
  complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

  <button bindtap="gotoBack">退回到上一个页面</button>
  gotoBack() {
    wx.navigateBack();
  },
  

3. 导航传参

1. 声明式导航传参
   navigator组件的url属性用来指定将要跳转的页面的路径，路径的后面可以携带参数：

• 参数和路径之间使用？分隔
• 参数键与参数值用=连接
• 不同参数用&分隔
  <navigator url="/pages/info/info?name=zs&age=20" open-type="navigate">跳转到info页面</navigator>

2. 编程式导航传参
   调用wx.navigateTo(object)方法跳转页面时，也可以携带参数。示例如下：

   <button bindtap="goInfo">跳转到info页面</button>
   goInfo() {
   wx.navigateTo({
   url: '/pages/info/info?name=ls&age=18',
   })
   },

3. 在onLoad中接收导航参数
   通过声明式导航传参或编程式导航传参所携带的参数，可以直接在onLoad事件中直接获取到。示例如下：

   onLoad: function(options) {
   console.log(options); // options 就是导航传递过来的参数对象
   }

2、页面事件

1. 下拉刷新

1. 启用下拉刷新有两种方式：

• 全局开启下拉刷新：在app.json的window节点中，将enablePullDownRefresh设置为true
• 局部开启下拉刷新：在页面的.json配置文件中，将enablePullDownRefresh设置为true
  在实际开发中，推荐使用第2种方式，为需要的页面单独开启下拉刷新的效果。

2. 配置下拉刷新窗口的样式

• backgroundColor：用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值
• backgroundTextStyle：用来配置下拉刷新loading的样式，仅支持dark和light

3. 监听页面的下拉刷新事件
   在页面的.js文件中，通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件。
4. 停止页面下拉刷新的效果
   当处理完下拉刷新后，下拉刷新的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的语法

3. WXS遵循CommonJS规范：module对象，require（）函数，module.exports对象

3. 基础语法

1. 内嵌WXS脚本
   WXS代码可以编写在WXML文件中的<wxs>标签内，就像JavaScript可以写在HTML中的<script>标签内一样。
   WXML文件中的每个<wxs></wxs>标签，必须提供module属性，来指定当前WXS的模块名称，方便在WXML中访问模块中的成员：

   <view>{{m1.toUpper(username)}}</view>

   <wxs module="m1"> // 将文本转为大写形式， zs -> ZS module.exports.toUpper = function(str) { return str.toUpperCase() } </wxs>

2. 定义外联的WXS脚本
   可以写在以.wxs为后缀名的文件内。

   // tools.wxs 文件
   function toLower(str) {
   return str.toLowerCase();
   }

   module.exports = {
   toLower: toLower
   }

3. 使用外联的WXS脚本
   在WXML中引入外联的WXS脚本时，必须为<wxs>标签添加module和src属性。

• module用来指定模块的名称

• src用来指定要引入的脚本的路径，必须是相对路径

  <view>{{m2.toLower(country)}}</view>
  <wxs src="../../utils/tools.wxs" module="m2"></wxs>

4. WXS的特点

1. 与JavaScript不同
2. 不能作为组件的事件回调
   WXS典型的应用场景就是过滤器，配合{{}}使用，例如：
   <view>{``{m2.toLower(country)}}</view>
   在WXS中定义的函数不能作为组件的事件回调函数。比如：<button bindtap="m2.toLower"></button>的用法是错误的。
3. 隔离性：WXS的运行环境和其他JavaScript代码是隔离的。

• WXS不能调用js定义的函数。
• WXS不能调用小程序提供的API。

4. 性能好

• 在iOS设备上，小程序内的WXS比JavaScript代码快2-20倍
• 在Android设备，二者的运行效率无差异