微信小程序 小程序生命周期、页面导航事件、WXS脚本(笔记)

文章目录 1. 页面导航1.1 声明式导航1.2 编程式导航1.3 导航传参 2. 页面事件3. 生命周期3.1 应用生命周期3.2 页面生命周期 4. WXS脚本4.1 什么是WXS4.2 WXS的应用场景4.3 WXS和JavaScript的关系4.4 WXS的基本用法4.5 WXS的注意点

1. 页面导航 1.1 声明式导航

<navigator url="/pages/index/index" open-type="navigate">navigator>

1.2 编程式导航

这两种方法很相似

跳转 tabBar 页面

wx.switchTab({
  url: "/pages/index/index",
  success() {
	console.log("我是成功的回调")
  },
  fail() {
	console.log("我是失败的回调")
  },
  complete() {
	console.log("调用成功、失败都会执行")
  }
})

跳转非 tabBar 页面

wx.navigateTo({
  url: "/pages/index/index",
  success() { },
  fail() { },
  complete() { }
})

回退导航

wx.navigateBack({
  delta: 1, // 回退的层数，最大为10，小程序中页面栈最多十层
  success() { },
  fail() { },
  complete() { }
})

1.3 导航传参

传递参数

// 不支持 tabBar 页面
url: "/pages/index/index?name=zs&gender=男"

接收参数

// onLoad：页面加载时触发
// 跳转的目标页面
onLoad(options) {
  console.log(options) // {name: "zs", gender: "男"}
}

2. 页面事件

下拉刷新

// 首先需要在全局或页面配置文件中开启下拉刷新

// 触发下拉刷新时，会触发该函数
onPullDownRefresh() {
    
}

// 手动关闭下拉刷新
wx.stopPullDownRefresh({
  success() { },
  fail() { },
  complete() { }
})

上拉触底

// 首先需要在全局或页面配置文件中配置上拉触底(触发间距)

// 页面上拉触底时，会触发该函数
onReachBottom() {

}

3. 生命周期 3.1 应用生命周期

// app.js
App({
  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch() { },
  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow(options) { },
  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide() { },
  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError(msg) { }
})

3.2 页面生命周期

// index.js
// 页面加载顺序，onLoad --> onShow --> onReady
Page({
  /**
   * 监听页面加载，只触发一次
   */
  onLoad(options) { },
  /**
   * 监听页面显示
   */
  onShow() { },
  /**
   * 监听页面初次渲染完成，只触发一次
   */
  onReady() { },
  /**
   * 监听页面隐藏
   */
  onHide() { },
  /**
   * 监听页面卸载，只触发一次
   */
  onUnload() { }
})

4. WXS脚本 4.1 什么是WXS

WXS (WeiXin Script) 是小程序独有的一套脚本语言，结合 WXML，可以构建出页面的结构

4.2 WXS的应用场景 WXML 中不乏调用在页面的 js 中定义的函数，但是 WXML 中，可以调用 WXS 中定义的函数因此，小程序中 WXS 的典型应用场景就是过滤器 4.3 WXS和JavaScript的关系 WXS 有自己的数据类型 NumberStringBooleanObjectFunctionArrayDateRegexp WXS 不支持 ES6 以上的语法形式 不支持：let、const解构赋值展开运算符箭头函数对象简写… WXS 遵循 CommonJs 规范 requireexportsmodule.exports 4.4 WXS的基本用法

内嵌 WXS

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


<wxs module="m1">
  module.exports.toUpper = function(str) {
	return str.toUpperCase()
  }
wxs>

外联 WXS

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

<wxs module="m1" src="文件路径">wxs>

// wxs 文件
module.exports.toUpper = function(str) {
	return str.toUpperCase()
}

4.5 WXS的注意点 不能作为组件的事件回调，WXS 经典的应用场景就是过滤器，配合 Mustache 语法进行使用WXS 不能调用 js 中定义的函数，不能调用小程序提供的 API在 IOS 设备上，小程序内的 WXS 会比 JavaScript 代码块 2 ~ 20 倍、android 设置上，二者的运行效率无差异