小程序入门到实战（二）-----基础知识部分1.0

一、小程序的生命周期

要了解如何开发一个小程序，首先需要了解小程序的生命周期，因为生命周期的概念将贯穿
小程序开发的始终。

生命周期：是指一个程序从启动到关闭这一过程中产生的一系列事件的总和。

实际上包括组件生命周期和页面生命周期两个部分。一个微信小程序启动后首次加载页面，会触发页面的 onLoad 事件（这个事件只有在页面首次加载时才会触发）；当这个页面显示的时候会触发 onShow 事件，如果这个页面是首次渲染完成，则会接着触发 onReady 事件。如果我们将小程序切换到后台，页面就会被隐藏同时触发onHide 事件；下次从后台切换到前台时，则会再次触发 onShow 事件。最后，当页面被回收销毁时，会触发 onUnload 事件。

二、小程序的架构

     小程序采用混合模式开发，称为Hybrid 方式。小程序的界面主要由成熟的 Web 技术渲染，再将客户端原生能力封装成接口供开发者调用，并通过双线程模型分离界面渲染和逻辑处理，提高小程序的渲染性能和管控安全。

    为了满足上述设计理念，小程序开发团队设计了一套双线程模型，架构主要分为 3 层：逻辑
层（JSCore）、渲染层（WebView）和系统层（Native）。

1.逻辑层（JSCore）

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

逻辑层主要进行数据请求和业务逻辑处理，通过 JS 引擎提供的沙箱环境来执行 JS。与浏览
器 Web 开发相比，逻辑层开发无法直接操作 DOM 和 BOM，无法使用一些浏览器暴露的接口（如
跳转页面、动态执行脚本），从而提高了管控力和安全性。

2.渲染层（WebView）

渲染层主要在 WebView 线程中执行界面渲染相关的任务，对于微信小程序而言，渲染层就
是所有 WXML（WeiXin Mark Language）文件与 WXSS（WeiXin Style Sheet）文件的集合。

3.系统层（Native）

系统层的主要作用有 3 个：

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

       在双线程模型下，把界面渲染和逻辑处理分离、并行处理，可以加快渲染速度，避免单线程模型下因为 JS 运算时间过长导致的 UI 卡顿问题。并且，采用数据驱动的方式，开发者将无法直接操作 DOM，可以加强管控和安全。但是，双线程模型也意味着逻辑层与渲染层之间的通信、各层与客户端的原生交互会有一定的延时。

三、小程序的开发框架

        小程序开发使用的框架称为 MINA 框架。

它封装了微信客户端提供的文件系统、网络通信等基础功能，并经过大量底层优化，使得小程序的运行速度几乎接近原生 App。该框架在 Android 和 iOS 平台上呈现高度一致的效果，并配备了完善的开发和调试工具。MINA 框架的核心目标是通过简化的方式，向开发者提供一整套统一的 JavaScript API，使得开发者能够更容易地使用微信客户端的各种功能，从而快速构建出接近原生 App 体验的小程序应用。

前面提到的小程序的 三层架构，其实就是 MINA 框架的核心组成部分。这三层架构互相配合，缺一不可。具体来说：

• 逻辑层 主要由 JavaScript 代码来实现。
• 渲染层 主要由微信提供的 WXML（结构）和 WXSS（样式）来完成。

在小程序中，逻辑层 和 渲染层 之间通过 数据双向绑定 实现了数据的同步：当逻辑层的数据发生变化时，渲染层会自动更新；同样，当渲染层的数据发生变化时，逻辑层的数据也会随之更新。这个双向绑定机制让开发者无需手动操作 DOM 元素，可以更方便、更快速地更新页面内容，从而提高开发效率。这个机制是小程序框架设计的核心之一。

四、小程序的逻辑层开发

在小程序中，逻辑层 主要负责处理业务逻辑。

        对于开发者而言，小程序的逻辑层就是所有 JavaScript 脚本文件的集合。虽然小程序的逻辑层使用的是 JavaScript 语言，但它与我们在 Web 开发中常用的 JavaScript 有一些区别。首先，小程序在标准 JavaScript 的基础上，扩展了一些新的 API，以提升开发效率并增强小程序的功能。其次，由于小程序并不运行在浏览器环境中，它无法使用像 document、window 这类在 Web 开发中常见的 JavaScript 功能和对象。因此，小程序的 JavaScript 环境和传统 Web 开发有所不同。

（一）小程序文件结构

├ app.wxss
├ app.json
├ project.config.json
├ pages
│   ├--- index
│   │     ├-- index.js
│   │     ├-- index.json
│   │     ├-- index.wxml
│   │     └-- index.wxss
└- app.js