6张图画出微信小程序架构设计与系统配置分析

大家好，欢迎来到IT知识分享网。

微信小程序采用组件化、模块化架构，包含视图层(WXML/WXSS)、逻辑层(JS)、配置层(JSON)、数据层。通过App和Page对象管理全局和页面状态，利用API实现网络请求、数据存储等功能。支持自定义组件和插件扩展，运行在微信客户端内。

肖哥弹架构 跟大家“弹弹” 小程序设计技巧，需要代码关注

欢迎 点赞，点赞，点赞。

关注公号Solomon肖哥弹架构获取更多精彩内容

历史热点文章

• 依赖倒置原则：支付网关设计应用案例
• Holder模式（Holder Pattern）：公司员工权限管理系统实战案例分析
• 一个项目代码讲清楚DO/PO/BO/AO/E/DTO/DAO/ POJO/VO
• 写代码总被Dis：5个项目案例带你掌握SOLID技巧,代码有架构风格
• 里氏替换原则在金融交易系统中的实践，再不懂你咬我

1、小程序的架构设计

1.1 框架设计

说明

• 视图层 (WXML) ：负责定义小程序的页面结构。
• 逻辑层 (JavaScript) ：处理页面逻辑，如事件响应、数据处理等。
• 配置层 (JSON) ：定义页面配置，如导航栏样式、窗口表现等。
• 数据层：管理数据状态，响应数据变化。
• 样式层 (WXSS) ：负责页面的样式设计，类似于 CSS。
• 组件层：包含可复用的自定义组件，封装视图和逻辑。
• 网络层 (APIs) ：使用微信提供的 API 进行网络请求、数据存储等操作。
• 框架层：提供小程序运行的基础框架支持。
• 宿主环境 (微信客户端) ：小程序运行的环境，提供必要的接口和能力。

1.2 框架分层设计

1. 视图层 (View Layer)

• WXML (WeiXin Markup Language)类似于 HTML，用于描述页面的结构。支持数据绑定和事件处理。
• WXSS (WeiXin Style Sheets)类似于 CSS，用于设置页面的样式。支持绝大部分 CSS 标准的特性。
• JSON Configuration页面的配置文件，用于设置页面的窗口表现、导航栏等。

2. 逻辑层 (Logic Layer

• JavaScript处理用户交互、数据请求、业务逻辑等。与视图层通过数据绑定进行通信。

3. 数据层 (Data Layer)

• Global Data存储全局数据，如用户信息、全局状态等。
• Page Data存储页面级别的数据，每个页面可以有自己的数据。

4. 网络层 (Network Layer)

• APIs微信小程序提供的 API，用于网络请求、文件操作、设备信息等。第三方服务 API，用于与后端服务进行数据交互。

5. 配置层 (Configuration Layer)

• App Configuration (app.json)定义小程序的全局配置，如页面路径、窗口表现、设置网络超时时间等。
• Page Configuration (*.json)每个页面的配置文件，用于覆盖全局配置或设置特定页面的属性。

6. 组件层 (Component Layer)

• Custom Components可复用的视图组件，封装了特定的视图和逻辑。可以跨页面使用，提高代码复用性。

7. 框架层 (Framework Layer)

• WeChat Framework微信提供的框架，包括视图渲染、事件处理、数据绑定等核心功能。

8. 宿主环境 (Host Environment)

• WeChat Client小程序运行的环境，提供必要的运行时支持和接口。

1.3 小程序加载与运行流程图

流程说明：

1. 开始：用户点击微信中的小程序图标或扫描小程序码。
2. 加载小程序：微信客户端开始加载小程序。
3. 初始化全局数据：执行 App 的 onLaunch 生命周期，进行全局数据初始化。
4. 记录错误日志：如果加载过程中出现错误，记录错误日志。
5. 加载页面：根据用户请求或路由配置加载特定页面。
6. 页面加载：执行页面的 onLoad 生命周期，进行页面数据初始化。
7. 页面显示：执行页面的 onShow 生命周期，页面显示给用户。
8. 页面准备完成：执行页面的 onReady 生命周期，页面第一次渲染完成。
9. 页面隐藏：执行页面的 onHide 生命周期，页面不可见。
10. 页面卸载：执行页面的 onUnload 生命周期，页面被卸载。
11. 下拉刷新：用户下拉页面，触发 onPullDownRefresh 事件。
12. 加载更多：用户触发页面底部，执行加载更多数据的逻辑。
13. 小程序显示：小程序显示在用户视野中，执行 App 的 onShow。
14. 小程序隐藏：小程序被切到后台，执行 App 的 onHide。
15. 小程序启动完成：小程序启动流程结束，等待用户交互。

1.4 小程序生命周期

流程说明：

• 开始：用户点击微信中的小程序图标或扫描小程序码。
• onLaunch：小程序启动时触发一次。
• onShow：小程序启动或进入前台显示时触发。
• onHide：小程序进入后台时触发。
• onError：小程序发生脚本错误或 API 调用失败时触发。
• onPageNotFound：小程序要打开的页面不存在时触发。
• 页面A / 页面B：示例页面的生命周期。onLoad：页面加载时触发。onShow：页面显示时触发。onReady：页面初次渲染完成时触发。onHide：页面隐藏时触发。onUnload：页面卸载时触发。onPullDownRefresh：页面下拉刷新时触发。onReachBottom：页面上拉触底时触发。

生命周期说明

小程序生命周期

1. onLaunch小程序启动时触发。一个小程序生命周期内只触发一次。
2. onShow小程序启动，或从后台进入前台显示时触发。
3. onHide小程序从前台进入后台时触发。
4. onError小程序发生脚本错误或 API 调用失败时触发。
5. onUnhandledRejection小程序有未处理的 Promise 拒绝时触发。
6. onPageNotFound小程序要打开的页面不存在时触发。

页面生命周期

每个页面也有自己的生命周期，包括：

1. onLoad页面加载时触发。每次打开页面都会触发。
2. onShow页面显示时触发。每次打开页面都会触发。
3. onReady页面初次渲染完成时触发。一个页面只会调用一次，之后做页面切换不会触发。
4. onHide页面隐藏时触发。
5. onUnload页面卸载时触发。
6. onPullDownRefresh触发下拉刷新时触发。
7. onReachBottom页面上拉触底时触发。
8. onTabItemTap点击 tab 时触发。
9. onShareAppMessage用户点击右上角分享按钮时触发。
10. onPageScroll页面滚动时触发。
11. onResize窗口尺寸变化时触发。
12. onBackPress监听用户点击左上角返回按钮时触发。
13. onNavigationBarButtonTap点击导航栏按钮时触发。
14. onNavigationBarSearchInputChanged导航栏搜索框输入内容变化时触发。
15. onNavigationBarSearchConfirm点击导航栏搜索按钮时触发。

1.5 小程序内部对象设计

图表说明：

• App 实例：代表小程序的全局实例，可以访问全局数据和方法。
• Page 实例：代表小程序的各个页面实例，可以访问页面数据和方法。
• 组件实例：代表自定义组件的实例，可以访问组件内部的数据和方法。
• 行为实例：代表组件的行为，可以被多个组件共享。
• wx 全局对象：提供了一系列 API，用于网络请求、数据存储、页面跳转等。
• LivePlayerContext、LivePusherContext、InnerAudioContext、CameraContext、VideoContext、MapContext：这些是小程序的多媒体和界面相关的上下文对象，用于控制相应的组件。
• Animation：用于创建和管理动画。
• CanvasContext：用于 canvas 绘图操作的上下文。
• SelectorQuery：用于查询页面中元素的布局和尺寸信息。
• wx.cloud：提供微信小程序云开发相关功能。
• wx.aider：提供 AI 助手相关接口。
• wx.worker：用于创建和运行小程序的 Web Worker。

1.6 小程序扩展性设计

图表说明：

• App 实例：小程序的全局实例，负责全局状态和逻辑。
• Page 实例：页面实例，管理页面状态和逻辑。
• 自定义组件：开发者可以创建自定义组件，实现代码复用和模块化开发。
• 插件系统：小程序支持插件系统，允许开发者使用或开发插件来扩展功能。
• 模块化开发：小程序支持模块化开发，通过模块划分不同的功能区域。

自定义组件：

• 子组件：自定义组件可以包含子组件，实现更复杂的功能。
• 行为：组件可以包含行为（Behavior），实现可复用的功能逻辑。

插件系统：

• 服务：插件可以提供服务，供小程序调用。

模块化开发：

• 页面集合：模块可以包含多个页面，组织相关功能。
• 组件集合：模块可以包含多个组件，实现功能复用。
• 工具函数：模块可以包含工具函数，提供通用功能。

2、全局配置案例

微信小程序的全局配置文件 app.json 用于定义整个小程序的全局行为和外观。它的作用主要包括以下几个方面：

1. 页面路由：通过 pages 数组定义小程序中所有页面的路径，这是小程序的路由系统的基础，决定了用户可以访问哪些页面。
2. 窗口表现： window 对象用于设置小程序的窗口表现，如导航栏标题、背景色、文字颜色等，这些配置影响用户的视觉体验。
3. 底部 tab 栏：如果小程序有底部 tab 栏，可以通过 tabBar 对象来配置其样式和行为，包括颜色、选中状态、图标等。
4. 网络超时： networkTimeout 对象定义了小程序发起网络请求时的超时时间，这有助于控制网络请求的响应时间，提高用户体验。
5. 调试模式： debug 布尔值用于控制是否开启调试模式，开启后可以在开发者工具中查看更多的调试信息。
6. sitemap 配置： sitemapLocation 指定了 sitemap.json 文件的路径，sitemap 文件用于配置小程序的页面收录情况，影响小程序在微信搜索中的展示。
7. 权限配置： permission 对象定义了小程序需要使用的用户权限，如获取用户地理位置等。
8. 跳转小程序： navigateToMiniProgramAppIdList 数组定义了允许跳转到的其他小程序的 appId 列表。
9. 云开发配置： cloud 对象用于配置小程序使用的云开发环境，包括环境 ID 和是否追踪用户。
10. 插件配置： plugins 对象用于声明小程序所使用的插件。
11. 工作线程： workers 对象定义了小程序中使用的工作线程，用于执行后台任务。
12. 编译模式： style 用于指定小程序的编译模式，如使用新版的框架。
13. 网站地图： sitemap 对象定义了小程序的网站地图规则，影响小程序在微信搜索中的展示。
14. 性能优化： optimization 对象用于开启性能优化选项，如分包加载和摇树优化。
15. 小程序根目录： miniprogramRoot 指定小程序的根目录。
16. 显示模式： display 定义了独立运行时的显示模式。
17. 后台运行模式： requiredBackgroundModes 数组定义了小程序需要在后台运行的模式，如音频播放。
18. 预加载规则： preloadRule 对象定义了页面预加载的规则，可以优化页面加载速度。

全局配置代码

{ // 项目名称，仅在开发者工具中显示 "name": "项目名称", // 项目描述，仅在开发者工具中显示 "description": "项目描述", // 项目版本 "version": "1.0.0", // 设置 "setting": { // 是否进行 URL 校验，防止网页跳转 "urlCheck": true, // 是否开启 ES6 转 ES5 "es6": false, // 是否开启增强编译 "enhance": false, // 是否开启对 JSONP 的支持 "postJsonp": false, // 是否在 WXML 面板中显示阴影节点 "showShadowRootInWxmlPanel": true, // 是否使用多框架运行时 "useMultiFrameRuntime": false, // 是否使用 API 钩子 "useApiHook": true, // 是否使用 API 服务宿主进程 "useApiHostProcess": false, // 是否使用扩展库 "useExtendedLib": false, // 是否使用核心框架 "useCoreFrame": false, // 是否使用 WebView "useWebView": false, // 是否使用 Flex 布局 "useFlexLayout": false }, // 页面路径列表 "pages": [ "pages/index/index", "pages/logs/logs", "pages/user/user" ], // 窗口表现 "window": { // 导航栏标题 "navigationBarTitleText": "小程序标题", // 导航栏标题颜色，仅支持 black/white "navigationBarTextStyle": "black", // 导航栏背景色 "navigationBarBackgroundColor": "#ffffff", // 窗口的背景色 "backgroundColor": "#eeeeee", // 窗口的背景文字样式，仅支持 dark/light "backgroundTextStyle": "light", // 是否开启下拉刷新，必须与页面 onPullDownRefresh 方法结合使用 "enablePullDownRefresh": true, // 页面上拉触底事件触发时距页面底部的距离 "onReachBottomDistance": 50 }, // tabBar 配置 "tabBar": { // tab 的整体样式 "color": "#7A7E83", "selectedColor": "#3cc51f", "backgroundColor": "#ffffff", "borderStyle": "black", "position": "bottom", // tab 的列表，表示 tab 的顺序 "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "icons/index.png", "selectedIconPath": "icons/index-active.png" }, { "pagePath": "pages/user/user", "text": "我的", "iconPath": "icons/user.png", "selectedIconPath": "icons/user-active.png" } ] }, // 网络超时时间 "networkTimeout": { "request": 6000, "downloadFile": 60000, "uploadFile": 60000 }, // 是否开启 debug 模式 "debug": false, // 指定 sitemap.json 的路径 "sitemapLocation": "sitemap.json", // 权限设置 "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } }, // 需要跳转的小程序 appId 列表 "navigateToMiniProgramAppIdList": [ "wx", "wx0" ], // 云开发配置 "cloud": { "env": "your-env-id", "traceUser": true }, // 插件配置 "plugins": { "myPlugin": { "version": "1.0.0", "provider": "wxxxxxxxxx" } }, // 工作线程配置 "workers": { "worker1": { "workerSrc": "workers/worker1/index.js" } }, // 使用的编译模式 "style": "v2", // 网站地图配置 "sitemap": { "rules": [ { "path": "pages/index/index", "style": "default" }, { "path": "pages/user/user", "style": "default" } ] }, // 性能优化配置 "optimization": { "subPackages": true, "treeShaking": true }, // 小程序根目录 "miniprogramRoot": "pages/", // 独立运行时的显示模式 "display": "standalone", // 需要在后台运行的模式 "requiredBackgroundModes": [ "audio" ], // 预加载规则 "preloadRule": { "pages/index/index": { "network": "all", "navigateTo": "none" }, "pages/logs/logs": { "network": "none", "navigateTo": "all" } } }

3、页面配置案例

页面内的配置，通常在每个页面的 .json 配置文件中进行设置，它允许开发者对单个页面的行为和表现进行精细控制。页面配置的作用主要包括：

1. 覆盖全局设置：页面配置可以覆盖在全局 app.json 中定义的设置，使得每个页面可以有自己的导航栏样式、背景颜色、下拉刷新等特性。
2. 控制页面表现：通过配置项如 navigationBarTitleText、 navigationBarBackgroundColor 等，可以定制页面的 UI 表现，包括导航栏的标题、颜色、背景等。
3. 定义页面行为：页面配置中可以定义页面的滚动行为、是否支持下拉刷新、上拉加载更多等交互行为。
4. 事件处理：通过配置项如 onLoad、 onShow 等，可以为页面指定生命周期函数，控制页面在不同状态下的行为。
5. 自定义导航栏：如果设置 navigationStyle 为 custom，可以自定义整个导航栏的结构和样式。
6. 组件使用：通过 usingComponents 配置项，可以在页面中声明和使用自定义组件。
7. 性能优化：某些配置项如 spliteLine、 gestureBack 等，可以用来优化页面的性能和用户体验。
8. 页面导航：配置项如 showTabBar 和 hideNavigationBar 可以控制页面内是否显示 tabBar 或者是否隐藏导航栏，这对于特定的视图或布局非常有用。
9. 页面方向：通过 pageOrientation 配置项，可以设置页面是竖屏还是横屏显示。
10. 页面间跳转：配置项如 enableAutoBackToTabBar 可以控制页面跳转行为，例如在非 tabBar 页面返回时自动回到 tabBar。
11. 页面加载策略：配置项如 virtualHost 和 virtualHostRoot 可以用于控制页面的加载策略，提高页面加载效率。

页面配置代码

{ // 页面标题，显示在导航栏上 "navigationBarTitleText": "页面标题", // 导航栏标题颜色，仅支持 'black' 或 'white' "navigationBarTextStyle": "black", // 导航栏背景颜色 "navigationBarBackgroundColor": "#ffffff", // 页面背景颜色 "backgroundColor": "#eeeeee", // 页面背景文字样式，仅支持 'dark' 或 'light' "backgroundTextStyle": "light", // 是否开启当前页面的下拉刷新。开启后，需要在页面内处理 onPullDownRefresh 事件 "enablePullDownRefresh": true, // 页面上拉触底事件触发时距页面底部的距离，单位为 px "onReachBottomDistance": 50, // 自定义导航栏样式，仅支持 'custom' "navigationStyle": "custom", // 是否禁止页面滚动 "disableScroll": true, // 是否显示滚动条，仅在 disableScroll 为 true 时生效 "scrollIndicator": true, // 页面滚动时，设置滚动到的位置，单位为 px "scrollTop": 0, // 滚动距离顶部多少距离时触发 onScrollToUpper 事件 "scrollTopThreshold": 50, // 用户点击右上角分享按钮时触发的事件处理函数 "onShareAppMessage": "onShareAppMessage", // 用户点击右上角分享到朋友圈按钮时触发的事件处理函数 "onShareTimeline": "onShareTimeline", // 页面隐藏时触发的事件处理函数 "onPageHide": "onPageHide", // 页面显示时触发的事件处理函数 "onPageShow": "onPageShow", // 页面加载时触发的事件处理函数 "onLoad": "onLoad", // 页面初次渲染完成时触发的事件处理函数 "onReady": "onReady", // 页面显示/切前台时触发的事件处理函数 "onShow": "onShow", // 页面卸载时触发的事件处理函数 "onUnload": "onUnload", // 下拉刷新时触发的事件处理函数 "onPullDownRefresh": "onPullDownRefresh", // 页面上拉触底时触发的事件处理函数 "onReachBottom": "onReachBottom", // 点击 tab 时触发的事件处理函数 "onTabItemTap": "onTabItemTap", // 是否显示顶部分割线 "spliteLine": "SpliteLine", // 自定义组件的声明 "usingComponents": { "component-name": "path/to/component" }, // 页面的编译模式，'v2' 表示新版编译模式 "style": "v2", // 是否显示导航栏底部分割线 "navigationBarSpliteLine": "none", // 导航栏标题图片路径 "titleImage": "path/to/image.png", // 导航栏标题文本宽度 "titleTextWidth": 200, // 导航栏标题颜色 "titleTextColor": "#000000", // 是否显示导航栏标题加载 "showTitleLoading": true, // 是否显示导航栏加载 "showNavigationBarLoading": true, // 是否显示 tab "showTabBar": true, // 是否隐藏导航栏 "hideNavigationBar": true, // 导航栏透明设置，'auto' 表示根据页面背景色自动判断 "transparentTitle": "auto", // 自定义导航栏样式 "custom": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black" }, // 是否禁止滑动后退 "disableSwipeBack": true, // 是否开启自动返回到 tabBar "enableAutoBackToTabBar": true, // 是否开启虚拟化 "virtualHost": true, // 虚拟化根节点 "virtualHostRoot": "pages/index/index", // 页面的方向，'portrait' 表示竖屏 "pageOrientation": "portrait", // 是否启用手势返回 "gestureBack": true }

微信小程序采用组件化、模块化架构，包含视图层(WXML/WXSS)、逻辑层(JS)、配置层(JSON)、数据层。通过App和Page对象管理全局和页面状态，利用API实现网络请求、数据存储等功能。支持自定义组件和插件扩展，运行在微信客户端内。

肖哥弹架构 跟大家“弹弹” 小程序设计技巧，需要代码关注

欢迎 点赞，点赞，点赞。

关注公号Solomon肖哥弹架构获取更多精彩内容

历史热点文章

• 依赖倒置原则：支付网关设计应用案例
• Holder模式（Holder Pattern）：公司员工权限管理系统实战案例分析
• 一个项目代码讲清楚DO/PO/BO/AO/E/DTO/DAO/ POJO/VO
• 写代码总被Dis：5个项目案例带你掌握SOLID技巧,代码有架构风格
• 里氏替换原则在金融交易系统中的实践，再不懂你咬我

1、小程序的架构设计

1.1 框架设计

说明

• 视图层 (WXML) ：负责定义小程序的页面结构。
• 逻辑层 (JavaScript) ：处理页面逻辑，如事件响应、数据处理等。
• 配置层 (JSON) ：定义页面配置，如导航栏样式、窗口表现等。
• 数据层：管理数据状态，响应数据变化。
• 样式层 (WXSS) ：负责页面的样式设计，类似于 CSS。
• 组件层：包含可复用的自定义组件，封装视图和逻辑。
• 网络层 (APIs) ：使用微信提供的 API 进行网络请求、数据存储等操作。
• 框架层：提供小程序运行的基础框架支持。
• 宿主环境 (微信客户端) ：小程序运行的环境，提供必要的接口和能力。

1.2 框架分层设计

1. 视图层 (View Layer)

• WXML (WeiXin Markup Language)类似于 HTML，用于描述页面的结构。支持数据绑定和事件处理。
• WXSS (WeiXin Style Sheets)类似于 CSS，用于设置页面的样式。支持绝大部分 CSS 标准的特性。
• JSON Configuration页面的配置文件，用于设置页面的窗口表现、导航栏等。

2. 逻辑层 (Logic Layer

• JavaScript处理用户交互、数据请求、业务逻辑等。与视图层通过数据绑定进行通信。

3. 数据层 (Data Layer)

• Global Data存储全局数据，如用户信息、全局状态等。
• Page Data存储页面级别的数据，每个页面可以有自己的数据。

4. 网络层 (Network Layer)

• APIs微信小程序提供的 API，用于网络请求、文件操作、设备信息等。第三方服务 API，用于与后端服务进行数据交互。

5. 配置层 (Configuration Layer)

• App Configuration (app.json)定义小程序的全局配置，如页面路径、窗口表现、设置网络超时时间等。
• Page Configuration (*.json)每个页面的配置文件，用于覆盖全局配置或设置特定页面的属性。

6. 组件层 (Component Layer)

• Custom Components可复用的视图组件，封装了特定的视图和逻辑。可以跨页面使用，提高代码复用性。

7. 框架层 (Framework Layer)

• WeChat Framework微信提供的框架，包括视图渲染、事件处理、数据绑定等核心功能。

8. 宿主环境 (Host Environment)

• WeChat Client小程序运行的环境，提供必要的运行时支持和接口。

1.3 小程序加载与运行流程图

流程说明：

1. 开始：用户点击微信中的小程序图标或扫描小程序码。
2. 加载小程序：微信客户端开始加载小程序。
3. 初始化全局数据：执行 App 的 onLaunch 生命周期，进行全局数据初始化。
4. 记录错误日志：如果加载过程中出现错误，记录错误日志。
5. 加载页面：根据用户请求或路由配置加载特定页面。
6. 页面加载：执行页面的 onLoad 生命周期，进行页面数据初始化。
7. 页面显示：执行页面的 onShow 生命周期，页面显示给用户。
8. 页面准备完成：执行页面的 onReady 生命周期，页面第一次渲染完成。
9. 页面隐藏：执行页面的 onHide 生命周期，页面不可见。
10. 页面卸载：执行页面的 onUnload 生命周期，页面被卸载。
11. 下拉刷新：用户下拉页面，触发 onPullDownRefresh 事件。
12. 加载更多：用户触发页面底部，执行加载更多数据的逻辑。
13. 小程序显示：小程序显示在用户视野中，执行 App 的 onShow。
14. 小程序隐藏：小程序被切到后台，执行 App 的 onHide。
15. 小程序启动完成：小程序启动流程结束，等待用户交互。

1.4 小程序生命周期

流程说明：

• 开始：用户点击微信中的小程序图标或扫描小程序码。
• onLaunch：小程序启动时触发一次。
• onShow：小程序启动或进入前台显示时触发。
• onHide：小程序进入后台时触发。
• onError：小程序发生脚本错误或 API 调用失败时触发。
• onPageNotFound：小程序要打开的页面不存在时触发。
• 页面A / 页面B：示例页面的生命周期。onLoad：页面加载时触发。onShow：页面显示时触发。onReady：页面初次渲染完成时触发。onHide：页面隐藏时触发。onUnload：页面卸载时触发。onPullDownRefresh：页面下拉刷新时触发。onReachBottom：页面上拉触底时触发。

生命周期说明

小程序生命周期

1. onLaunch小程序启动时触发。一个小程序生命周期内只触发一次。
2. onShow小程序启动，或从后台进入前台显示时触发。
3. onHide小程序从前台进入后台时触发。
4. onError小程序发生脚本错误或 API 调用失败时触发。
5. onUnhandledRejection小程序有未处理的 Promise 拒绝时触发。
6. onPageNotFound小程序要打开的页面不存在时触发。

页面生命周期

每个页面也有自己的生命周期，包括：

1. onLoad页面加载时触发。每次打开页面都会触发。
2. onShow页面显示时触发。每次打开页面都会触发。
3. onReady页面初次渲染完成时触发。一个页面只会调用一次，之后做页面切换不会触发。
4. onHide页面隐藏时触发。
5. onUnload页面卸载时触发。
6. onPullDownRefresh触发下拉刷新时触发。
7. onReachBottom页面上拉触底时触发。
8. onTabItemTap点击 tab 时触发。
9. onShareAppMessage用户点击右上角分享按钮时触发。
10. onPageScroll页面滚动时触发。
11. onResize窗口尺寸变化时触发。
12. onBackPress监听用户点击左上角返回按钮时触发。
13. onNavigationBarButtonTap点击导航栏按钮时触发。
14. onNavigationBarSearchInputChanged导航栏搜索框输入内容变化时触发。
15. onNavigationBarSearchConfirm点击导航栏搜索按钮时触发。

1.5 小程序内部对象设计

图表说明：

• App 实例：代表小程序的全局实例，可以访问全局数据和方法。
• Page 实例：代表小程序的各个页面实例，可以访问页面数据和方法。
• 组件实例：代表自定义组件的实例，可以访问组件内部的数据和方法。
• 行为实例：代表组件的行为，可以被多个组件共享。
• wx 全局对象：提供了一系列 API，用于网络请求、数据存储、页面跳转等。
• LivePlayerContext、LivePusherContext、InnerAudioContext、CameraContext、VideoContext、MapContext：这些是小程序的多媒体和界面相关的上下文对象，用于控制相应的组件。
• Animation：用于创建和管理动画。
• CanvasContext：用于 canvas 绘图操作的上下文。
• SelectorQuery：用于查询页面中元素的布局和尺寸信息。
• wx.cloud：提供微信小程序云开发相关功能。
• wx.aider：提供 AI 助手相关接口。
• wx.worker：用于创建和运行小程序的 Web Worker。

1.6 小程序扩展性设计

图表说明：

• App 实例：小程序的全局实例，负责全局状态和逻辑。
• Page 实例：页面实例，管理页面状态和逻辑。
• 自定义组件：开发者可以创建自定义组件，实现代码复用和模块化开发。
• 插件系统：小程序支持插件系统，允许开发者使用或开发插件来扩展功能。
• 模块化开发：小程序支持模块化开发，通过模块划分不同的功能区域。

自定义组件：

• 子组件：自定义组件可以包含子组件，实现更复杂的功能。
• 行为：组件可以包含行为（Behavior），实现可复用的功能逻辑。

插件系统：

• 服务：插件可以提供服务，供小程序调用。

模块化开发：

• 页面集合：模块可以包含多个页面，组织相关功能。
• 组件集合：模块可以包含多个组件，实现功能复用。
• 工具函数：模块可以包含工具函数，提供通用功能。

2、全局配置案例

微信小程序的全局配置文件 app.json 用于定义整个小程序的全局行为和外观。它的作用主要包括以下几个方面：

1. 页面路由：通过 pages 数组定义小程序中所有页面的路径，这是小程序的路由系统的基础，决定了用户可以访问哪些页面。
2. 窗口表现： window 对象用于设置小程序的窗口表现，如导航栏标题、背景色、文字颜色等，这些配置影响用户的视觉体验。
3. 底部 tab 栏：如果小程序有底部 tab 栏，可以通过 tabBar 对象来配置其样式和行为，包括颜色、选中状态、图标等。
4. 网络超时： networkTimeout 对象定义了小程序发起网络请求时的超时时间，这有助于控制网络请求的响应时间，提高用户体验。
5. 调试模式： debug 布尔值用于控制是否开启调试模式，开启后可以在开发者工具中查看更多的调试信息。
6. sitemap 配置： sitemapLocation 指定了 sitemap.json 文件的路径，sitemap 文件用于配置小程序的页面收录情况，影响小程序在微信搜索中的展示。
7. 权限配置： permission 对象定义了小程序需要使用的用户权限，如获取用户地理位置等。
8. 跳转小程序： navigateToMiniProgramAppIdList 数组定义了允许跳转到的其他小程序的 appId 列表。
9. 云开发配置： cloud 对象用于配置小程序使用的云开发环境，包括环境 ID 和是否追踪用户。
10. 插件配置： plugins 对象用于声明小程序所使用的插件。
11. 工作线程： workers 对象定义了小程序中使用的工作线程，用于执行后台任务。
12. 编译模式： style 用于指定小程序的编译模式，如使用新版的框架。
13. 网站地图： sitemap 对象定义了小程序的网站地图规则，影响小程序在微信搜索中的展示。
14. 性能优化： optimization 对象用于开启性能优化选项，如分包加载和摇树优化。
15. 小程序根目录： miniprogramRoot 指定小程序的根目录。
16. 显示模式： display 定义了独立运行时的显示模式。
17. 后台运行模式： requiredBackgroundModes 数组定义了小程序需要在后台运行的模式，如音频播放。
18. 预加载规则： preloadRule 对象定义了页面预加载的规则，可以优化页面加载速度。

全局配置代码

{ // 项目名称，仅在开发者工具中显示 "name": "项目名称", // 项目描述，仅在开发者工具中显示 "description": "项目描述", // 项目版本 "version": "1.0.0", // 设置 "setting": { // 是否进行 URL 校验，防止网页跳转 "urlCheck": true, // 是否开启 ES6 转 ES5 "es6": false, // 是否开启增强编译 "enhance": false, // 是否开启对 JSONP 的支持 "postJsonp": false, // 是否在 WXML 面板中显示阴影节点 "showShadowRootInWxmlPanel": true, // 是否使用多框架运行时 "useMultiFrameRuntime": false, // 是否使用 API 钩子 "useApiHook": true, // 是否使用 API 服务宿主进程 "useApiHostProcess": false, // 是否使用扩展库 "useExtendedLib": false, // 是否使用核心框架 "useCoreFrame": false, // 是否使用 WebView "useWebView": false, // 是否使用 Flex 布局 "useFlexLayout": false }, // 页面路径列表 "pages": [ "pages/index/index", "pages/logs/logs", "pages/user/user" ], // 窗口表现 "window": { // 导航栏标题 "navigationBarTitleText": "小程序标题", // 导航栏标题颜色，仅支持 black/white "navigationBarTextStyle": "black", // 导航栏背景色 "navigationBarBackgroundColor": "#ffffff", // 窗口的背景色 "backgroundColor": "#eeeeee", // 窗口的背景文字样式，仅支持 dark/light "backgroundTextStyle": "light", // 是否开启下拉刷新，必须与页面 onPullDownRefresh 方法结合使用 "enablePullDownRefresh": true, // 页面上拉触底事件触发时距页面底部的距离 "onReachBottomDistance": 50 }, // tabBar 配置 "tabBar": { // tab 的整体样式 "color": "#7A7E83", "selectedColor": "#3cc51f", "backgroundColor": "#ffffff", "borderStyle": "black", "position": "bottom", // tab 的列表，表示 tab 的顺序 "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "icons/index.png", "selectedIconPath": "icons/index-active.png" }, { "pagePath": "pages/user/user", "text": "我的", "iconPath": "icons/user.png", "selectedIconPath": "icons/user-active.png" } ] }, // 网络超时时间 "networkTimeout": { "request": 6000, "downloadFile": 60000, "uploadFile": 60000 }, // 是否开启 debug 模式 "debug": false, // 指定 sitemap.json 的路径 "sitemapLocation": "sitemap.json", // 权限设置 "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } }, // 需要跳转的小程序 appId 列表 "navigateToMiniProgramAppIdList": [ "wx", "wx0" ], // 云开发配置 "cloud": { "env": "your-env-id", "traceUser": true }, // 插件配置 "plugins": { "myPlugin": { "version": "1.0.0", "provider": "wxxxxxxxxx" } }, // 工作线程配置 "workers": { "worker1": { "workerSrc": "workers/worker1/index.js" } }, // 使用的编译模式 "style": "v2", // 网站地图配置 "sitemap": { "rules": [ { "path": "pages/index/index", "style": "default" }, { "path": "pages/user/user", "style": "default" } ] }, // 性能优化配置 "optimization": { "subPackages": true, "treeShaking": true }, // 小程序根目录 "miniprogramRoot": "pages/", // 独立运行时的显示模式 "display": "standalone", // 需要在后台运行的模式 "requiredBackgroundModes": [ "audio" ], // 预加载规则 "preloadRule": { "pages/index/index": { "network": "all", "navigateTo": "none" }, "pages/logs/logs": { "network": "none", "navigateTo": "all" } } }

3、页面配置案例

页面内的配置，通常在每个页面的 .json 配置文件中进行设置，它允许开发者对单个页面的行为和表现进行精细控制。页面配置的作用主要包括：

1. 覆盖全局设置：页面配置可以覆盖在全局 app.json 中定义的设置，使得每个页面可以有自己的导航栏样式、背景颜色、下拉刷新等特性。
2. 控制页面表现：通过配置项如 navigationBarTitleText、 navigationBarBackgroundColor 等，可以定制页面的 UI 表现，包括导航栏的标题、颜色、背景等。
3. 定义页面行为：页面配置中可以定义页面的滚动行为、是否支持下拉刷新、上拉加载更多等交互行为。
4. 事件处理：通过配置项如 onLoad、 onShow 等，可以为页面指定生命周期函数，控制页面在不同状态下的行为。
5. 自定义导航栏：如果设置 navigationStyle 为 custom，可以自定义整个导航栏的结构和样式。
6. 组件使用：通过 usingComponents 配置项，可以在页面中声明和使用自定义组件。
7. 性能优化：某些配置项如 spliteLine、 gestureBack 等，可以用来优化页面的性能和用户体验。
8. 页面导航：配置项如 showTabBar 和 hideNavigationBar 可以控制页面内是否显示 tabBar 或者是否隐藏导航栏，这对于特定的视图或布局非常有用。
9. 页面方向：通过 pageOrientation 配置项，可以设置页面是竖屏还是横屏显示。
10. 页面间跳转：配置项如 enableAutoBackToTabBar 可以控制页面跳转行为，例如在非 tabBar 页面返回时自动回到 tabBar。
11. 页面加载策略：配置项如 virtualHost 和 virtualHostRoot 可以用于控制页面的加载策略，提高页面加载效率。

页面配置代码

{ // 页面标题，显示在导航栏上 "navigationBarTitleText": "页面标题", // 导航栏标题颜色，仅支持 'black' 或 'white' "navigationBarTextStyle": "black", // 导航栏背景颜色 "navigationBarBackgroundColor": "#ffffff", // 页面背景颜色 "backgroundColor": "#eeeeee", // 页面背景文字样式，仅支持 'dark' 或 'light' "backgroundTextStyle": "light", // 是否开启当前页面的下拉刷新。开启后，需要在页面内处理 onPullDownRefresh 事件 "enablePullDownRefresh": true, // 页面上拉触底事件触发时距页面底部的距离，单位为 px "onReachBottomDistance": 50, // 自定义导航栏样式，仅支持 'custom' "navigationStyle": "custom", // 是否禁止页面滚动 "disableScroll": true, // 是否显示滚动条，仅在 disableScroll 为 true 时生效 "scrollIndicator": true, // 页面滚动时，设置滚动到的位置，单位为 px "scrollTop": 0, // 滚动距离顶部多少距离时触发 onScrollToUpper 事件 "scrollTopThreshold": 50, // 用户点击右上角分享按钮时触发的事件处理函数 "onShareAppMessage": "onShareAppMessage", // 用户点击右上角分享到朋友圈按钮时触发的事件处理函数 "onShareTimeline": "onShareTimeline", // 页面隐藏时触发的事件处理函数 "onPageHide": "onPageHide", // 页面显示时触发的事件处理函数 "onPageShow": "onPageShow", // 页面加载时触发的事件处理函数 "onLoad": "onLoad", // 页面初次渲染完成时触发的事件处理函数 "onReady": "onReady", // 页面显示/切前台时触发的事件处理函数 "onShow": "onShow", // 页面卸载时触发的事件处理函数 "onUnload": "onUnload", // 下拉刷新时触发的事件处理函数 "onPullDownRefresh": "onPullDownRefresh", // 页面上拉触底时触发的事件处理函数 "onReachBottom": "onReachBottom", // 点击 tab 时触发的事件处理函数 "onTabItemTap": "onTabItemTap", // 是否显示顶部分割线 "spliteLine": "SpliteLine", // 自定义组件的声明 "usingComponents": { "component-name": "path/to/component" }, // 页面的编译模式，'v2' 表示新版编译模式 "style": "v2", // 是否显示导航栏底部分割线 "navigationBarSpliteLine": "none", // 导航栏标题图片路径 "titleImage": "path/to/image.png", // 导航栏标题文本宽度 "titleTextWidth": 200, // 导航栏标题颜色 "titleTextColor": "#000000", // 是否显示导航栏标题加载 "showTitleLoading": true, // 是否显示导航栏加载 "showNavigationBarLoading": true, // 是否显示 tab "showTabBar": true, // 是否隐藏导航栏 "hideNavigationBar": true, // 导航栏透明设置，'auto' 表示根据页面背景色自动判断 "transparentTitle": "auto", // 自定义导航栏样式 "custom": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black" }, // 是否禁止滑动后退 "disableSwipeBack": true, // 是否开启自动返回到 tabBar "enableAutoBackToTabBar": true, // 是否开启虚拟化 "virtualHost": true, // 虚拟化根节点 "virtualHostRoot": "pages/index/index", // 页面的方向，'portrait' 表示竖屏 "pageOrientation": "portrait", // 是否启用手势返回 "gestureBack": true }