🚀前言

随着移动互联网的快速发展，小程序以其便捷的使用体验和丰富的功能，逐渐成为各类应用场景中的重要组成部分。无论是购物、社交还是信息服务，小程序都在不断改变着我们的生活方式。然而，很多开发者在进入小程序开发时，常常对其架构感到困惑。掌握小程序的开发架构，不仅能够提升开发效率，还能帮助我们更好地管理项目，优化用户体验。

在本篇文章中，我们将深入分析小程序的开发架构，包括其基本组成部分、交互流程及数据管理等关键概念。无论你是小程序开发的新手，还是希望进一步提升技能的开发者，相信这篇文章都能为你提供有价值的指导和启发。让我们一起探索小程序的开发架构，开启高效开发的新篇章吧！

🚀一、小程序的开发架构

小程序开发框架本身的设计目标是让开发者更加简单高效地进行小程序应用的开发，并且让小程序的使用体验与原生类似。在开发小程序时，整个应用框架大致可以分为两部分：逻辑层与视图层。当然，数据层也是存在的，它包含在逻辑层之内。总体来说，逻辑层主要负责应用的业务逻辑和用户的交互处理等，使用JavaScript 控制。视图层主要负责应用的页面展示，由WXML和 WXSS 控制。

🔎1.注册小程序

🦋1.1 小程序应用实例注册

每个小程序应用都需要在 app.js 文件中先注册一个应用实例。整个小程序只有一个应用实例，这个实例是全局共享的。可以通过以下方法获取此应用实例：

const appInstance = getApp();

在之前的 HelloWorld 项目中，app.js 文件中默认生成的代码如下：

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || [];
    logs.unshift(Date.now());
    wx.setStorageSync('logs', logs);

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    });
  },
  globalData: {
    userInfo: null
  }
});

🦋1.2 App() 方法说明

App() 方法用来注册应用实例。需要注意的是：

• 此方法必须在 app.js 文件中调用。
• 每个小程序只能调用一次 App() 方法。

App() 方法可以接收一个配置对象，其中常用的选项有两个：

1. onLaunch: 小程序的生命周期回调。小程序初始化时会调用此回调函数，通常用于进行一些初始化操作，比如获取本地存储、登录等。
2. globalData: 用于配置小程序中需要使用的全局数据。globalData 是一个对象，存储了全局共享的数据。

🦋1.3 配置对象选项

在 App() 方法中传入的配置对象可以包含以下常见的选项：

🦋1.4 总结

• App() 是用来注册小程序应用实例的方法，每个小程序只能调用一次。
• onLaunch 和 globalData 是常见的配置选项。onLaunch 用于初始化，globalData 用于存储全局共享的数据。
• 小程序的生命周期方法 onLaunch、onShow、onHide 等用于处理不同的应用状态。

🔎2.小程序中页面的注册

🦋2.1 页面注册

与应用的注册类似，每个页面的 JS 文件中也要进行页面的注册。使用 Page 方法来进行页面注册。以下是 HelloWorld 工程中 logs.js 文件的内容，

// logs.js
const util = require('../../utils/util.js')

Page({
  // data 选项提供页面渲染所需要的数据
  data: {
    logs: []
  },

  // 页面加载的生命周期方法
  onLoad() {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return {
          date: util.formatTime(new Date(log)),
          timeStamp: log
        }
      })
    });
  }
});

之所以选择 logs.js 文件作为参考，是因为相比 index.js，日志页面要简单很多。Page 方法需要传入一个配置对象，如上述代码所示：

• data 选项用于配置当前页面所要使用的数据。
• onLoad 选项是一个生命周期回调，当页面加载时会调用此方法，一些页面的加载逻辑可以在这个回调中实现。

🦋2.2 页面配置对象

🔎3.页面的生命周期

🦋3.1 小程序前端开发中的生命周期

在前端开发中，“生命周期”是一个非常重要的概念。虽然在面向对象的开发框架下，所有对象都是有生命周期的，但大多数对象的生命周期我们无须过多关心。不过，页面的生命周期则不同。要实现业务逻辑，必须对页面的生命周期有所了解。

🦋3.2 注册页面时的生命周期回调

在注册页面时配置对象中可设置的选项，其中有很多是生命周期回调。这些回调会在页面渲染或销毁过程中指定的时刻被调用。

要理解页面的生命周期，首先需要明白小程序框架的运行原理。微信小程序官方文档提供了一张示意图来帮助开发者理解生命周期的过程。

🦋3.3 微信小程序框架的运行原理

在微信小程序中，UI 线程和逻辑线程是分开的，这也是小程序使用体验流畅的原因之一。如图 2-4 所示，左列为 UI 线程的工作流程，右列为逻辑线程的工作流程。

对于一个页面来说，当其将要展示时，UI 线程和逻辑线程会同步进入工作流。具体流程如下：

1. 逻辑线程:

   • 进行页面相关对象的创建工作，并执行 onLoad 生命周期方法。
   • 创建完成后，紧接着执行 onShow 生命周期方法。
   • 然后等待 UI 线程的通知将数据发送给 UI 线程进行渲染。因此，页面渲染所需要的数据，需要在 onLoad 或者 onShow 方法中准备完成。

2. UI 线程:

   • 做完初始化工作后，会通知逻辑线程来获取渲染所需数据。
   • 拿到数据后，UI 线程会进行页面的第一次渲染。
   • 渲染完成后，会再次通知逻辑线程。

通过上述流程，我们可以清晰地看到小程序页面的生命周期以及 UI 线程和逻辑线程如何协同工作。理解这些概念和流程，有助于我们在开发小程序时更好地管理页面的状态和数据流。

🦋3.4 生命周期流程概述

在微信小程序开发中，理解页面的生命周期对于实现复杂的业务逻辑至关重要。以下是页面在不同状态下的生命周期方法及其作用：

1. onLoad:

   • 页面加载时会调用，可以在此方法中初始化数据。

2. onShow:

   • 页面显示时会调用，可以在此方法中处理页面从后台进入前台的逻辑。

3. onReady:

   • 逻辑线程接收到 UI 线程第一次渲染完成的通知后，会执行 onReady 生命周期方法。
   • 如果需要在页面第一次渲染完成后做一些业务逻辑，可以在此方法中实现。

4. onHide:

   • 页面进入后台时，逻辑线程会调用 onHide 生命周期方法。

5. onUnload:

   • 页面被关闭时，逻辑线程会调用 onUnload 生命周期方法。

🦋3.5 生命周期的工作原理

1. 初始加载:

   • 逻辑线程：创建页面对象，执行 onLoad 方法，然后执行 onShow 方法，并通知 UI 线程进行页面渲染。
   • UI 线程：接收到数据后，进行页面的第一次渲染，并通知逻辑线程渲染完成。

2. 页面第一次渲染完成:

   • 逻辑线程：执行 onReady 方法，可以在此时进行第一次渲染完成后的业务逻辑处理。

3. 数据更新:

   • 逻辑线程：页面数据变化时，通知 UI 线程进行页面重绘。
   • UI 线程：接收到更新的数据后，执行页面重绘，将最新的页面展示给用户。

4. 页面进入后台:

   • 逻辑线程：调用 onHide 方法进行处理。

5. 页面回到前台:

   • 逻辑线程：再次主动发送数据到 UI 线程，通知 UI 线程进行页面重绘，并调用 onShow 方法。

6. 页面被关闭:

   • 逻辑线程：调用 onUnload 方法进行处理。