【小程序开发】小程序的架构和配置

文章目录

• 【小程序开发】小程序的架构和配置
• 写在前面
• 一、小程序的架构模型
• 二、小程序代码构成
• • 2.1 JSON配置
  • 2.2 其他
• 三、配置文件
• • 3.1 全局配置文件
  • 3.2 页面配置文件
• 四、注册App实例
• • 4.1 App函数的参数
  • 4.2 判断打开的场景
  • 4.3 定义全局App的数据
• 五、注册Page实例
• • 5.1 Page函数的参数

写在前面

这里是前端程序员小张！

人海茫茫，感谢这一秒你看到这里。希望我的文章对你的有所帮助！

愿你在未来的日子，保持热爱，奔赴山海！

一、小程序的架构模型

• 小程序的宿主环境为微信客户端
  • 宿主环境执行小程序的各种文件：wxml文件、wxss文件、js文件
• 当小程序基于 WebView 环境下时，WebView 的 JS 逻辑、DOM 树创建、CSS 解析、样式计算、Layout、Paint (Composite) 都发生 在同一线程，在 WebView 上执行过多的 JS 逻辑可能阻塞渲染，导致界面卡顿。
• 以此为前提，小程序同时考虑了性能与安全，采用了目前称为「双线程模型」的架构。
• 双线程模型：
  • WXML模块和WXSS样式运行于渲染层，渲染层使用 WebView线程渲染（一个程序有多个页面，会使用多个 WebView的线程）。
  • JS脚本（app.js/home.js等）运行于逻辑层，逻辑层使用JsCore运行JS脚本。
  • 这两个线程都会经由微信客户端（Native）进行中转交互

二、小程序代码构成

默认创建的项目里生成了不同类型的文件：

• .json后缀的 JSON 配置文件
• .wxml 后缀的 WXML 模板文件
• .wxss 后缀的 WXSS 样式文件
• .js 后缀的 JS 脚本逻辑文件

2.1 JSON配置

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

• 小程序配置 app.json
  • app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
• 页面配置 page.json
  • 独立定义每个页面的一些属性，例如顶部颜色、是否允许下拉刷新等等。
• 工具配置 project.config.json
  • 项目配置文件, 比如项目名称、appid等；

2.2 其他

网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互，在小程序中

• WXML 充当的就是类似 HTML 的角色
• WXSS具有CSS大部分的特性
• 通过编写 JS 脚本文件来处理用户的操作

三、配置文件

3.1 全局配置文件

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置

• pages：页面路径列表
  • 用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息
  • 小程序中所有的页面都是必须在pages中进行注册的
• window：全局的默认窗口展示
  • 用户指定窗口如何展示，用于设置小程序的状态栏、导航条、标题、窗口背景色。
• tabBar：底部tab栏的表现
  • 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面

完整请参考官方文档：全局配置 | 微信开放文档 (qq.com)

3.2 页面配置文件

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

• 页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项

四、注册App实例

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

• 在注册时, 可以绑定对应的生命周期函数
• 在生命周期函数中, 执行对应的代码

4.1 App函数的参数

注册App时，我们一般会进行的操作是什么？

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

4.2 判断打开的场景

小程序的打开场景较多：

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

如何确定打开的场景？

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

4.3 定义全局App的数据

可以在Object中定义全局App的数据，定义的数据可以在其他任何页面中访问

globalData: {token: "",userInfo: {}}

五、注册Page实例

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

• 在注册时, 可以绑定初始化数据、生命周期回调、事件处理函数等。

5.1 Page函数的参数

页面的生命周期函数：