微信小程序快速入门03

🏡浩泽学编程个人主页
🔥 推荐专栏《深入浅出SpringBoot》《java项目分享》
《RabbitMQ》《Spring》《SpringMVC》

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

文章目录


前言

本文讲诉:生命周期、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中访问模块中的成员:
html 复制代码
<view>{{m1.toUpper(useranme)}}</view>
<wxs module="m1">
  module.exports.toUpper = function(str) {
    return str.toUpperCase()
  }
</wxs>

定义外联的wxs脚本

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

js 复制代码
function toLower(str) {
  return str.toLowerCase()
}

module.exports = {
  toLower: toLower
}


使用外联的wxs脚本

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

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

示例代码如下:

html 复制代码
<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 设备上,二者的运行效率无差异

总结

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

相关推荐
小疯仔21 分钟前
轨迹在地图上“漂“了 500 米?一文吃透 WGS-84→GCJ-02 坐标转换引擎(GPX→JSON 实战源码剖析)
小程序·json·notepad++
小荷才露尖尖角,早有蜻蜓立上头23 分钟前
过滤器的4种创建方式
java
大圣编蚕33 分钟前
Java ByteArrayInputStream 详解:从入门到实战
java·开发语言·算法
程序员阿明1 小时前
idea把插件啥的不默认放在C盘
java·ide·intellij-idea
mayaairi1 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
linweidong1 小时前
中科闻歌Java面试题及参考答案
java·python·大模型·提示词·ai agent·mcp·rag原理
OpenAnolis小助手2 小时前
一句话看透 JVM,SysOM 诊断 Skill 新增 Java 应用诊断能力
java·开发语言·jvm·阿里云·操作系统控制台·sysom
kyriewen2 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
ForteScarlet2 小时前
Kotlin 2.4.20 现已发布,新特性多不多?
android·java·开发语言·开源·kotlin·jetbrains
萧瑟余晖2 小时前
Java深入解析篇六十二之安全机制详解
java·开发语言