小程序-生命周期与WXS脚本

embedded/2024/10/22 16:28:29/

生命周期

什么是生命周期

生命周期(Life Cycle)是指一个对象从创建 -> 运行 -> 销毁的整个阶段,强调的是一个时间段。

我们可以把每个小程序运行的过程,也概括为生命周期:

  1. 小程序的启动,表示生命周期的开始
  2. 小程序的关闭,表示生命周期的结束
  3. 中间小程序运行的过程,就是小程序的生命周期

生命周期的分类

小程序中,生命周期分为两类,分别是:

  1. 应用生命周期(特指小程序从启动 -> 运行 -> 销毁的过程)
  2. 页面生命周期(特指小程序中,每个页面的加载 -> 渲染 -> 销毁的过程)

其中,页面的生命周期范围较小,应用程序的生命周期范围较大

什么是生命周期函数

生命周期函数:是由小程序框架提供的内置函数,会伴随着生命周期,自动按次序执行。

生命周期函数的作用:允许程序员在特定的时间点,执行某些特定的操作。例如,页面刚加载的时候,可以在 onLoad 生命周期函数中初始化页面的数据。

注意:生命周期强调的是时间段生命周期函数强调的是时间点

生命周期函数的分类

小程序中的生命周期函数分为两类,分别是:

  1. 应用的生命周期函数(特指小程序从启动 -> 运行 -> 销毁期间依次调用的那些函数)
  2. 页面的生命周期函数(特指小程序中,每个页面从加载 -> 渲染 -> 销毁期间依次调用的那些函数)

1.应用的生命周期函数

小程序的应用生命周期函数需要在 app.js 中进行声明,示例代码如下:

// app.js

App({

  /**

   * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)

   */

  onLaunch: function () {

    console.log('onLaunch')

  },

  /**

   * 当小程序启动,或从后台进入前台显示,会触发 onShow

   */

  onShow: function (options) {

    

  },

  /**

   * 当小程序从前台进入后台,会触发 onHide

   */

  onHide: function () {

    

  },

  /**

   * 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息

   */

  onError: function (msg) {

    

  }

})


 

控制台输出: 

2.页面的生命周期函数

小程序的页面生命周期函数需要在页面的 .js 文件中进行声明,示例代码如下:

// pages/info/info.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad(options) {

    console.log(options)

  },

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady() {

  },

  goBack(){

    wx.navigateBack()

  },

  /**

   * 生命周期函数--监听页面显示

   */

  onShow() {

  },

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide() {

  },

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload() {

  },

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh() {

  },

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom() {

  },

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage() {

  }

})

WXS 脚本

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

wxs 的应用场景

wxml 中无法调用在页面的 .js 中定义的函数,但是,wxml 中可以调用 wxs 中定义的函数。因此,小程序中 wxs 的典型应用场景就是“过滤器”。

wxs 和 JavaScript 的关系*

虽然 wxs 的语法类似于 JavaScript,但是 wxs 和 JavaScript 是完全不同的两种语言:

wxs 有自己的数据类型

number 数值类型、string 字符串类型、boolean 布尔类型、object 对象类型、function 函数类型、array 数组类型、date 日期类型、regexp 正则

wxs 不支持类似于 ES6 及以上的语法形式

  1. 不支持:let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc...  
  2. 支持:var 定义变量、普通 function 函数等类似于 ES5 的语法

wxs 遵循 CommonJS 规范

  1. module 对象
  2.  require() 函数  
  3. module.exports 对象

基础语法

1. 内嵌 wxs 脚本

wxs 代码可以编写在 wxml 文件中的 <wxs> 标签内,就像 Javascript 代码可以编写在 html 文件中的 <script> 标签内一样。

wxml 文件中的每个 <wxs></wxs> 标签,必须提供 module 属性,用来指定当前 wxs 的模块名称,方便在 wxml 中访问模块中的成员:

2. 定义外联的 wxs 脚本

wxs 代码还可以编写在以 .wxs 为后缀名的文件内,就像 javascript 代码可以编写在以 .js 为后缀名的文件中一样。示例代码如下:

3. 使用外联的 wxs 脚本

在 wxml 中引入外联的 wxs 脚本时,必须为 <wxs> 标签添加 module 和 src 属性,其中:  

  1. module 用来指定模块的名称
  2.  src 用来指定要引入的脚本的路径,且必须是相对路径

示例代码如下:

WXS 的特点

1. 与 JavaScript 不同

为了降低 wxs(WeiXin Script)的学习成本, wxs 语言在设计时借大量鉴了 JavaScript 的语法。但是本质上,wxs 和 JavaScript 是完全不同的两种语言!

2. 不能作为组件的事件回调

wxs 典型的应用场景就是“过滤器”,经常配合 Mustache 语法进行使用,例如:

但是,在 wxs 中定义的函数不能作为组件的事件回调函数。例如,下面的用法是错误的:

3. 隔离性

隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的。体现在如下两方面:

  1. wxs 不能调用 js 中定义的函数
  2. wxs 不能调用小程序提供的 API

4. 性能好

  1. 在 iOS 设备上,小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍
  2. 在 android 设备上,二者的运行效率无差异


http://www.ppmy.cn/embedded/118162.html

相关文章

跨域问题、同源策略、CORS机制、Nginx解决跨域问题(AI问答,仅供参考)

跨域问题 跨域问题&#xff0c;请介绍一下 跨域问题通常是指在浏览器中由于同源策略&#xff08;Same-origin policy&#xff09;的限制而引起的问题。同源策略是Web安全的一个基本概念&#xff0c;它的目的是防止某个文档或脚本从一个来源加载资源时非法访问或修改另一个来源的…

GDB调试使用方法

为了详细讲解如何通过 GDB 进行调试&#xff0c;这里提供一个完整的例子&#xff0c;涵盖如何编写一个有问题的 C 程序&#xff0c;并通过 GDB 进行详细的调试操作&#xff0c;包括设置断点、查看变量、修改变量值等。 1. 编写一个示例 C 程序 首先编写一个简单的 C 程序&…

【Python】:列表使用方法! 附带教程源码

Python–列表 列表是什么 列表由一系列按特定顺序排列的元素组成。你可以创建包含字母表中所有字母、数字0~9或 所有家庭成员姓名的列表&#xff1b; 在python中使用([])来表示列表,并且使用逗号来分割其中的元素. bicycles[trek,cannondale,redline,specialized] print(bi…

uni-app vue3封装websocket,支持微信小程序

一、创建useWebSocket.js 文件 // useWebSocket.js // 获取链接的URL前缀 import {BASE_URL } from "./request";import {ref,onMounted,onBeforeUnmount } from "vue";// 假设我们使用 uni-app 的 globalData 或 Vuex 来管理用户状态 // 这里为了简单起…

循环中用sleep

echo <pre>;for ($i0;$i<10000000;$i){var_dump($i);} 没有用sleep,快速消耗cpu和内存 使用sleep后效果 echo <pre>;for ($i0;$i<10000000;$i){var_dump($i);usleep(1000);//php 暂停0.001秒} 总结&#xff1a;sleep能释放资源(cpu和内存)&#xff0c;但是运…

【Java 集合】List接口 —— ArrayList 与 LinkedList 详解

List接口继承自Collection接口&#xff0c;是单列集合的一个重要分支。 在List集合中允许出现重复的元素&#xff0c;所有的元素是以一种线性方式进行存储的&#xff0c;在程序中可以通过索引&#xff08;类似于数组中的元素角标&#xff09;来访问集合中的指定元素。另外&…

节日拜访:白酒作为节日礼物,传递节日祝福

随着节日的脚步渐近&#xff0c;人们开始忙碌地挑选礼物&#xff0c;准备拜访亲朋好友。在这个欢聚的时刻&#xff0c;选择一款合适的节日礼物显得尤为重要。而豪迈白酒&#xff08;HOMANLISM&#xff09;&#xff0c;作为一款品质且富有文化内涵的白酒&#xff0c;正逐渐成为人…

汽车出险报告接口介绍及作用

汽车出险碰撞记录报告接口是一种用于获取车辆出险碰撞记录信息的数据接口&#xff0c;它允许不同的软件系统之间交换数据&#xff0c;以实现车辆事故的快速处理和车险理赔的智能化管理。以下是关于汽车出险碰撞记录报告接口的一些详细信息和意义&#xff1a; 一、定义与功能 汽…