生命周期函数和wxs脚本

生命周期函数和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 () {},// 当小程序启动,或从后台进入前台显示,会触发 onShowonShow: function (options) {},// 当小程序从前台进入后台,会触发 onHideonHide: 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://www.hqwc.cn/news/21297.html

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

相关文章

Hadoop 单机部署和测试(一)

Hadoop单机部署和测试 一.单机部署1.安装 JDK&#xff08;JDK11&#xff09;2.安装 HADOOP3.测试 一.单机部署 系统版本&#xff1a;cat /etc/anolis-release1.安装 JDK&#xff08;JDK11&#xff09; #!/bin/bashTOP_PATH$(pwd) JAVA_PATH/usr/local/java FILEls $TOP_PATH/…

mysql索引的简单使用

删除 goods 表中的 goods_desc 字段及货号字段,并增加 click_count 字段 在 goods_name 列上加唯一性索引&#xff08;用alter table方式&#xff09; alter table add unique index uniqididx(goods_name);去查看索引 发现有goods_name的唯一索引 在 shop_price 列上加普通…

Java中Map使用增强for循环和迭代器获取key和value

加油&#xff0c;新时代打工人&#xff01; java中List集合三种获取集合元素方式 本文运行代码使用 jdk1.8 for 语句比较简单&#xff0c;用于循环数据。 Java迭代器&#xff08;Iterator&#xff09;是 Java 集合框架中的一种机制&#xff0c;是一种用于遍历集合&#xff08…

mac桌面时钟 浮动 (python)

浮动时钟&#xff0c;多地时区 app store的都要钱&#xff0c;于是。。。。我们让chatgpt来实现一个吧&#xff1a; 数字&#xff1a; 代码&#xff1a; import sys import datetime import pytzfrom PyQt5.QtWidgets import QApplication, QMainWindow, QGraphicsView, QGr…

MySQL为什么要使用B+树做索引?MySQL索引存储模型推演,B+树在MySQL的落地形式

文章目录 一、什么是索引1、索引初体验2、索引图解3、索引类型 二、索引存储模型推演1、二分查找2、二叉查找树&#xff08;BST Binary Search Tree&#xff09;3、平衡二叉树&#xff08;AVL Tree&#xff09;&#xff08;左旋、右旋&#xff09;&#xff08;1&#xff09;平衡…

STL标准模板库 set容器

文章目录 迭代器迭代器的五大分类迭代器系列帮手函数一览 set容器打印任意 STL 容器的printer.hset与vectorset 和 vector 的区别set 和 vector 迭代器的共同点set 和 vector 迭代器的不同点 set 的排序set 的排序&#xff1a;string 会按“字典序”来排set 的排序&#xff1a;…

云计算UPS监控,怎么办?

在大型数据机房中&#xff0c;UPS系统扮演着关键的角色&#xff0c;为计算机和网络设备提供可靠的电力备份。由于数据机房的规模庞大且关键性强&#xff0c;监控UPS系统的可靠性和效率至关重要。 UPS监控可以提供实时的电池状态、负载信息、电网电压等监测数据&#xff0c;并能…

代码随想录打卡

这里写目录标题 1.数组部分1.1二分查找1.2移除元素1.3 有序数组的平方1.4长度最小的子数组1.5螺旋矩阵II 2. 链表部分2.1移除链表元素2.2设计链表2.3反转链表2.4两两交换相邻的节点2.5删除链表的倒数第n个节点2.6环形链表II2.7链表相交 3.哈希表 1.数组部分 1.1二分查找 class…

我司的短信接口被刷了

如何发现的 成本分摊系统&#xff0c;将成本分摊给业务部门时&#xff0c;业务部门对账&#xff0c;发现某一类型的短信用量上涨了100多倍 排查调用来源时&#xff0c;发现来源为C端用户&#xff0c;由于调用量异常高&#xff0c;业务反馈近期无活动&#xff0c;因此怀疑被刷…

服务器数据库中了360后缀勒索病毒怎么办,如何预防勒索病毒攻击?

随着网络技术的不断发展&#xff0c;企业的计算机服务器也受到了网络安全威胁&#xff0c;近日&#xff0c;很多企业的服务器被360后缀勒索病毒攻击&#xff0c;导致企业的数据库中的许多重要数据被加密&#xff0c;无法正常读取打开。360后缀勒索病毒数据BeijingCrypt勒索病毒…

请求响应-日期时间参数的接受

日期参数 由于从前端发送的请求中&#xff0c;日期的格式可能各不相同&#xff0c;使用DateTimeFormat注解完成日期参数格式的转换具体关键代码如下&#xff1a; 在postman中发出对应请求携带对应参数结果如下&#xff1a; 参数名称要与方法中的形参名称一致&#xff0c;免得…

【Python】PyCharm中调用另一个文件的函数或类

&#x1f389;欢迎来到Python专栏~PyCharm中调用另一个文件的函数或类 ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;Python学习专栏 文章作者技术和水平有限&#xff0c;如果文中出现错误&…