微信小程序--》小程序生命周期和WXS使用

简介: ⚓经过web前端开发的学习,相信大家对于前端开发有了一定深入的了解,今天我开设了微信小程序,主要想从移动端开发方向进一步发展,而对于我来说写移动端博文的第一站就是小程序开发,希望看到我文章的朋友能对你有所帮助。

🏍️生命周期

生命周期(Life Cycle)是指一个对象从创建->运行->销毁的整个阶段,强调的是一个时间段;小程序运行的过程也是有生命周期,小程序的启动表示生命周期的开始、小程序的关闭表示生命周期的结束,中间小程序运行的过程就是小程序的生命周期。

🍇生命周期分类

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

应用生命周期:特指小程序从启动 -> 运行 -> 销毁的过程

页面生命周期:特指小程序中,每个页面的加载 -> 渲染 -> 销毁的过程

其中,页面的生命周期范围比较小,应用程序的生命周期范围比较大。

🍈生命周期函数

生命周期函数:是由小程序框架提供的内置函数,会伴随着生命周期,自动按次序执行。

生命周期函数的作用:允许程序员在特定的时间点,执行某些特定的操作。例如:页面刚加载的时候,可以在 onLoad 生命周期函数中初始化页面的数据。

注意:生命周期强调的是时间段,生命周期函数强调的是时间点。

🍉生命周期函数分类

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

应用生命周期函数:特指小程序从启动 -> 允许 -> 销毁期间依次调用的那些函数

小程序的应用生命周期函数需要在 app.js 中进行声明,代码如下:

// app.jsApp({
//当小程序初始化完成时,会触发 onLaunch(全局只触发一次)onLaunch: function () {
  },
//当小程序启动,或从后台进入前台显示,会触发 onShowonShow: function (options) {
  },
//当小程序从前台进入后台,会触发 onHideonHide: function () {
  }
})

我们可以在微信开发者工具来模拟前台切入后台,后台切入前台时触发的函数的过程。

图片.png

如果没有在导航工具栏看到切后台的选项,可以在进行如下操作:

图片.png

找到工具栏管理,勾选上切后台即可。

图片.png

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

小程序的页面生命周期需要在页面的.js文件中进行声明

//页面.js文件Page({
onLoad  : function(options){ }, //监听页面加载,一个页面只调用一次onShow  : function() { },       //监听页面显示onReady : function() { },       //监听页面初次渲染完成,一个页面只调用一次onHide  : function() { },       //监听页面隐藏onUnload: function() { }        //监听页面卸载,一个页面只调用一次})

组件生命周期会在讲解组件方面的时候讲解。

🏍️WXS

WXS(Wei Script)是小程序独有的一套脚本语言,结合WXML,可以构建出页面的结构。

wxml中无法调用在页面的.js中定义的函数,但是wxml中可以调用wxs中定义的函数,因此,小程序中的wxs的典型应用场景就是“过滤器”。

🍇wxs 和 JavaScript 的关系*

wxs语法类似于JavaScript,但 wxs 和 JavaScript 是两种不同的两种语言。

wxs有自己的数据类型:

number数值类型、string字符串类型、boolean布尔类型、object对象类型、function函数类型

array数组类型、date日期类型、regexp正则

wxs不支持类似于 ES6 以上的语法形式:

不支持:let、const、解构赋值、展开运算符、箭头函数、对象属性简写等

支持:var 定义变量、普通function函数等类似于ES5的语法

wxs遵循CommonJS规范:

module对象、require()函数、module.exports对象

🍈内嵌 wxs 脚本

wxs代码可以编写在 wxml 文件中的<wxs>标签内,就像JavaScript代码可以编写在html文件中的<script>标签一样。

wxml文件中的每个<wxs></wxs>标签,必须提供module属性,用来指定当前 wxs 的模块名称,方便在wxml中访问模块中的成员。

<view>{{wxs.toUpper(username)}}</view><wxsmodule="wxs">//将模块方法暴露出去module.exports.toUpper=function(str){
returnstr.toUpperCase()
  }
</wxs>

图片.png

🍉外联 wxs 脚本

wxs代码可以在以.wxs为后缀名的文件内,和JavaScript可以编写在.js为后缀名的文件中一样。

//在.wxs文件下写如下代码,在.wxs文件中同样要将文件暴露出去functiontoLower(str){
returnstr.toLowerCase()
}
module.exports= {
toLower:toLower}

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

图片.png

🍊WXS特点

与JS关系:

为了降低wxs(WeiXin Script)的学习成本,wxs语言在设计时借鉴了大量的JavaScript语法。但在本质上,wxs 和 JavaScript是完全不同的两种语言!

不能作为组件的事件回调:

wxs典型的应用场景就是过滤器,经常配合Mustache语法进行使用,但是,在wxs中定义的函数不能作为组件的事件回调函数。

隔离性:

指的是wxs的运行环境和其他JavaScript代码是隔离的,wxs不能调用js中定义的函数,wxs不能调用小程序提供的API

性能好:

在iOS设备上,小程序内的WXS会比JavaScript代码快2~20倍。

在安卓设备上,两者运行效率无差异

相关文章
|
5天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
24 0
|
5天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
31 3
|
5天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
31 2
|
5天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
25 0
|
5天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信阅读小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信阅读小程序的详细设计和实现
25 0
|
5天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的旅游出行必备商城小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的旅游出行必备商城小程序的详细设计和实现
27 0
|
13天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
13天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
13天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
13天前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。

热门文章

最新文章