Lyk-Blog

二、小程序的架构和配置

2022/9/8 微信小程序双线程模型配置文件区分全局配置app.json页面配置page.json

# 1、小程序的双线程模型

# 1.1.小程序的架构模型

  • 谁是小程序的宿主环境呢？微信客户端
    • 宿主环境为了执行小程序的各种文件：wxml文件、wxss文件、js文件
  • 当小程序基于 WebView 环境下时，WebView 的 JS 逻辑、DOM 树创建、CSS 解析、样式计算、Layout、Paint (Composite) 都发生在同一线程，在 WebView 上执行过多的 JS 逻辑可能阻塞渲染，导致界面卡顿。
  • 以此为前提，小程序同时考虑了性能与安全，采用了目前称为「双线程模型」的架构。
    • 双线程模型：

1d8ddd23115470aaf.png

  • 双线程模型：（以更多内存为前提，消耗更多的内存）
    • WXML模块和WXSS样式运行于 渲染层，渲染层使用WebView线程渲染（一个程序有多个页面，会使用多个WebView的线程）。
    • JS脚本（app.js/home.js等）运行于 逻辑层，逻辑层使用JsCore运行JS脚本。
    • 这两个线程都会经由微信客户端（Native）进行中转交互。
    • 补充：WebView的渲染还有有点类似于渲染网页的过程的
    • 现在看微信小程序文档看到了：在 WebView 渲染之外新增了一个渲染引擎 Skyline（当然现在还是处于Beta阶段）可以去了解了解，这让微信小程序更接近于原生App的体验：渲染引擎Skyline (opens new window)

29101ffd81f041f09.png

# 2、不同配置文件的区分

# 2.1.小程序的配置文件

  • 小程序的很多开发需求被规定在了配置文件中。

  • 为什么这样做呢?

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

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

    • project.config.json：项目配置文件, 比如项目名称、appid，基础库的版本等；project.config.json配置 (opens new window)
    • project.private.config.json：项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段（即 在两文件中有相同字段的情况下；project.private.config.json文件的优先级高于 project.config.json文件 的相同字段）
      • 举个例子：如你重新选择基础库后，会在此私有配置文件进行配置如："libVersion":"2.27.2"；从而优先于project.config.json中配置的基础库，但是project.config.json中的配置不会有变化；
      • 在多人开发同一个小程序的时候，开发人员在本地测试时难免有时候会选择不同基础库，为了维护多人开发使用同一基础库；所以出现了这个项目私有配置文件；不同开发人员改基础库版本，或者其他项目的配置项时，改的是他们自己的项目私有配置文件，并不会影响project.config.json文件【而这个项目私有配置文件我们一般会在.gitignore文件中设置忽略它的提交】
    • sitemap.json：小程序搜索相关的；sitemap.json配置 (opens new window) 有点类似于网页的SEO优化，让用户更容易搜索到
    • app.json：全局配置；
    • page.json：页面配置；

# 3、全局配置文件app.json

# 3.1.全局app配置文件

属性 类型 必填 描述
pages String[] 是 页面的路径列表
window Object 否 全局的默认窗口表现
tabBar Object 否 底部tab栏的表现
  • pages: 页面路径列表
    • 用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。
    • 小程序中所有的页面都是必须在pages中进行注册的。
  • window: 全局的默认窗口展示
    • 用户指定窗口如何展示, 其中还包含了很多其他的属性
  • tabBar: 底部tab栏的展示
    • 具体属性可以查看官方文档一一学习

# 3.2.全局配置案例实现

3.png

# 4、页面配置文件page.json

# 4.1.页面page配置文件

  • 每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。

4.png

# 5、注册App实例的操作

# 5.1.注册小程序 – App函数

  • 每个小程序都需要在 app.js 中调用 App 函数 注册小程序示例
  • 在注册时, 可以绑定对应的生命周期函数；
  • 在生命周期函数中, 执行对应的代码；
  • App函数 (opens new window)
  • 我们来思考：注册App时，我们一般会做什么呢？
    1. 判断小程序的进入场景
    2. 监听生命周期函数，在生命周期中执行对应的业务逻辑，比如在某个生命周期函数中进行登录操作或者请求网络数据；
    3. 因为App()实例只有一个，并且是全局共享的（单例对象），所以我们可以将一些共享数据放在这里；【然后可以通过getApp进行获取；getApp获取到小程序全局唯一的 App 实例。】

# 5.2.App函数的参数

5.png

# 5.3.作用一：判断打开场景

  • 小程序的打开场景较多：
  • 如何确定场景?
    • 在onLaunch和onShow生命周期回调函数中，会有options参数，其中有scene值；

6.png

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

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

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

7.png

# 5.5.作用三 – 生命周期函数

  • 在生命周期函数中，完成应用程序启动后的初始化操作
    • 比如登录操作（这个后续学习）；
    • 比如读取本地数据（类似于token，然后保存在全局方便使用）
    • 比如请求整个应用程序需要的数据；

8.png

# 6、注册Page实例的操作

# 6.1.注册页面 – Page函数

  • 小程序中的每个页面, 都有一个对应的js文件, 其中调用Page函数注册页面示例
  • 我们来思考：注册一个Page页面时，我们一般需要做什么呢？
    1. 在生命周期函数中发送网络请求，从服务器获取数据；
    2. 初始化一些数据，以方便被wxml引用展示；
    3. 监听wxml中的事件，绑定对应的事件函数；
    4. 其他一些监听（比如页面滚动、上拉刷新、下拉加载更多等）；

# 6.2.注册Page时做什么呢?

9.png

# 6.3.Page页面的生命周期

Page页面的生命周期 (opens new window)

10.png

# 6.4.上拉和下拉及页面滚动的监听

  • 监听页面的下拉刷新和上拉加载更多和 页面滚动(不需要配置页面的json文件)：
    • 步骤一：配置页面的json文件；
    • 步骤二：代码中进行监听；

11.png

最后更新时间: 2022/11/15, 15:33:04

三、小程序常见的内置组件

彩虹
周杰伦