小程序的架构和配置

小程序的架构模型

谁是小程序的宿主环境呢？微信客户端

• 宿主环境为了执行小程序的各种文件：wxml文件、wxss文件、js文件

当小程序基于 WebView 环境下时，WebView 的 JS 逻辑、DOM 树创建、CSS 解析、样式计算、Layout、Paint (Composite) 都发生

• 在同一线程，在 WebView 上执行过多的 JS 逻辑可能阻塞渲染，导致界面卡顿
• 以此为前提，小程序同时考虑了性能与安全，采用了目前称为「双线程模型」的架构

web、小程序、原生app

• web 里 div、p 称为元素
• 小程序里 view、text、button 称为控件
• 原生app里 button、imageview、view、webview 称为控件

双线程模型：

• WXML 模块和 WXSS 样式运行于 渲染层，渲染层使用 WebView 线程渲染（一个程序有多个页面，会使用多个 WebView 的线程）
• JS 脚本（app.js/home.js等）运行于 逻辑层，逻辑层使用 JsCore 运行 JS 脚本
• 这两个线程都会经由微信客户端（Native）进行中转交互

小程序的配置文件

小程序的很多开发需求被规定在了配置文件中。为什么这样做呢?

• 这样做可以更有利于我们的开发效率
• 并且可以保证开发出来的小程序的某些风格是比较一致的
• 比如导航栏 – 顶部 TabBar，以及页面路由等等

常见的配置文件有哪些呢?

• project.config.json：项目配置文件, 比如项目名称、appid 等

  https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html

• sitemap.json：小程序搜索相关的

  https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html

• app.json：全局配置

• page.json：页面配置

全局配置比较多, 举例几个比较重要的

• https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

• pages: 页面路径列表

  • 用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息
  • 小程序中所有的页面都是必须在pages中进行注册的

• window: 全局的默认窗口展示

  • 用户指定窗口如何展示, 其中还包含了很多其他的属性

• tabBar: 底部 tab 栏的展示

  

App函数

每个小程序都需要在 app.js 中调用 App 函数注册小程序实例

• 在注册时, 可以绑定对应的生命周期函数

• 在生命周期函数中, 执行对应的代码

  https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

注册 App 时，我们一般会做什么呢？

1. 判断小程序的进入场景
2. 监听生命周期函数，在生命周期中执行对的业务逻辑，比如在某个生命周期函数中进行登录操作或者请求网络数据
3. 因为 App() 实例只有一个，并且是全局共享的（单例对象），所以我们可以将一些共享数据放在这里

作用一：判断打开场景

• 场景的打开场景：群聊会话中打开、小程序列表中打开、微信扫一扫打开、另一个小程序打开

  https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html

如何确定场景？

• 在 onLaunch 和 onShow 生命周期回调函数中，会有 options 参数，其中有 scene 值

作用二：定义全局App的数据

可以在 Object 中定义全局 App 的数据

App({
  globalData: {
    token: 'Bearer bird',
    userInfo: {
      name: 'bird',
      age: 12
    }
  }
})

定义的数据可以在其他任何页面中访问

Page({
  onLoad() {
    const app = getApp()
    const token = app.globalData.token
    const userInfo = app.globalData.userInfo
    console.log(token, userInfo)
  }
})

作用三：生命周期函数

在生命周期函数中，完成应用程序启动后的初始化操作

• 比如登录操作
• 比如读取本地数据（类似于token，然后保存在全局方便使用）
• 比如请求整个应用程序需要的数据

Page函数

小程序中的每个页面, 都有一个对应的 js 文件, 其中调用 Page 函数注册页面实例

• 在注册时, 可以绑定初始化数据、生命周期回调、事件处理函数等 https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

我们来思考：注册一个 Page 页面时，我们一般需要做什么呢？

1. 在生命周期函数中发送网络请求，从服务器获取数据
2. 初始化一些数据，以方便被 wxml 引用展示
3. 监听 wxml 中的事件，绑定对应的事件函数
4. 其他一些监听（比如页面滚动、下载刷新、上拉加载更多等）

Page页面的生命周期

监听页面的下拉刷新和上拉加载更多

1. 配置页面的 json 文件
2. 代码中进行监听