微信小程序 | 小程序配置和架构

🖥️ 微信小程序 专栏：小程序配置和架构
🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

✨ 个人主页：CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

---

目录

一、小程序的双线程模型

二、不同配置文件的区分

小程序的配置文件

三、全局配置文件app.json

全局app配置文件

四、页面配置文件page.json

页面page配置文件

五、注册App实例的操作

注册小程序 - App函数

App函数中的参数

作用一:判断用户打开场景

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

作用三: 生命周期函数

六、注册Page实例的操作

注册页面 - Page函数

注册页面时 做什么? 

Page页面的生命周期

上拉和下拉的监听

---

一、小程序的双线程模型

谁是小程序的宿主环境?  => 微信客户端

        宿主环境是为了执行小程序的各种文件:wxml文件 wxss文件 js文件

当小程序基于WebView环境下时 WebView的Js逻辑 DOM树创建 CSS解析 样式计算 Layout Paint(composite)都发生在同一线程,在WebView上执行过多的Js逻辑可能阻塞渲染 导致界面卡顿

以此为前提，小程序同时考虑了性能与安全，采用了目前称为「双线程模型」的架构。

双线程模型：

        WXML模块和WXSS样式运行于 渲染层，渲染层使用 WebView线程渲染（一个程序有多个页面，会使用多个 WebView的线程）。

        JS脚本（app/home.js等）运行于 逻辑层，逻辑层使 用JsCore运行JS脚本。

        这两个线程都会经由微信客户端（Native）进行中转交互。

二、不同配置文件的区分

小程序的配置文件

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

• 这样做可以更有利于我们的开发效率

• 可以保证开发出来的小程序的某些风格比较一致

• 如 导航栏 顶部TabBar栏 以及 页面路由

常见的配置文件有哪些?

• project.config.json => 项目配置文件

• sitemap.json => 小程序搜索相关

• app.json => 全局配置

• page.json => 页面配置

三、全局配置文件app.json

全局app配置文件

完整的可查看官方文档 =>  打开开发文档 => 框架 => 全局配置

属性	类型	必填	描述