【微信小程序】一文带你吃透小程序开发框架——逻辑层
0️⃣写在前面
开发者写的所有代码最终将会打包成一份
JavaScript
文件,并在小程序启动的时候运行,直到小程序销毁。这一行为类似 ServiceWorker,所以逻辑层也称之为 App Service。
文章目录
- 0️⃣写在前面
- 1️⃣逻辑层
- 2️⃣页面路由
- 页面栈与路由方式
- Tips
- 3️⃣模块化
1️⃣逻辑层
1. 原理:小程序开发框架的逻辑层使用 JavaScript
引擎为小程序提供开发者 JavaScript
代码的运行环境以及微信小程序的特有功能。
逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
2. 在 JavaScript
的基础上,我们增加了一些功能,以方便小程序的开发:
- 增加
App
和Page
方法,进行程序注册和页面注册。 - 增加
getApp
和getCurrentPages
方法,分别用来获取App
实例和当前页面栈。 - 提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
- 提供模块化能力,每个页面有独立的作用域。
注意:小程序框架的逻辑层并非运行在浏览器中,因此
JavaScript
在 web 中一些能力都无法使用,如window
,document
等。
2️⃣页面路由
在小程序中所有页面的路由全部由框架进行管理。
页面栈与路由方式
1. 框架以栈
的形式维护了当前的所有页面。
2. 对于路由的触发方式
以及页面生命周期函数
如下:
路由方式 | 页面栈表现 | 触发时机 | 路由前页面 | 路由后页面 |
---|---|---|---|---|
初始化 | 新页面入栈 | 小程序打开的第一个页面 | onLoad, onShow | |
打开新页面 | 新页面入栈 |
调用 API wx.navigateTo 使用组件 |
onHide | onLoad, onShow |
页面重定向 | 当前页面出栈,新页面入栈 |
调用 API wx.redirectTo 使用组件 |
onUnload | onLoad, onShow |
页面返回 | 页面不断出栈,直到目标返回页 |
调用 API wx.navigateBack 使用组件 用户按左上角返回按钮 |
onUnload | onShow |
Tab 切换 |
页面全部出栈,只留下新的 Tab 页面 如果从没有 tabBar 的页面跳转至有tabBar 的页面就一定要用这个 ,而不是上面的,否则会报错
|
调用 API wx.switchTab 使用组件 用户切换 Tab |
各种情况请参考下表 | |
重启动 | 页面全部出栈,只留下新的页面 |
调用 API wx.reLaunch 使用组件 |
onUnload | onLoad, onShow |
2. 代码示例:
wx.navigateTo({ //当前页面被隐藏,缓存在栈中,最多存放10个页面
url: "/pages/posts/post" //跳转的页面路径
})wx.redirectTo({ //当前页面被销毁
url: "/pages/posts/post"
})
3. Tab 切换对应的生命周期(以 A、B 页面为 Tabbar 页面,C 是从 A 页面打开的页面,D 页面是从 C 页面打开的页面为例):
当前页面 | 路由后页面 | 触发的生命周期(按顺序) |
---|---|---|
A | A | Nothing happend |
A | B | A.onHide(), B.onLoad(), B.onShow() |
A | B(再次打开) | A.onHide(), B.onShow() |
C | A | C.onUnload(), A.onShow() |
C | B | C.onUnload(), B.onLoad(), B.onShow() |
D | B | D.onUnload(), C.onUnload(), B.onLoad(), B.onShow() |
D(从转发进入) | A | D.onUnload(), A.onLoad(), A.onShow() |
D(从转发进入) | B | D.onUnload(), B.onLoad(), B.onShow() |
Tips
navigateTo
,redirectTo
只能打开非 tabBar 页面。switchTab
只能打开 tabBar 页面。reLaunch
可以打开任意页面。- 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
- 调用页面路由带的参数可以在目标页面的
onLoad
中获取。注意
:开发者可以使用getCurrentPages()
函数获取当前页面栈- 页面栈中最多存在
10
个
3️⃣模块化
可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 [
module.exports
] 或者exports
才能对外暴露接口。
【微信小程序】一文带你吃透小程序开发框架——逻辑层相关推荐
- 【微信小程序】一文带你吃透小程序开发框架——视图层中的事件系统
0️⃣前言 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id ...
- Thinkphp开发微信商城小程序源码拼团小程序源码带后台+前端小程序拼团源码仿拼多多
码说明:Thinkphp开发微信商城小程序源码拼团小程序源码带后台+前端小程序拼团源码仿拼多多 其它说明: 基于小程序的拼团应用,用户可通过拼团,随时发起拼团活动并分享给好友 拼团是商品营销和售卖的一 ...
- 一文带你吃透微服务守门神SpringCloud-GateWay
一文带你吃透微服务守门神SpringCloud-GateWay GateWay简单介绍 Gateway和Zuul的对比: gateWay的几个核心概念 入门案例 网关层负载均衡 gateWay 工作原 ...
- 从原理到应用,一文带你了解小程序插件能力
3 月 13 日,小程序插件功能上线:8 月 底,在时隔半年后,为进一步推广插件功能,微信在开发者社区上线了插件版块. 小程序插件是可以被开发者添加到小程序内直接使用的,能为用户提供具体服务的功能组件 ...
- 进程、线程与协程傻傻分不清?一文带你吃透!
目录 前言 内容大纲 进程 什么是进程 进程的控制结构 进程的状态 进程的上下文切换 线程 什么是线程 线程与进程的对比 线程的上下文切换 线程的模型 调度 调度原则 调度算法 好文推荐 前言 欢迎来 ...
- 一文带你吃透操作系统
文章目录 1. 进程.线程管理 2. 内存管理 3. 进程调度算法 4. 磁盘调度算法 5. 页面置换算法 6. 网络系统 7. 锁 8. 操作系统知识点 文章字数大约1.9万字,阅读大概需要65分钟 ...
- 【微信小程序】一文带你吃透开发中的常用组件
写在前面 小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构. 官方把小程序的组件分为了9大类,分别是: 1.视图容器 2.基础内容 3.表单组件 4.导航组件 5.媒体组 ...
- 一文带你吃透Vue生命周期(结合案例通俗易懂)
文章目录 本篇学习目标 1. vue生命周期 1.0_人的-生命周期 1.1_钩子函数 1.2_初始化阶段 1.3_挂载阶段 1.4_更新阶段 1.5_销毁阶段 2. axios 2.0_axios基 ...
- 【Web前端】一文带你吃透HTML(完整篇)
前端学习路线小总结: 基础入门: HTML CSS JavaScript 三大主流框架: VUE REACT Angular 深入学习: 小程序 Node jQuery TypeScript 前端工程 ...
最新文章
- android 加载h5页面部分机型滑动卡顿回弹_网易爆款H5 的交互方法参考
- python多线程读取文件的问题_Python多线程同步---文件读写控制方法
- ECSHOP头部调用会员的消费积分
- 07-函数作用域和集合列表字典元祖
- 快速入门系列--MVC--03控制器和IOC应用
- Vue+Element!一千字带你编写合理的编辑,查看,新建!
- c语言存储类_C编程语言的存储类
- Adobe illustrator 论文图形编辑和排版 - 连载 1
- MySQL首次使用Windows_mysql的安装与使用(windows)
- php7 php.ini 没有mysql_php7的配置文件里没有mysql.default_socket吗?
- 基于android鲜花销售app,基于Android的鲜花APP设计任务书
- 1020. Tree Traversals
- phpdesigner 配置SVN
- 高中计算机教室标语,高中教室宣传标语
- 码怪之程序员的日常语录
- Android8.1 吉字节问题
- 上传计算机桌面文件图标不见,关于桌面上图标都不见了这类问题的解决方法
- Unity鼠标控制物体360°旋转和点击移动
- 大疆产品上岸经验分享
- 阿里云STS临时令牌操作OSS云存储