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

生命周期

什么是生命周期

生命周期(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.mzph.cn/bicheng/55193.shtml

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

相关文章

ant design vue中带勾选表格报Tree missing follow keys: ‘undefined‘解决方法

1、这里一定要给columns和data-source设置key即可。 <div><a-table:row-selection"rowSelection":dataSource"tableList":columns"columns":scroll"{ x: 100% }":pagination"false":loading"loading"&g…

C++ -- 异常

C中的异常是用于处理程序执行过程中出现的错误情况。通过异常处理&#xff0c;程序可以在遇到错误时优雅地处理这些问题&#xff0c;而不是直接崩溃。 C语言处理错误的方式 C语言传统的处理错误的方式主要有两种&#xff1a; 终止程序&#xff1a;使用如assert这样的宏来检查…

隐藏SpringBoot自动生成的文件

第一种方法——删除 第二种方法——Settings——Editor——fail types

idea 创建多模块项目

一、新建项目&#xff0c;创建父工程 新建项目&#xff0c;选择 spring initializr 填写相关信息后提交 删除不相关的目录&#xff0c;如下 修改打包方式为 pom&#xff0c;在 pom.xml 文件中新增一行&#xff0c;如下 二、创建子模块 新增子模块 三、修改 pom 文件 修…

怎样用python+sqlalchemy获得mssql视图对应物理表关系(二)

话不多说 目标:为了实现低代码数据视图对接,有必要得到视图所对应物理表及字段名称,字段类型等 1)约束:视图中用到的物理表不能起别名,所以修改上一篇中存储过程建立语句 USE [agui_conn] GO /****** Object: StoredProcedure [dbo].[sp_GetOrdersByTimestamp] Script D…

04 面部表情识别:Pytorch实现表情识别-表情数据集训练代码

总目录&#xff1a;人脸检测与表情分类 https://blog.csdn.net/whiffeyf/category_12793480.html 目录 0 相关资料1 面部表情识数据集2 模型下载3 训练 0 相关资料 面部表情识别2&#xff1a;Pytorch实现表情识别(含表情识别数据集和训练代码)&#xff1a;https://blog.csdn.n…

vscode配置Eslint后保存出现大量波浪线

解决问题&#xff1a;配置代码格式化 快捷键打开设置&#xff1a;ctrlshiftP 输入&#xff1a; format code 选择&#xff1a;

UE5 项目缓存文件删除、版本控制说明(工程目录结构)

文章目录 前言一、项目文件示例二、缓存文件删除、版本控制说明前言 我们在拷贝项目或者使用 Git 进行版本控制,如果不对文件选择性的控制,大量缓存文件会导致传输速度变慢;或者我们的项目报错了,想要删除缓存文件又不知如何下手,哪些是可删除的,哪些又是不可删除的,本…

SLA(立体光固化成型技术)

01 SLA 3D打印技术简介 SLA工艺简介 SLA是"Stereo lithography Appearance"的缩写&#xff0c;即立体光固化成型法。用特定波长与强度的激光聚焦到光固化材料表面&#xff0c;使之由点到线&#xff0c;由线到面顺序凝固&#xff0c;完成一个层面的绘图作业&#x…

OpenCV图像文件读写(4)解码图像数据函数imdecode()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 从内存缓冲区读取图像。 imdecode 函数从指定的内存缓冲区读取图像。如果缓冲区太短或包含无效数据&#xff0c;函数将返回一个空矩阵 (Mat::dat…

儿童乐园软件下载安装 佳易王游乐场会员扣次管理系统操作教程

一、前言 儿童乐园软件下载安装 佳易王游乐场会员扣次管理系统操作教程 软件为绿色免安装版&#xff0c;已经内置数据库&#xff0c;不需再安装数据库文件&#xff0c;软件解压即可。 二、软件程序教程 1、软件可同时管理多个项目&#xff0c;项目设置方法如图&#xff0c;点…

基于微信小程序爱心领养小程序设计与实现(源码+参考文档+定制开发)

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…

grafana频繁DataSourceError问题

背景 随着 Grafana 数据量的不断增加&#xff0c;逐渐暴露出以下问题&#xff1a; Grafana 页面加载缓慢&#xff1b;Grafana 告警频繁出现 DatasourceError 错误。 对于第一个问题&#xff0c;大家可以参考这篇文章&#xff1a;Grafana 加载缓慢的解决方案。 不过&#xf…

828华为云征文|华为云Flexus X实例Windows Server 2019安装护卫神防火墙——为企业运维安全发挥重要作用!!!

前言 公司最近需要选购一台华为云Windows服务器部署产品应用&#xff0c;但是考虑到Windows的安全性至关重要。护卫神防火墙无疑是守护Windows系统安全的得力助手。 华为云以其强大的性能和稳定的服务&#xff0c;为众多企业和开发者提供了可靠的云端基础设施。在网络环境日益复…

【Python报错已解决】 TypeError: ‘ellipsis‘ object is not subscriptable

引言&#xff1a; 在Python开发过程中&#xff0c;遇到报错是家常便饭。而每一种报错都像是一个谜题&#xff0c;等待着开发者去解开。今天我们就来探讨一个特定的Python报错&#xff1a;TypeError: ‘ellipsis‘ object is not subscriptable。这个报错可能会让很多开发者感到…

【高效办公】商汤办公小浣熊微信小程序:随时随地搞定数据分析

在这个数据驱动的时代&#xff0c;无论是职场新人还是经验丰富的专业人士&#xff0c;都需要处理大量的数据和报表。为了提高工作效率&#xff0c;各种智能化工具层出不穷。今天要向大家推荐一款由商汤科技研发的高效数据分析工具——“办公小浣熊”&#xff01; 一、办公小浣…

【实战篇】怎么最快地复制一张表?

背景 怎么在两张表中拷贝数据&#xff1f;如果可以控制对源表的扫描行数和加锁范围很小的话&#xff0c;我们简单地使用 insert … select 语句即可实现。 当然&#xff0c;为了避免对源表加读锁&#xff0c;更稳妥的方案是先将数据写到外部文本文件&#xff0c;然后再写回目…

物理加密机的高性能操作

物理加密机&#xff0c;也被称为硬件安全模块(HSM)或加密锁&#xff0c;是一种用于保护敏感数据和软件应用的物理设备。以下是关于物理加密机的详细介绍&#xff1a; 一、定义与功能 物理加密机通过提供强大的加密功能和访问控制&#xff0c;确保数据在存储、处理和传输过程中的…

Linux网络:网络编程套接字

socket 套接字 socket常见API 创建套接字&#xff1a;&#xff08;TCP/UDP&#xff0c;客户端服务器&#xff09; int socket(int domain, int type, int protocol);绑定端口号&#xff1a;&#xff08;TCP/UDP&#xff0c;服务器&#xff09; int listen(int sockfd, int …

椭圆距离计算的简单方法

分析发现找到点到椭圆的最近距离等价于求解一元四次方程。想象一下一个圆和一个椭圆最多相交四次。从这个观点出发,问题转化为找到与椭圆仅相交一次的圆。如果用四次方程表示,其中两个根将在交点处共享,而另外两个根将会是复数。 尽管四次方程的封闭解确实存在,但迭代方法更…