小程序-生命周期与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…...
iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘
美国西海岸的夏天，再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至，这不仅是开发者的盛宴，更是全球数亿苹果用户翘首以盼的科技春晚。今年，苹果依旧为我们带来了全家桶式的系统更新，包括 iOS 26、iPadOS 26…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档：Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后，会在本地和远程创建数据库： npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库： 现在，您的Cloudfla…...
NFT模式：数字资产确权与链游经济系统构建
NFT模式：数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新：构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议：基于LayerZero协议实现以太坊、Solana等公链资产互通，通过零知…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域，高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表，以及基于它们实现的 Reactor 模式，为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
网络编程（UDP编程）
思维导图 UDP基础编程（单播） 1.流程图 服务器：短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型（LLM）参数规模的增长，推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长，而KV缓存的内存消耗可能高达数十GB（例如Llama2-7B处理100K token时需50GB内存&a…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
无人机侦测与反制技术的进展与应用
国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机（无人驾驶飞行器，UAV）技术的快速发展，其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统，无人机的“黑飞”&…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时，性能会显著下降。以下是优化思路和简易实现方法： 一、核心优化思路 减少 JOIN 数量 数据冗余：添加必要的冗余字段（如订单表直接存储用户名）合并表：将频繁关联的小表合并成…...