微信小程序小程序生命周期、页面导航/事件、WXS脚本(笔记)

文章目录

1. 页面导航
- 1.1 声明式导航
- 1.2 编程式导航
- 1.3 导航传参
2. 页面事件
3. 生命周期
- 3.1 应用生命周期
- 3.2 页面生命周期
4. WXS脚本
- 4.1 什么是WXS
- 4.2 WXS的应用场景
- 4.3 WXS和JavaScript的关系
- 4.4 WXS的基本用法
- 4.5 WXS的注意点

1. 页面导航

1.1 声明式导航

<!-- url：跳转到对应页面，要以 / 开头open-type：跳转方式navigate：默认的，跳转非 tabBar 页面switchTab：跳转 tabBar 页面navigateBack：回退路由历史记录delta：回退层数，默认为 1，需要配合 navigateBack 使用
-->
<navigator url="/pages/index/index" open-type="navigate"></navigator>

1.2 编程式导航

这两种方法很相似

跳转 tabBar 页面

wx.switchTab({url: "/pages/index/index",success() {console.log("我是成功的回调")},fail() {console.log("我是失败的回调")},complete() {console.log("调用成功、失败都会执行")}
})

跳转非 tabBar 页面

wx.navigateTo({url: "/pages/index/index",success() { },fail() { },complete() { }
})

回退导航

wx.navigateBack({delta: 1, // 回退的层数，最大为10，小程序中页面栈最多十层success() { },fail() { },complete() { }
})

1.3 导航传参

传递参数

// 不支持 tabBar 页面
url: "/pages/index/index?name=zs&gender=男"

接收参数

// onLoad：页面加载时触发
// 跳转的目标页面
onLoad(options) {console.log(options) // {name: "zs", gender: "男"}
}

2. 页面事件

下拉刷新

// 首先需要在全局或页面配置文件中开启下拉刷新// 触发下拉刷新时，会触发该函数
onPullDownRefresh() {}// 手动关闭下拉刷新
wx.stopPullDownRefresh({success() { },fail() { },complete() { }
})

上拉触底

// 首先需要在全局或页面配置文件中配置上拉触底(触发间距)// 页面上拉触底时，会触发该函数
onReachBottom() {}

3. 生命周期

3.1 应用生命周期

// app.js
App({/*** 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）*/onLaunch() { },/*** 当小程序启动，或从后台进入前台显示，会触发 onShow*/onShow(options) { },/*** 当小程序从前台进入后台，会触发 onHide*/onHide() { },/*** 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息*/onError(msg) { }
})

3.2 页面生命周期

// index.js
// 页面加载顺序，onLoad --> onShow --> onReady
Page({/*** 监听页面加载，只触发一次*/onLoad(options) { },/*** 监听页面显示*/onShow() { },/*** 监听页面初次渲染完成，只触发一次*/onReady() { },/*** 监听页面隐藏*/onHide() { },/*** 监听页面卸载，只触发一次*/onUnload() { }
})

4. WXS脚本

4.1 什么是WXS

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

4.2 WXS的应用场景

WXML 中不乏调用在页面的 js 中定义的函数，但是 WXML 中，可以调用 WXS 中定义的函数
因此，小程序中 WXS 的典型应用场景就是过滤器

4.3 WXS和JavaScript的关系

WXS 有自己的数据类型
- Number
- String
- Boolean
- Object
- Function
- Array
- Date
- Regexp
WXS 不支持 ES6 以上的语法形式
- 不支持：
- let、const
- 解构赋值
- 展开运算符
- 箭头函数
- 对象简写
- …
WXS 遵循 CommonJs 规范
- require
- exports
- module.exports

4.4 WXS的基本用法

内嵌 WXS

<!-- wxml文件 -->
<view>{{m1.toUpper("username")}}</view><!-- 定义使用的模块名称 -->
<wxs module="m1">module.exports.toUpper = function(str) {return str.toUpperCase()}
</wxs>

外联 WXS

<!-- wxml文件 -->
<view>{{m1.toUpper("username")}}</view><wxs module="m1" src="文件路径"></wxs>

// wxs 文件
module.exports.toUpper = function(str) {return str.toUpperCase()
}

4.5 WXS的注意点

不能作为组件的事件回调，WXS 经典的应用场景就是过滤器，配合 Mustache 语法进行使用
WXS 不能调用 js 中定义的函数，不能调用小程序提供的 API
在 IOS 设备上，小程序内的 WXS 会比 JavaScript 代码块 2 ~ 20 倍、android 设置上，二者的运行效率无差异

微信小程序小程序生命周期、页面导航/事件、WXS脚本(笔记)相关推荐

微信小程序开发之生命周期
开发小程序过程中会涉及到小程序的生命周期,和其他app开发一样,小程序也有生命周期. 1:页面的生命周期在初始页面:index.js中增加如图1所示代码点击"编译"后,运行这个 ...
小程序生命周期页面生命周期及小程序生命周期
其实微信小程序的声明周期分为两种第一种是当前小程序的声明周期,可以理解为app的一整个声明周期第二种是页面的生命周期即pages的声明周期先上个图这个图包含小程序整个的生命周期和页面的生命周期 ...
【微信小程序开发】生命周期与生命周期函数
目录一.生命周期二.生命周期函数三.总结一.生命周期 (1)概念生命周期(Life Cycle)是指一个对象从创建-->运行-->销毁的整个阶段小程序的生命周期小程序启动,表 ...
小程序开发.uniapp.生命周期
小程序开发.uniapp.生命周期 [内容介绍]: uniapp中生命周期相关内容相关文章推荐: 标题链接 <小程序开发.概述与环境搭建> https://blog.csdn.net/ ...
小程序中的生命周期有哪些?
一.小程序中生命周期的分类小程序中的生命周期有以下三种: (1)应用生命周期小程序的生命周期函数是在app.js中调用,通过App(Object)函数用来注册一个小程序,指定其小程序的生命周期回调 ...
连载《一个程序猿的生命周期》-27、新招的两位“高管”相继离职
一个程序猿的生命周期微信平台口号:职业交流,职业规划:面对现实,用心去交流.感悟. 公众号:iterlifetime 百木-ITer职业交流奋斗群:141588103 微博:h ...
连载《一个程序猿的生命周期》-《发展篇》- 23.两年多的时间，从孤家寡人到10多人的团体，经历了什么...
上篇文章<城市奋斗者的阿Q精神>,不管真正的奋斗者还是伪奋斗者都需要阿Q精神,有的人是遇事之后被动的心里安慰,有的人是看破尘事的无所畏惧到内心强大.我可能属于后者,从写 ...
【网友的】《一个程序猿的生命周期》读后感
这是谁写的读后感,我不太清楚,但是作为<一个程序猿的生命周期>的作者,很感谢这位网友的支持,也谢谢大家能够看这些文章.你们的支持是我写下去的精神力量,那怕到深夜,依然感觉到精力充沛.写连载 ...
读《一个程序猿的生命周期》有感
<一个程序猿的生命周期>中的作者来自贫困家庭,可以说是一个从大山里走出来的人.他深知,只有刻苦学习才能改变现状,所以他学习非常努力. 但人生总不是这样一帆风顺的,总会在我们的人生路上给与我 ...
《一个程序员的生命周期》读后感
作者的父亲下岗获得6000元,作者用来4500买了台电脑,可想而知作者当时承受的压力有多大.作者没有浪费这4500,他不仅学好了课上的知识,还学会了其他的,如重装个系统.买个铁通的电话卡上网(那是非常 ...

微信小程序小程序生命周期、页面导航/事件、WXS脚本(笔记)

文章目录

1. 页面导航

1.1 声明式导航

1.2 编程式导航

1.3 导航传参

2. 页面事件

3. 生命周期

3.1 应用生命周期

3.2 页面生命周期

4. WXS脚本

4.1 什么是WXS

4.2 WXS的应用场景

4.3 WXS和JavaScript的关系

4.4 WXS的基本用法

4.5 WXS的注意点

微信小程序小程序生命周期、页面导航/事件、WXS脚本(笔记)相关推荐

最新文章

热门文章

微信小程序 小程序生命周期、页面导航/事件、WXS脚本(笔记)

文章目录

1. 页面导航

1.1 声明式导航

1.2 编程式导航

1.3 导航传参

2. 页面事件

3. 生命周期

3.1 应用生命周期

3.2 页面生命周期

4. WXS脚本

4.1 什么是WXS

4.2 WXS的应用场景

4.3 WXS和JavaScript的关系

4.4 WXS的基本用法

4.5 WXS的注意点

微信小程序 小程序生命周期、页面导航/事件、WXS脚本(笔记)相关推荐

最新文章

热门文章

微信小程序小程序生命周期、页面导航/事件、WXS脚本(笔记)

微信小程序小程序生命周期、页面导航/事件、WXS脚本(笔记)相关推荐