生命周期函数和wxs脚本

news/2024/7/7 9:27:09

生命周期函数和wxs脚本

  • 1. 生命周期函数
    • 1.1. 应用的生命周期函数
    • 1.2. 页面的生命周期函数
  • 2. wxs脚本
    • 2.1. wxs与JavaScript的关系
    • 2.2. wxs内嵌脚本
    • 2.3. wxs外联脚本
    • 2.4. tips

1. 生命周期函数

1.1. 应用的生命周期函数

应用的生命周期函数:指小程序从启动 -> 运行 -> 销毁期间依次调用的那些函数。
小程序的应用生命周期函数需要在 app.js 中进行声明。

// app.js
App({

  // 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
  onLaunch: function () {},

  // 当小程序启动,或从后台进入前台显示,会触发 onShow
  onShow: function (options) {},

  // 当小程序从前台进入后台,会触发 onHide
  onHide: function () {},

  // 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
  onError: function (msg) {}
})

在这里插入图片描述

在这里插入图片描述

上面这张图就是从前台进入了后台。后台进入前台反之同理。

1.2. 页面的生命周期函数

页面的生命周期函数:指小程序中,每个页面从加载 -> 渲染 -> 销毁期间依次调用的那些函数

小程序的页面生命周期函数,需要在页面中的.js文件中声明。

Page({
  
    // 监听页面加载
    onLoad(options) {},

    // 生命周期函数--监听页面初次渲染完成
    onReady() {},

    // 监听页面显示
    onShow() {},

    // 监听页面隐藏
    onHide() {},

    //监听页面卸载
    onUnload() {},
})

2. wxs脚本

WXS(WeiXin Script)是小程序独有的一套脚本语言,结合 WXML,可以构建出页面的结构。
wxml 中无法调用在页面的 .js 中定义的函数,但是,wxml 中可以调用 wxs 中定义的函数。因此,小程序中 wxs 的典型应用场景就是“过滤器”。

2.1. wxs与JavaScript的关系

虽然 wxs 的语法类似于 JavaScript,但是 wxs 和 JavaScript 是完全不同的两种语言:

  1. wxs 有自己的数据类型
    number 数值类型、string 字符串类型、boolean 布尔类型、
    object 对象类型、 function 函数类型、array 数组类型、
    date 日期类型、 regexp 正则
  1. wxs 不支持类似于 ES6 及以上的语法形式
    不支持:
    let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc…
    支持:
    var 定义变量、普通 function 函数等类似于 ES5 的语法
  1. wxs 遵循 CommonJS 规范 module 对象 require() 函数 module.exports 对象

2.2. wxs内嵌脚本

wxs 代码可以编写在 wxml 文件中的 标签内,就像 Javascript 代码可以编写在 html 文件中的

<view>{{m1.toUpper(username)}}</view>

<wxs module="m1">
  // 将文本转换为大写
  module.export.toUpper = function(str){
     return str.toUpperCase()
  }
</wxs>

在这里插入图片描述

2.3. wxs外联脚本

wxs 代码还可以编写在以 .wxs 为后缀名的文件内,就像 javascript 代码可以编写在以 .js 为后缀名的文件中一样。

wxs外联脚本:tools.wxs

// tools.wxs 文件

function toLower(str){
  return str.toLowerCase()
}

module.exports = {
  toLower: toLower
}

在 wxml 中引入外联的 wxs 脚本时,必须为 标签添加 module 和 src 属性,其中: module 用来指定模块的名称 src 用来指定要引入的脚本的路径,且必须是相对路径.

wxml前台页面:

<view>{{m2.toLower(username)}}</view>

<!-- 引入外联的wxs脚本 -->
<wxs src="./tools.wxs" module="m2"></wxs>

在这里插入图片描述
在这里插入图片描述

2.4. tips

wxs 典型的应用场景就是“过滤器”,经常配合 Mustache 语法进行使用.
wxs隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的。
体现在如下两方面:wxs 不能调用 js 中定义的函数wxs 不能调用小程序提供的 API



http://lihuaxi.xjx100.cn/news/1340721.html

相关文章

使用Python select 与 selector模块处理网络并发请求

为什么选择 select技术处理并发❓ 在并发场景中&#xff0c;如果使用线程池&#xff0c;或多进程进行并发处理&#xff0c;会占用过多的系统资源。这时可以考虑采用操作系统的 select 技术来处理。 select 能监听的socket文件描述符&#xff0c;监听的socoket产生事件&#xf…

【USRP X410】LabVIEW参考架构软件,用于使用Ettus USRP X410对无线系统进行原型验证

LabVIEW参考架构软件&#xff0c;用于使用Ettus USRP X410对无线系统进行原型验证 设备 1 MHz to 7.2 GHz&#xff0c;400 MHz带宽&#xff0c;GPS驯服OCXO&#xff0c;USRP软件无线电设备 - Ettus USRP X410集成硬件和软件&#xff0c;可帮助您制作高性能无线系统的原型&…

VUE之基本部署及VScode常用插件

参考资料&#xff1a; 参考视频 VScode常用插件清单 node.js官网 node.js官网中文版 VUE官方文档 VScode常用插件&#xff1a; VScode常用插件详解见上述连接&#xff0c;插件列表如下&#xff1a; VScode的注释/取消注释快捷键为&#xff1a;Ctrl/ VUE的基本安装部署--…

小程序:如何判断机型

在小程序中&#xff0c;可以通过 wx.getSystemInfoSync() 方法获取当前设备的系统信息&#xff0c;包括机型、操作系统版本等。其中&#xff0c;通过系统信息中的 model 字段可以获取到当前设备的机型信息。 // 获取系统信息 const systemInfo wx.getSystemInfoSync();// 获取…

深圳交易所证券交易规则

目录 一、交易市场 1.深交所可交易证券 1&#xff09;股票 2&#xff09;存托凭证 3&#xff09;基金 4&#xff09;权证 5&#xff09;经证监会批准的其他交易品种 2.交易参与人 3.交易时间 二、证券买卖 1.委托 1&#xff09;投资者要求 2&#xff09;委托方式 …

移动端声明及meta标签设置

移动端meta标签设置 1.设置当前html文件的字符编码 <meta charset"UTF-8"> 2设置浏览器的兼容模式&#xff08;让IE使用最新的浏览器渲染&#xff09; <meta http-equiv"X-UA-Compatible" content"IEedge"/> 3.视口&#xff08;快…

MySQL数据库——索引练习

一、练习题目 1、建立一个utf8编码的数据库test1 2、建立商品表goods和栏目表category&#xff08;要求&#xff1a;按如下表结构创建表&#xff0c;并且存储引擎engine myisam 字符集charset utf8&#xff09; 3、删除 goods 表中的 goods_desc 字段及货号字段,并增加 click…

找工作前,是否要去培训班进行学习呢?

在学习IT技术的过程中&#xff0c;你是否也被安利过各种五花八门的技术培训班&#xff1f;这些培训班都是怎样向你宣传的&#xff0c;你又对此抱有着怎样的态度呢&#xff1f;在培训班里学技术&#xff0c;真的有用吗&#xff1f; 一、引入话题 一年又一年的毕业季有来临了&am…