小程序开发基础-1

171 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第12天,点击查看活动详情

小程序生命周期

生命周期:程序从开启到关闭,过程中一系列事件总和。

小程序完整的生命周期,包括组件生命周期和页面生命周期。

首次加载:onLoad()

显示页面:onShow()

首次渲染: onReady()

切换后台:onHide()

后台切前台:onShow()

回收销毁:onUnload()

小程序架构

小程序采用Hybrid渲染,界面主要由成熟的 Web 技术渲染,再将客户端原生能力封装成接口供开发者调用,并通过双线程模型分离界面渲染和逻辑处理。

架构图如下。

逻辑层:

数据请求和业务逻辑处理,通过 JS 引擎提供的沙箱环境来执行 JS。与浏览器 Web 开发相比,逻辑层开发无法直接操作 DOM 和 BOM,无法使用一些浏览器暴露的接口(如跳转页面、动态执行脚本。

逻辑层主要负责将数据进行处理后再发送给渲染层,同时接收渲染层的事件反馈,对数据进行反向操作。对微信小程序来说,逻辑层就是所有 js 文件的集合。

渲染层:

在 WebView 线程中执行界面渲染相关的任务,对于微信小程序而言,渲染层就是所有 WXML(WeiXin MarkLanguage)文件与 WXSS(WeiXin Style Sheet)文件的集合。通过 Virtual DOM 减少渲染开销,提高局部更新数据和重渲染的效率,让页面更流畅。

系统层:

通过 JSBridge 构建 JS 和 Native 之间的通信,以便上层间接调用客户端的原生底层接口;提供网络请求、数据缓存、本地文件、媒体等基础能力;为逻辑层与渲染层的通信做中转。

逻辑层内的数据与渲染层内的视图之前实现了数据的双向绑定,保持了数据内容的双向同步:

当在逻辑层对数据进行修改的时候,渲染层会做相应的更新;

反之,当在渲染层对数据进行操作的时候,逻辑层也会同步修改数据内容。

小程序开发框架

小程序开发使用的框架称为 MINA 框架。MINA 框架封装了微信客户端提供的文件系统、网络通信等基础功能。