微信小程序快速入门03

在这里插入图片描述

🏡浩泽学编程:个人主页

 🔥 推荐专栏:《深入浅出SpringBoot》《java项目分享》
              《RabbitMQ》《Spring》《SpringMVC》

🛸学无止境,不骄不躁,知行合一

文章目录

  • 前言
  • 一、生命周期
    • 生命周期函数
  • 二、WXS脚本
    • wxs和JavaScript的关系
    • 基础语法
    • wxs的特点
  • 总结


前言

本文讲诉:生命周期、WXS脚本。


一、生命周期

  • 生命周期(Life Cycle) 是指一个对象从创建 -> 运行 ->销的整个阶段,强调的是一个时间段。例如:

    • 张三出生,表示这个人生命周期的开始
    • 张三离世,表示这个人生命周期的结束
    • 中间张三的一生,就是张三的生命周期
  • 我们可以把每个小程序运行的过程,也概括为生命周期:

    • 小程序的启动,表示生命周期的开始
    • 小程序的关闭,表示生命周期的结束
    • 中间小程序运行的过程,就是小程序的生命周期
  • 在小程序中,生命周期分为两类,分别是

    • 应用生命周期
      • 特指小程序从启动->运行->销毁的过程
    • 页面生命周期
      • 特指小程序中,每个页面的加载->渲染->销毁的过程
    • 其中,页面的生命周期范围较小,应用程序的生命周期范围较大,如图所示:
      在这里插入图片描述

生命周期函数

  • 生命周期函数:是由小程序框架提供的内置函数,会伴随着生命周期,自动按次序执行。
  • 生命周期函数的作用:允许程序员在特定的时间点,执行某些特定的操作。例如,页面刚加载的时候,可以在onLoad 生命周期函数中初始化页面的数据。
  • 注意:生命周期强调的是时间段,生命周期函数强调的是时间点。

分类:
小程序中的生命周期函数分为两类,分别是:

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

应用的生命周期函数
在这里插入图片描述
页面的生命周期函数
在这里插入图片描述

二、WXS脚本

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

wxs和JavaScript的关系

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

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

基础语法

内嵌wxs脚本

  • wxs代码可以编写在 wxml文件中的< wxs > 标签内,就像Javascript 代码可以编写在 html文件中的< script >标签内一样。
  • wxml 文件中的每个< wxs ></ wxs> 标签,必须提供 module 属性,用来指定当前 wxs 的模块名称,方便在wxml中访问模块中的成员:
<view>{{m1.toUpper(useranme)}}</view>
<wxs module="m1">
  module.exports.toUpper = function(str) {
    return str.toUpperCase()
  }
</wxs>

定义外联的wxs脚本
wxs 代码还可以编写在以.wxs 为后缀名的文件内就像javascript 代码可以编写在以js 为后缀名的文件中一样。示例代码如下:

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

module.exports = {
  toLower: toLower
}

在这里插入图片描述
使用外联的wxs脚本

在wxml中引入外联的 wxs 脚本时,必须为 标签添加 module 和 src 属性,其中

  • module 用来指定模块的名称
  • src 用来指定要引入的脚本的路径,且必须是相对路径

示例代码如下:

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

<wxs src="../../utils/tools.wxs" module="m2">

wxs的特点

与JavaScript 不同
为了降低 wxs (WeiXin Script)的学习成本,wx 语言在设计时借大量鉴了JavaScript 的语法。但是本质上wxs和JavaScript 是完全不同的两种语言!
不能作为组件的事件回调
wxs典型的应用场景就是"过滤器"经常配合 Mustache 语法进行使用,例如:
在这里插入图片描述
但是,在 wxs 中定义的函数不能作为组件的事件回调函数。例如,下面的用法是错误的:
在这里插入图片描述
隔离性

  • 隔离性指的是wxs的运行环境和其他JavaScript代码是隔离的。体现在如下两方面:
    • wxs不能调用is中定义的函数
    • wxs不能调用小程序提供的AP

性能好

  • 在ios 设备上,小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍
  • 在 android 设备上,二者的运行效率无差异

总结

以上就是小程序快速入门讲解。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/327078.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Java数据结构】04-图(Prim,Kruskal,Dijkstra,topo)

5 图 推荐辅助理解 【视频讲解】bilibili Dijkstra Prim 【手动可视化】Algorithm Visualizer &#xff08;https://algorithm-visualizer.org/&#xff09; 【手动可视化】Data Structure Visualizations (https://www.cs.usfca.edu/~galles/visualization/Algorithms.ht…

基于k8s Deployment的弹性扩缩容及滚动发布机制详解

k8s第一个重要设计思想&#xff1a;控制器模式。k8s里第一个控制器模式的完整实现&#xff1a;Deployment。它实现了k8s一大重要功能&#xff1a;Pod的“水平扩展/收缩”&#xff08;horizontal scaling out/in&#xff09;。该功能从PaaS时代开始就是一个平台级项目必备编排能…

cookie和session的工作过程和作用:弥补http无状态的不足

cookie是客户端浏览器保存服务端数据的一种机制。当通过浏览器去访问服务端时&#xff0c;服务端可以把状态数据以key-value的形式写入到cookie中&#xff0c;存储到浏览器。浏览器下次去服务服务端时&#xff0c;就可以把这些状态数据携带给服务器端&#xff0c;服务器端可以根…

OceanBase架构概览

了解一个系统或软件&#xff0c;比较好的一种方式是了解其架构&#xff0c;下图是官网上的架构图&#xff0c;基于V 4.2.1版本 OceanBase 使用通用服务器硬件&#xff0c;依赖本地存储&#xff0c;分布式部署在多个服务器上&#xff0c;每个服务器都是对等的&#xff0c;数据库…

如何画出优秀的系统架构图-架构师系列-学习总结

--- 后之视今&#xff0c;亦犹今之视昔&#xff01; 目录 早期系统架构图 早期系统架构视图 41视图解读 41架构视图缺点 现代系统架构图的指导实践 业务架构 例子 使用场景 画图技巧 客户端架构、前端架构 例子 使用场景 画图技巧 系统架构 例子 定义 使用场…

Keepalived 双机热备

本章主要内容&#xff1a; Keepalived 双机热备基础知识学会构建双机热备系统学会构建LVSHA 高可用群集 简介 在这个高度信息化的IT时代&#xff0c;企业的生产系统&#xff0c;业务运营&#xff0c;销售和支持&#xff0c;以及日常管理等环节越来越依赖于计算机和服务&#…

class_1:qt的安装及基本使用方式

一、选择组件&#xff1a; 1、windows编译工具&#xff1a;MinGW 7.30 32-bit MinGW 7.30 64-bit 2、QT源代码&#xff1a;sources 3、QT的绘图模块&#xff1a;QT charts 4、QT虚拟键盘&#xff1a;QT Virtual Keyboard 5、QT Creational 4.12.2 GDB 二、新建QT项目 文…

【MATLAB】 HANTS滤波算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~ 1 基本定义 HANTS滤波算法是一种时间序列谐波分析方法&#xff0c;它综合了平滑和滤波两种方法&#xff0c;能够充分利用遥感图像存在时间性和空间性的特点&#xff0c;将其空间上的分布规律和时间上的变化规律联系起来…

构建 Maven 项目时可能遇到的问题

文章目录 构建 Maven 项目时可能遇到的问题1. Maven 自动下载依赖后&#xff0c;在本地仓库中找不到2. 运行时报错如下&#xff1a;Error: java 不支持发行版本 53. 创建 Maven 项目后 pom.xml 文件为空4. 在 Settings 中 Update 了阿里云远程仓库&#xff0c;导致整个项目不能…

美国智库发布《用人工智能展望网络未来》的解析

文章目录 前言一、人工智能未来可能改善网络安全的方式二、人工智能可能损害网络安全的方式三、人工智能使用的七条建议四、人工智能的应用和有效使用AI五、安全有效地使用人工智能制定具体建议六、展望网络未来的人工智能&#xff08;一&#xff09;提高防御者的效率&#xff…

数据结构学习 jz29 顺时针打印矩阵

关键词&#xff1a;模拟 题目&#xff1a;螺旋遍历二维数组 简单题做了超过40分钟 调了很久 不好 方法一&#xff1a; 我自己做的。 思路&#xff1a; xy_t&#xff1a; 记录xy的方向&#xff0c;往右走&#xff0c;往下走&#xff0c;往左走&#xff0c;往上走 t控制方…

算法第十八天-打家劫舍Ⅱ

打家劫舍Ⅱ 题目要求 解题思路 [打家劫舍Ⅱ]是说两个相邻的房间不能同时偷&#xff0c;并且首尾两个房间是相邻的&#xff08;不能同时偷首尾房间&#xff09;明显是基于[打家劫舍Ⅰ]做的升级。[打家劫舍Ⅰ]也是说两个相邻的房间不能同时偷&#xff0c;但是首尾房间不是相邻的…

Java多线程基础:虚拟线程与平台线程解析

在这篇文章中&#xff0c;主要总结一些关于线程的概念&#xff0c;以及更近期的名为虚拟线程的特性。将了解平台线程和虚拟线程在性质上的区别&#xff0c;以及它们如何促进应用程序性能的改进 经典线程背景&#xff1a; 让我们以调用外部API或某些数据库交互的场景为例&…

JVM篇--Java内存区域高频面试题

java内存区域 1 Java 堆空间及 GC&#xff1f; 首先我们要知道java堆空间的产生过程&#xff1a; 即当通过java命令启动java进程的时候&#xff0c;就会为它分配内存&#xff0c;而分配内存的一部分就会用于创建堆空间&#xff0c;而当程序中创建对象的时候 就会从堆空间来分…

918. 环形子数组的最大和

参考题解&#xff1a;https://leetcode.cn/problems/maximum-sum-circular-subarray/solutions/1152143/wo-hua-yi-bian-jiu-kan-dong-de-ti-jie-ni-892u/ class Solution {public int maxSubarraySumCircular(int[] nums) {int n nums.length;int sum nums[0], minSum nums…

【目标跟踪】跨相机如何匹配像素

文章目录 前言一、计算思路二、代码三、结果 前言 本本篇博客介绍一种非常简单粗暴的方法&#xff0c;做到跨相机像素匹配。已知各相机内外参&#xff0c;计算共视区域像素投影&#xff08;不需要计算图像特征&#xff09;。废话不多说&#xff0c;直接来&#xff0c;见下图。…

快速入门Java NIO(Not I/O)的网络通信框架--Netty

Netty 入门 了解netty前需要对nio有一定认识,该笔记基础来自bilinbili黑马,在此基础上自己学习的笔记,添加了一些自己的理解 了解java 非阻塞io编程 1. 概述 1.1 Netty 是什么&#xff1f; Netty is an asynchronous event-driven network application framework for rapid …

掌握这些测试开发技能,从容应对工作难题!

各位小伙伴, 大家好, 本期为大家分享一些测试开发工程师在企业中通过哪些测试开发技能解决难题。 一.如何定位缺陷 在企业中, 小伙伴们在发现bug后, 需要定位到具体产生bug的原因, 在这种情况下, 我们可以通过以下几种方案: 1.通过代理抓包来分析 常用的抓包工具有: Charles…

R语言【paleobioDB】——pbdb_subtaxa():统计指定类群下的子类群数量

Package paleobioDB version 0.7.0 paleobioDB 包在2020年已经停止更新&#xff0c;该包依赖PBDB v1 API。 可以选择在Index of /src/contrib/Archive/paleobioDB (r-project.org)下载安装包后&#xff0c;执行本地安装。 Usage pbdb_subtaxa (data, do.plot, col) Arguments…

Monorepo-uniapp 构建分享

Monorepo uniapp 构建灵感&#xff1a;刚好要做一个项目&#xff0c;于是想到升级一下之前自己写的一个vue3tspiniauno的模版框架&#xff0c;其实那个框架也不错&#xff1b;只是感觉还差点东西&#xff0c;我已经用那个小框架写了两三个项目&#xff1b;轻巧实用。为什么选…