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

news2024/9/27 9:21:40

生命周期

什么是生命周期

生命周期(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.coloradmin.cn/o/2164028.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java免税商品购物商城:Spring Boot实现详解

第一章 绪论 1.1 课题开发的背景 从古至今&#xff0c;通过书本获取知识信息的方式完全被互联网络信息化&#xff0c;但是免税商品优选购物商城&#xff0c;对于购物商城工作来说&#xff0c;仍然是一项非常重要的工作。尤其是免税商品优选购物商城&#xff0c;传统人工记录模式…

夹耳蓝牙耳机哪个品牌质量最好最耐用?2024年耳夹式耳机选购指南

随着科技的进步和人们对音质要求的提高&#xff0c;耳夹式耳机逐渐成为大家的耳机新宠。但是&#xff0c;面对市场上琳琅满目的耳夹式耳机品牌&#xff0c;许多人都会困惑&#xff1a;夹耳蓝牙耳机哪个品牌质量最好最耐用&#xff1f;其实&#xff0c;选对品牌不仅关系到音质的…

计算机前沿技术-人工智能算法-生成对抗网络-算法原理及应用实践

计算机前沿技术-人工智能算法-生成对抗网络-算法原理及应用实践 1. 什么是生成对抗网络&#xff1f; 生成对抗网络&#xff08;Generative Adversarial Networks&#xff0c;简称GANs&#xff09;是由Ian Goodfellow等人在2014年提出的一种深度学习模型&#xff0c;主要用于数…

OpenHarmony(鸿蒙南向)——平台驱动开发【PIN】

往期知识点记录&#xff1a; 鸿蒙&#xff08;HarmonyOS&#xff09;应用层开发&#xff08;北向&#xff09;知识点汇总 鸿蒙&#xff08;OpenHarmony&#xff09;南向开发保姆级知识点汇总~ 持续更新中…… 概述 功能简介 PIN即管脚控制器&#xff0c;用于统一管理各SoC的…

Python 在PDF中插入文本超链接和图片超链接 (详解)

目录 使用工具 Python给PDF添加网页链接 Python给PDF添加内部文件链接 Python给PDF添加外部文件链接 Python给PDF中现有文本添加超链接 Python在PDF中插入带超链接的图片 Python给PDF中现有图片添加超链接 超链接是指向特定资源&#xff08;如外部网页、文档内部位置或其…

Android个性名片界面的设计——约束布局的应用

节选自《Android应用开发项目式教程》&#xff0c;机械工业出版社&#xff0c;2024年7月出版 做最简单的安卓入门教程&#xff0c;手把手视频、代码、答疑全配齐 【任务目标】 使用约束布局、TextView控件实现一个个性名片界面的设计&#xff0c;界面如图1所示。 图1 个性名片…

跟王道学c记录

scanf int a; scanf("%d",&a); 一定要有取地址符 printf 用%f精度修饰符指定想要的小数位数。例如,%5.2f会至少显示5位数字并带有2位小 数的浮点数 用%s精度修饰符简单地表示一个最大的长度,以补充句点前的最小字段长度 printf 数的所有输出都是右对齐的,除非…

C++的哲学思想

C的哲学思想 文章目录 C的哲学思想&#x1f4a1;前言&#x1f4a1;C的哲学思想☁️C底层不应该基于任何其他语言&#xff08;汇编语言除外&#xff09;☁️只为使用的东西付费&#xff08;不需要为没有使用到的语言特性付费&#xff09;☁️以低成本提供高级抽象&#xff08;更…

exBase

1.准备工作 1.端口配置 下列为默认端口号&#xff0c;若部分端口号已被占用&#xff0c;用户可以根据实际情况进行修改。 端口号 说明 31030 exBase默认端口 31003 配置库默认端口 2181 zookeeper默认端口 9092 kafka默认端口 8091 metaNode的RPC端口 8092 node…

【Linux】进程管理:从理论到实践(一)

&#x1f308; 个人主页&#xff1a;Zfox_ &#x1f525; 系列专栏&#xff1a;Linux 目录 一&#xff1a; &#x1f525; 进程的基本概念 二&#xff1a; &#x1f525; 描述进程-PCB三&#xff1a; &#x1f525; 查看进程 &#x1f95d; 通过系统目录&#x1f95d; 通过ps命…

小程序视频编辑SDK解决方案,轻量化视频制作解决方案

面对小程序、网页、HTML5等多样化平台&#xff0c;如何轻松实现视频编辑的轻量化与高效化&#xff0c;成为了众多开发者和内容创作者共同面临的挑战。正是洞察到这一市场需求&#xff0c;美摄科技推出了其领先的小程序视频编辑SDK解决方案&#xff0c;为创意插上翅膀&#xff0…

线性代数(持续更新)

一.矩阵及其计算 1.矩阵的概念 矩阵就是一个数表 元素全是0&#xff0c;是零矩阵&#xff0c;用0来表示 当mn时&#xff0c;称为n阶矩阵&#xff08;方阵&#xff09; 只有一行的叫行矩阵&#xff0c;只有一列的叫列矩阵 只有对角线有元素的叫做对角矩阵&#xff0c;用dia…

FTP被动模式配置

FTP被动模式配置 非云服务器或未开启防火墙的服务器不需要设置 背景&#xff1a; 某些FTP客户端与FTP服务器进行数据交互时&#xff0c;客户端数据传输使用的是被动模式&#xff1b; 被动模式会导致服务端的数据通道端口随机变动&#xff0c;服务器的防火墙无法设置放行规则…

Excel数据检视——对角线连续数据连线

实例需求&#xff1a;数据表如下图所示&#xff0c;现需要根据规则&#xff0c;在符合要求的单元格上&#xff0c;添加连线。 连续单元格位于对角线方向单元格内容相同连续单元格数量不少于7个 示例代码如下。 Sub LT2RB()Dim objDic As Object, rngData As Range, bFlag As …

基于springBoot校园健康驿站管理平台(源码+教程)

互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对信息管理混乱&#xff0c;出错率高&#xff0c;信息安全性差&#xff0c;劳…

开源标注工具

DoTAT https://github.com/FXLP/MarkTool 后端代码未开放&#xff0c;可能有数据泄露风险 Chinese-Annotator https://github.com/deepwel/Chinese-Annotator 安装非常麻烦&#xff0c;github更新频率比较低&#xff0c;支持功能和doccano类似 IEPY https://github.com/ma…

头戴式蓝牙无线耳机哪个牌子比较好?头戴式蓝牙耳机排行榜盘点

在当今快节奏的生活中&#xff0c;音乐已成为我们不可或缺的精神食粮&#xff0c;而一款优秀的头戴式蓝牙无线耳机&#xff0c;不仅能为我们带来高品质的音频享受&#xff0c;还能让我们在繁忙的生活中找到片刻的宁静与放松&#xff0c;那么头戴式蓝牙无线耳机哪个牌子比较好&a…

【工具变量】数字技术应用广度与深度数据集(2001-2023年)

数据简介&#xff1a;数字技术应用广度是指企业为了实现收集、存储与处理海量数据时所需要的技术支撑&#xff0c;诸如大数据、云计算、区块链等等。数字技术应用深度包括数字化管理和数字化生产。其中&#xff0c;数字化管理是指企业应用数字技术实现组织、生产、销售和服务智…

Unreal Engine 5 C++: Asset Batch Duplication插件编写02

目录 准备工作 "Scripting library" 三个最重要的功能&#xff08;前两个是UEditorUtilityLibrary中的&#xff09; 自动创建声明&#xff1a; TArray T 的含义 F 的含义 Live Coding &#xff08;Ctrlalt F11&#xff09; Live Coding 的工作流程&#xff…

uni-app - - - - - 实现锚点定位和滚动监听功能(滚动监听功能暂未添加,待后续更新)

实现锚点定位和滚动监听功能 1. 思路解析2. 代码示例 效果截图示例&#xff1a; 点击左侧menu&#xff0c;右侧列表数据实现锚点定位 1. 思路解析 点击左侧按钮&#xff0c;更新右侧scroll-view对应的scroll-into-view的值&#xff0c;即可实现右侧锚点定位滚动右侧区域&am…