小程序-生命周期与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.rhkb.cn/news/432284.html

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

相关文章

Github 2024-09-23 开源项目周报 Top15

根据Github Trendings的统计,本周(2024-09-23统计)共有15个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目6C++项目3C项目3HTML项目2PowerShell项目1TypeScript项目1JavaScript项目1Blade项目1PHP项目1Bootstrap 5: Web上开发响应式、移动优…

Kafka 面试题

参考&#xff1a; https://javabetter.cn/interview/kafka-40.htmlhttps://javaguide.cn/high-performance/message-queue/kafka-questions-01.html Kafka 架构 名词概念 Producer&#xff08;生产者&#xff09; : 产生消息的一方。 Consumer&#xff08;消费者&#xff09; …

影刀---实现我的第一个抓取数据的机器人

你们要的csdn自动回复机器人在这里文末哦&#xff01; 这个上传的资源要vip下载&#xff0c;如果想了解影刀这个软件的话可以私聊我&#xff0c;我发你 目录 1.网页对象2.网页元素3.相似元素组4.元素操作设置下拉框复选框滚动条获取元素的信息 5.变量6.数据的表达字符串变量列…

数据库主备副本物理复制和逻辑复制对比

数据库主从节点的数据一致性是保证数据库高可用的基本要求&#xff0c;各个数据库在实现方式上也各有异同。而主备复制的方式无外乎两种&#xff1a;物理复制和逻辑复制&#xff0c;本文简要对比下两种方式的不同&#xff0c;并分析下国产数据库是如何实现的。 1、数据库复制基…

初试Bootstrap前端框架

文章目录 一、Bootstrap概述二、Bootstrap实例1、创建网页2、编写代码3、代码说明4、浏览网页&#xff0c;查看结果5、登录按钮事件处理6、浏览网页&#xff0c;查看结果 三、实战小结 一、Bootstrap概述 大家好&#xff0c;今天我们将一起学习一个非常流行的前端框架——Boot…

Redis --- redis事务和分布式事务锁

redis事务基本实现 Redis 可以通过 MULTI&#xff0c;EXEC&#xff0c;DISCARD 和 WATCH 等命令来实现事务(transaction)功能。 > MULTI OK > SET USER "Guide哥" QUEUED > GET USER QUEUED > EXEC 1) OK 2) "Guide哥"使用 MULTI命令后可以输入…

Java数据库连接jdbc

Java数据库连接jdbc 导入java包 1、根目录&#xff0c;新建一个lib目录&#xff08;Dire&#xff09; 2、将jar包放入lib目录下 3、File -> Project Structure&#xff08;项目结构&#xff09; 4、Libraries-> ->java->找到项目的lib目录 5、Apply->OK使用JD…

navicat无法连接远程mysql数据库1130报错的解决方法

出现报错&#xff1a;1130 - Host ipaddress is not allowed to connect to this MySQL serve navicat&#xff0c;当前ip不允许连接到这个MySQL服务 解决当前ip无法连接远程mysql的方法 1. 查看mysql端口&#xff0c;并在服务器安全组中放开相应入方向端口后重启服务器 sud…

二叉树的基本概念(下)

文章目录 &#x1f34a;自我介绍&#x1f34a;二叉树的分类满二叉树完全二叉树 &#x1f34a;二叉树的存储顺序存储[完全二叉树]链式存储 你的点赞评论就是对博主最大的鼓励 当然喜欢的小伙伴可以&#xff1a;点赞关注评论收藏&#xff08;一键四连&#xff09;哦~ &#x1f34…

顶点缓存对象(VBO)与顶点数组对象(VAO)

我们的顶点数组在CPU端的内存里是以数组的形式存在,想要GPU去绘制三角形,那么需要将这些数据传输给GPU。那这些数据在显存端是怎么存储的呢?VBO上场了,它代表GPU上的一段存储空间对象,表现为一个unsigned int类型的变量,GPU端内存对象的一个ID编号、地址、大小。一个VBO对…

利用探空站数据(怀俄明和IGRA)和ERA5计算ZTD、ZHD和ZWD

1.有关 Matlab 获取代码关注咸鱼获取&#xff1a; 怀俄明探空站数据解算PWV和Tm 怀俄明多线程下载探空站数据&#xff08;包括检查和下载遗漏数据的代码&#xff09; 对IGRAv2进行质量控制得到PWV和Tm的 matlab 代码 算 IGRAv2 探空站的 Tm 和 PWV 提取探空站 IGRAv2 全部数…

单片机串口AT指令操作SIM800、900拨打电话

文章目录 一、前言1.1 功能简介1.2 拨打电话功能的应用场景1.3 SIM900A与SIM800C模块介绍1.4 原理图 三、模块调试3.1 工具软件下载3.2 准备好模块3.3 串口调试助手的设置3.4 初始化配置3.5 拨打电话的测试流程 四、代码实现4.1 底层的命令发送接口4.2 底层数据接收接口4.3 检测…

基于Next.js和TailwindCss的TailwindCss

最近在研究 Next.js 和 TailwindCss &#xff0c;这两天没事的时候就搞了一个 c。 目前工具部署在 Vercel &#xff0c;欢迎各位体验&#xff08;能提出意见更好嘿嘿&#xff09; 体验地址&#xff1a; https://icon.999872.xyz/ 图片预览 &#x1f447;

MySQL Performance Schema 详解及运行时配置优化

引言 MySQL 的 Performance Schema 是一套性能监控与诊断工具&#xff0c;帮助开发者和数据库管理员收集、分析 MySQL 实例的运行状态&#xff0c;找出性能瓶颈并进行优化。通过 Performance Schema&#xff0c;我们能够监控不同的内部事件、线程、会话、语句执行等关键性能指…

LabVIEW界面输入值设为默认值

在LabVIEW中&#xff0c;将前面板上所有控件的当前输入值设为默认值&#xff0c;可以通过以下步骤实现&#xff1a; 使用控件属性节点&#xff1a;你可以创建一个属性节点来获取所有控件的引用。 右键点击控件&#xff0c;选择“创建” > “属性节点”。 设置属性节点为“D…

Pandas和Seaborn可视化详解

1.Pandas绘图-单变量 概述 pandas库是Python数据分析的核心库 它不仅可以加载和转换数据&#xff0c;还可以做更多的事情&#xff1a;它还可以可视化 pandas绘图API简单易用&#xff0c;是pandas流行的重要原因之一 可视化小技巧: 如果是类别型 柱状 饼图 (类别相对较少 5-…

灵办AI搜索引擎和文档总结工具

前言—— 在信息爆炸的时代&#xff0c;如何高效地获取和处理知识成为了每个人面临的挑战。随着人工智能技术的迅猛发展&#xff0c;本文将深入探讨这一创新工具的功能与优势&#xff0c;以及如何在日常生活和工作中充分利用它&#xff0c;开启智能化的信息获取新篇章。 点击…

金属增材制造咋突破?纳米纹理粉末如何助力金属增材制造?

大家好&#xff0c;今天我们来了解一篇金属增材制造文章——《High absorptivity nanotextured powders for additive manufacturing》发表于《Science Advances》。金属增材制造在医疗、航空航天等领域&#xff0c;它潜力巨大&#xff0c;但目前可打印的金属材料有限&#xff…

握手传输 状态机序列检测(记忆科技笔试题)_2024年9月2日

发送模块循环发送0-7&#xff0c;在每个数据传输完成后&#xff0c;间隔5个clk&#xff0c;发送下一个 插入寄存器打拍处理&#xff0c;可以在不同的时钟周期内对信号进行同步&#xff0c;从而减少亚稳态的风险。 记忆科技笔试题&#xff1a;检测出11011在下一个时钟周期输出…

PowerPoint技巧:将幻灯片里的图片背景设置为透明

在PPT中添加了图片&#xff0c;想要将图片中的背景设置为透明或者想要抠图&#xff0c;有什么方法吗&#xff1f;今天分享两个方法。 方法一&#xff1a; 添加图片&#xff0c;选中图片之后&#xff0c;点击【图片格式】功能&#xff0c;点击最左边的【删除背景】 PPT会自动帮…