小程序-生命周期与WXS脚本
生命周期
什么是生命周期
生命周期（Life Cycle）是指一个对象从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。
我们可以把每个小程序运行的过程，也概括为生命周期：
- 小程序的启动，表示生命周期的开始
- 小程序的关闭，表示生命周期的结束
- 中间小程序运行的过程，就是小程序的生命周期
生命周期的分类
在小程序中，生命周期分为两类，分别是：
- 应用生命周期（特指小程序从启动 -> 运行 -> 销毁的过程）
- 页面生命周期（特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程）
其中，页面的生命周期范围较小，应用程序的生命周期范围较大
什么是生命周期函数
生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。
生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。例如，页面刚加载的时候，可以在 onLoad 生命周期函数中初始化页面的数据。
注意：生命周期强调的是时间段，生命周期函数强调的是时间点。
生命周期函数的分类
小程序中的生命周期函数分为两类，分别是：
- 应用的生命周期函数（特指小程序从启动 -> 运行 -> 销毁期间依次调用的那些函数）
- 页面的生命周期函数（特指小程序中，每个页面从加载 -> 渲染 -> 销毁期间依次调用的那些函数）
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 及以上的语法形式
- 不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc...
- 支持：var 定义变量、普通 function 函数等类似于 ES5 的语法
wxs 遵循 CommonJS 规范
- module 对象
- require() 函数
- 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 属性，其中：
- module 用来指定模块的名称
- src 用来指定要引入的脚本的路径，且必须是相对路径
示例代码如下：
WXS 的特点
1. 与 JavaScript 不同
为了降低 wxs（WeiXin Script）的学习成本， wxs 语言在设计时借大量鉴了 JavaScript 的语法。但是本质上，wxs 和 JavaScript 是完全不同的两种语言！
2. 不能作为组件的事件回调
wxs 典型的应用场景就是“过滤器”，经常配合 Mustache 语法进行使用，例如：
但是，在 wxs 中定义的函数不能作为组件的事件回调函数。例如，下面的用法是错误的：
3. 隔离性
隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的。体现在如下两方面：
- wxs 不能调用 js 中定义的函数
- wxs 不能调用小程序提供的 API
4. 性能好
- 在 iOS 设备上，小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍
- 在 android 设备上，二者的运行效率无差异
相关文章：
小程序-生命周期与WXS脚本
生命周期 什么是生命周期 生命周期（Life Cycle）是指一个对象从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。 我们可以把每个小程序运行的过程，也概括为生命周期： 小程序的启动，表示生命…...
828华为云征文 | 云服务器Flexus X实例，Docker集成搭建FC-web模拟器
828华为云征文 | 云服务器Flexus X实例，Docker集成搭建FC-web模拟器 华为云端口放行 服务器放行对应端口9995 Docker安装并配置镜像加速 1、购买华为云 Flexus X 实例 Flexus云服务器X实例-华为云 (huaweicloud.com) 2、docker安装 yum install -y docker-ce3、验证…...
_RET_IP_ 和_THIS_IP_ 作用
在Linux内核中,有两个罕见的宏定义_RET_IP_ 和_THIS_IP_。但是这两个宏在内核代码中又时不时的出现，那么它们到底是什么含义呢? 1、宏定义 我们先看它们的宏定义 include./linux/kernel.h#define _RET_IP_ (unsigned long)__builtin_return_address(0)#define …...
Spring Boot 点餐系统：高效餐饮服务
第二章关键技术的研究 2.1相关技术 网上点餐系统是在Java MySQL开发环境的基础上开发的。Java是一种服务器端脚本语言，易于学习，实用且面向用户。全球超过35％的Java驱动的互联网站点使用Java。MySQL是一个数据库管理系统，因为它的…...
RtspServer:轻量级RTSP服务器和推流器
文章目录 项目概述技术分析支持的编码格式传输方式心跳检测机制RTSP 推流安全性 架构分析RtspServer 整体架构流程分析1. 客户端连接和会话建立2. 媒体数据传输3. 心跳检测和连接维护 xop 基础库项目介绍功能特性xop 整体架构 应用场景社区问题收集与解答问题一：刚开…...
为什么结构化 Prompt 如此有效？
你好，我是三桥君 在今年，我研究了结构化编写Prompt的方法，并观察到这种结构化、模板化的Prompt能够有效地突破ChatGPT 3.5的限制，实现所谓的“越狱”。然而，为什么ChatGPT会对这种结构化Prompt如此有效呢？…...
无人机飞手培训校企合作特训技术详解
随着无人机技术的飞速发展，其在航拍、农业、测绘、救援等多个领域的应用日益广泛，市场对高素质无人机飞手的需求急剧增加。为满足这一需求，促进教育与产业深度融合，无人机飞手培训校企合作模式应运而生。本文将从确定合作目标、共…...
从零开始的软件开发详解：数字药店系统源码与医保购药APP
很多小伙伴们疑问，医保购药APP是如何开发的，今天我将从零数字药店系统源码开始为大家提供一条清晰的实现方案。 一、技术架构设计 在开发医保购药APP之前，首先需要明确技术架构。一般来说，APP的技术架构可以分为前端和后端。 1…...
【记录】在返回值类型为BigDecimal情况下末尾小数位为0的会省略不显示
【问题】：在返回值类型为BigDecimal情况下末尾小数位为0的会省略不显示 问题复现： 实体类 package com.zlp.aspect.entity;import java.math.BigDecimal;/*** program: my_utils* description:* author: zlp* create: 2024-09-24 10:01**/public clas…...
通信工程高级职称评审条件详细解读
通信工程只有正高和副高级别的职称，中级通信工程的职称是需要自己参加考试的，并不是评审获得，这个大家需要注意一下，先要考取中级通信工程师之后才能评审副高和正高级通信工程的职称。 下面跟甘建二一起来看看通信专业职称评审条件…...
yolov8环境安装
yolov8 git地址 https://github.com/ultralytics/ultralytics/tree/main 我的电脑显卡配置 nvidia-smi cuda11.8下载 https://developer.nvidia.com/cuda-11-8-0-download-archive?target_osWindows&target_archx86_64&target_version10&target_typeexe_local …...
C语言中易混淆概念的关键字
最快的关键字---- register register： 这个关键字请求编译器尽可能的将变量存在 CPU 内部寄存器中而不是通过内 存寻址访问以提高效率。注意是尽可能，不是绝对。你想想，一个 CPU 的寄存器也就那么 几个或几十个，你要是定义了很多很…...
网络资源模板--Android Studio 零食工坊（商城）
目录 一、项目演示 二、项目测试环境 三、项目详情 四、完整的项目源码 一、项目演示 网络资源模板--零食工坊 二、项目测试环境 三、项目详情 1. **加载 Fragment 布局**： - 使用 inflater.inflate 加载 fragment_snack 的布局。 2. **视图组件初始化**&am…...
百度高德坐标系相互转换
一、百度与高德坐标系互换 百度坐标系：bd09 高德坐标系： gcj02 import math# 坐标系转换：百度转高德，高德转百度 class CoordinateSystem:staticmethoddef bd09_to_gcj02(bd_lon, bd_lat):百度坐标系:bd09 转成高德坐标系 gcj0…...
免费下载6组简历模板，让HR一眼相中你！
简历是求职者向招聘单位展示自我的重要工具，选择一份高质量的简历模板免费下载，能够提升面试机会并留下深刻印象。优秀的简历模板需具备清晰的信息结构、出色的视觉效果及合理的排版布局。简历的配色可以凸显求职者的个性，而有逻辑性的排版则…...
设计模式之模版方法模式
定义 定义一个操作中的算法的骨架（稳定），而将一些步骤延迟（变化）到子类中。模版方法使得子类可以不改变（复用）一个算法的结构即可重定义（override 重写）该算法的某些特定…...
解析！文档扫描 SDK 中的高级图像处理技术
随着世界数字化，文档扫描已成为现代商业运营的关键，它使文档的存储、访问和管理更加便捷。然而，扫描图像的质量对于这些数字档案的有效性至关重要。高质量的扫描可确保文本清晰、数据准确捕获并且信息易于检索。 另一方面，质量差…...
线性判别分析（LDA）中求协方差矩阵示例
让我们通过一个简单的例子计算协方差矩阵。假设我们有两类数据集 X 0 X_0 X0 和 X 1 X_1 X1，每类有两个样本，每个样本有两个特征。 数据集： 类 0 的样本： X 0 [ 1 2 2 3 ] X_0 \begin{bmatrix} 1 & 2 \\ 2 & 3…...
Maven的详细解读和配置
目录 一、Maven 1.1 引言 1.2 介绍 1.3 下载安装 1.3.1 解压 1.3.2 配置环境变量 1.3.3 测试 1.4 仓库[了解] 1.5 Maven配置 1.5.1 修改仓库位置 1.5.2 设置镜像 二、IDEA - MAVEN 2.1 idea关联maven 2.2 为新项目设置 2.2 创建java项目[重点] 2.3 java项目结构…...
在vue2项目中使用dart-sass
问题描述 在vue2项目中使用dart-sass。或者将node-sass换成dart-sass，原因是node-sass安装比较困难，很多时候sass-loader无法安装成功。另外在win和Linux环境下运行行项目需要针对Linux搞一个node-sass的Linux版本。 问题分析 在 Vue 2 项目中使用 da…...
YimMenu：GTA V终极游戏增强工具完整实战手册
YimMenu：GTA V终极游戏增强工具完整实战手册 【免费下载链接】YimMenu YimMenu, a GTA V menu protecting against a wide ranges of the public crashes and improving the overall experience. 项目地址: https://gitcode.com/GitHub_Trending/yi/YimMenu …...
Java 大厂面试 200 题完整版含答案解析
前言本文整理了近两年从阿里、腾讯、字节、美团、京东、拼多多等大厂面试中高频出现的 200 道 Java 面试题，覆盖 Java 基础、集合、并发、JVM、Spring、MySQL、Redis、消息队列、分布式、场景设计 等核心模块，每题都附有简明扼要的答案解析，助…...
技能工程化框架：从标准化定义到编排实战
1. 项目概述：从“技能”到“智能”的工程化桥梁在当今的软件开发领域，尤其是涉及复杂交互和自动化流程的场景，我们常常会听到“技能”这个词。它听起来很抽象，但如果你拆解过任何一款智能助手、自动化机器人或者一个大型的业务流程…...
低多边形≠简陋！掌握这7个结构化Prompt技巧，3分钟产出可商用IP形象（附Figma网格对齐校验表）
更多请点击： https://intelliparadigm.com 第一章：低多边形设计的认知革命：从“简陋感”到“结构化美学” 低多边形（Low-Poly）设计曾长期被误读为建模能力不足的妥协产物，但其本质是一场对数字视觉语法的系…...
解密VideoDownloadHelper：开源浏览器插件的智能视频提取技术
解密VideoDownloadHelper：开源浏览器插件的智能视频提取技术 【免费下载链接】VideoDownloadHelper Chrome Extension to Help Download Video for Some Video Sites. 项目地址: https://gitcode.com/gh_mirrors/vi/VideoDownloadHelper 当你在浏览微博、秒拍…...
Arm Iris调试接口：架构设计与工程实践详解
1. Iris调试与追踪接口深度解析调试与追踪技术是嵌入式系统开发的核心支柱，而Arm的Iris接口代表了这一领域的最新进展。作为一名长期从事嵌入式调试工具开发的工程师，我将带您深入剖析这套接口的设计哲学与实战应用。1.1 接口架构设计理念Iris的架构设计…...
基于Stable Diffusion与LoRA技术打造个人AI头像：从原理到实战
1. 项目概述：当AI开始“自拍”——SelfyAI的定位与核心价值最近在AI图像生成领域，一个名为SelfyAI的项目引起了我的注意。它不是一个简单的文生图工具，而是瞄准了一个非常具体且高频的需求：生成高质量、风格一致的个人AI头像。简单…...
Go语言SDK开发实战：为AI编程助手Cursor构建高效API客户端
1. 项目概述：一个为AI编程助手Cursor定制的Go语言SDK如果你和我一样，日常重度依赖Cursor这类AI编程助手来提升开发效率，同时又是个Go语言的忠实拥趸，那你肯定遇到过这样的场景：想用Go写个脚本，自动化处理一…...
Nixtla时间序列预测生态：从统计模型到深度学习的统一实践
1. 项目概述：时间序列预测的“瑞士军刀”如果你正在处理时间序列数据，无论是销售预测、服务器监控、还是能源消耗分析，那么你很可能听说过或正在使用一些经典的库，比如statsmodels、prophet，或者更现代的深度学习框架。…...
大语言模型与多模态生成融合：架构、工具与实践指南
1. 项目概述：当大语言模型遇见多模态生成最近两年，AI领域最激动人心的进展，莫过于大语言模型（LLMs）和多模态生成模型的“双向奔赴”。前者以ChatGPT、GPT-4为代表，展现了惊人的语言理解、推理和生成能力&am…...