6张丹青出微信小轨范架构设计与系统设备分析

微信小程序采取组件化、模块化架构，包含视图层(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 LayerJavaScript处理用户交互、数据要求、业务逻辑等。
与视图层通过数据绑定进行通信。
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 小程序加载与运行流程图

流程解释：开始：用户点击微信中的小程序图标或扫描小程序码。
加载小程序：微信客户端开始加载小程序。
初始化全局数据：实行 App 的 onLaunch 生命周期，进行全局数据初始化。
记录缺点日志：如果加载过程中涌现缺点，记录缺点日志。
加载页面：根据用户要求或路由配置加载特定页面。
页面加载：实行页面的 onLoad 生命周期，进行页面数据初始化。
页面显示：实行页面的 onShow 生命周期，页面显示给用户。
页面准备完成：实行页面的 onReady 生命周期，页面第一次渲染完成。
页面隐蔽：实行页面的 onHide 生命周期，页面不可见。
页面卸载：实行页面的 onUnload 生命周期，页面被卸载。
下拉刷新：用户下拉页面，触发 onPullDownRefresh 事宜。
加载更多：用户触发页面底部，实行加载更多数据的逻辑。
小程序显示：小程序显示在用户视野中，实行 App 的 onShow。
小程序隐蔽：小程序被切到后台，实行 App 的 onHide。
小程序启动完成：小程序启动流程结束，等待用户交互。
1.4 小程序生命周期

流程解释：开始：用户点击微信中的小程序图标或扫描小程序码。
onLaunch：小程序启动时触发一次。
onShow：小程序启动或进入前台显示时触发。
onHide：小程序进入后台时触发。
onError：小程序发生脚本缺点或 API 调用失落败时触发。
onPageNotFound：小程序要打开的页面不存在时触发。
页面A / 页面B：示例页面的生命周期。
onLoad：页面加载时触发。
onShow：页面显示时触发。
onReady：页面初次渲染完成时触发。
onHide：页面隐蔽时触发。
onUnload：页面卸载时触发。
onPullDownRefresh：页面下拉刷新时触发。
onReachBottom：页面上拉触底时触发。
生命周期解释小程序生命周期onLaunch小程序启动时触发。
一个小程序生命周期内只触发一次。
onShow小程序启动，或从后台进入前台显示时触发。
onHide小程序从前台进入后台时触发。
onError小程序发生脚本缺点或 API 调用失落败时触发。
onUnhandledRejection小程序有未处理的 Promise 谢绝时触发。
onPageNotFound小程序要打开的页面不存在时触发。
页面生命周期

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

onLoad页面加载时触发。
每次打开页面都会触发。
onShow页面显示时触发。
每次打开页面都会触发。
onReady页面初次渲染完成时触发。
一个页面只会调用一次，之后做页面切换不会触发。
onHide页面隐蔽时触发。
onUnload页面卸载时触发。
onPullDownRefresh触发下拉刷新时触发。
onReachBottom页面上拉触底时触发。
onTabItemTap点击 tab 时触发。
onShareAppMessage用户点击右上角分享按钮时触发。
onPageScroll页面滚动时触发。
onResize窗口尺寸变革时触发。
onBackPress监听用户点击左上角返回按钮时触发。
onNavigationBarButtonTap点击导航栏按钮时触发。
onNavigationBarSearchInputChanged导航栏搜索框输入内容变革时触发。
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 用于定义全体小程序的全局行为和外不雅观。
它的浸染紧张包括以下几个方面：

页面路由：通过 pages 数组定义小程序中所有页面的路径，这是小程序的路由系统的根本，决定了用户可以访问哪些页面。
窗口表现： window 工具用于设置小程序的窗口表现，如导航栏标题、背景色、笔墨颜色等，这些配置影响用户的视觉体验。
底部 tab 栏：如果小程序有底部 tab 栏，可以通过 tabBar 工具来配置其样式和行为，包括颜色、选中状态、图标等。
网络超时： networkTimeout 工具定义了小程序发起网络要求时的超时时间，这有助于掌握网络要求的相应韶光，提高用户体验。
调试模式： debug 布尔值用于掌握是否开启调试模式，开启后可以在开拓者工具中查看更多的调试信息。
sitemap 配置： sitemapLocation 指定了 sitemap.json 文件的路径，sitemap 文件用于配置小程序的页面收录情形，影响小程序在微信搜索中的展示。
权限配置： permission 工具定义了小程序须要利用的用户权限，如获取用户地理位置等。
跳转小程序： navigateToMiniProgramAppIdList 数组定义了许可跳转到的其他小程序的 appId 列表。
云开拓配置： cloud 工具用于配置小程序利用的云开拓环境，包括环境 ID 和是否追踪用户。
插件配置： plugins 工具用于声明小程序所利用的插件。
事情线程： workers 工具定义了小程序中利用的事情线程，用于实行后台任务。
编译模式： style 用于指定小程序的编译模式，如利用新版的框架。
网站舆图： sitemap 工具定义了小程序的网站舆图规则，影响小程序在微信搜索中的展示。
性能优化： optimization 工具用于开启性能优化选项，如分包加载和摇树优化。
小程序根目录： miniprogramRoot 指定小程序的根目录。
显示模式： display 定义了独立运行时的显示模式。
后台运行模式： requiredBackgroundModes 数组定义了小程序须要在后台运行的模式，如音频播放。
预加载规则： 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": [ "wx1234567890", "wx0987654321" ], // 云开拓配置 "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 配置文件中进行设置，它许可开拓者对单个页面的行为和表现进行风雅掌握。
页面配置的浸染紧张包括：

覆盖全局设置：页面配置可以覆盖在全局 app.json 中定义的设置，使得每个页面可以有自己的导航栏样式、背景颜色、下拉刷新等特性。
掌握页面表现：通过配置项如 navigationBarTitleText、 navigationBarBackgroundColor 等，可以定制页面的 UI 表现，包括导航栏的标题、颜色、背景等。
定义页面行为：页面配置中可以定义页面的滚动行为、是否支持下拉刷新、上拉加载更多等交互行为。
事宜处理：通过配置项如 onLoad、 onShow 等，可以为页面指定生命周期函数，掌握页面在不同状态下的行为。
自定义导航栏：如果设置 navigationStyle 为 custom，可以自定义全体导航栏的构造和样式。
组件利用：通过 usingComponents 配置项，可以在页面中声明和利用自定义组件。
性能优化：某些配置项如 spliteLine、 gestureBack 等，可以用来优化页面的性能和用户体验。
页面导航：配置项如 showTabBar 和 hideNavigationBar 可以掌握页面内是否显示 tabBar 或者是否隐蔽导航栏，这对付特定的视图或布局非常有用。
页面方向：通过 pageOrientation 配置项，可以设置页面是竖屏还是横屏显示。
页面间跳转：配置项如 enableAutoBackToTabBar 可以掌握页面跳转行为，例如在非 tabBar 页面返回时自动回到 tabBar。
页面加载策略：配置项如 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 LayerJavaScript处理用户交互、数据要求、业务逻辑等。
与视图层通过数据绑定进行通信。
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 小程序加载与运行流程图

流程解释：开始：用户点击微信中的小程序图标或扫描小程序码。
加载小程序：微信客户端开始加载小程序。
初始化全局数据：实行 App 的 onLaunch 生命周期，进行全局数据初始化。
记录缺点日志：如果加载过程中涌现缺点，记录缺点日志。
加载页面：根据用户要求或路由配置加载特定页面。
页面加载：实行页面的 onLoad 生命周期，进行页面数据初始化。
页面显示：实行页面的 onShow 生命周期，页面显示给用户。
页面准备完成：实行页面的 onReady 生命周期，页面第一次渲染完成。
页面隐蔽：实行页面的 onHide 生命周期，页面不可见。
页面卸载：实行页面的 onUnload 生命周期，页面被卸载。
下拉刷新：用户下拉页面，触发 onPullDownRefresh 事宜。
加载更多：用户触发页面底部，实行加载更多数据的逻辑。
小程序显示：小程序显示在用户视野中，实行 App 的 onShow。
小程序隐蔽：小程序被切到后台，实行 App 的 onHide。
小程序启动完成：小程序启动流程结束，等待用户交互。
1.4 小程序生命周期

流程解释：开始：用户点击微信中的小程序图标或扫描小程序码。
onLaunch：小程序启动时触发一次。
onShow：小程序启动或进入前台显示时触发。
onHide：小程序进入后台时触发。
onError：小程序发生脚本缺点或 API 调用失落败时触发。
onPageNotFound：小程序要打开的页面不存在时触发。
页面A / 页面B：示例页面的生命周期。
onLoad：页面加载时触发。
onShow：页面显示时触发。
onReady：页面初次渲染完成时触发。
onHide：页面隐蔽时触发。
onUnload：页面卸载时触发。
onPullDownRefresh：页面下拉刷新时触发。
onReachBottom：页面上拉触底时触发。
生命周期解释小程序生命周期onLaunch小程序启动时触发。
一个小程序生命周期内只触发一次。
onShow小程序启动，或从后台进入前台显示时触发。
onHide小程序从前台进入后台时触发。
onError小程序发生脚本缺点或 API 调用失落败时触发。
onUnhandledRejection小程序有未处理的 Promise 谢绝时触发。
onPageNotFound小程序要打开的页面不存在时触发。
页面生命周期

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

onLoad页面加载时触发。
每次打开页面都会触发。
onShow页面显示时触发。
每次打开页面都会触发。
onReady页面初次渲染完成时触发。
一个页面只会调用一次，之后做页面切换不会触发。
onHide页面隐蔽时触发。
onUnload页面卸载时触发。
onPullDownRefresh触发下拉刷新时触发。
onReachBottom页面上拉触底时触发。
onTabItemTap点击 tab 时触发。
onShareAppMessage用户点击右上角分享按钮时触发。
onPageScroll页面滚动时触发。
onResize窗口尺寸变革时触发。
onBackPress监听用户点击左上角返回按钮时触发。
onNavigationBarButtonTap点击导航栏按钮时触发。
onNavigationBarSearchInputChanged导航栏搜索框输入内容变革时触发。
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 用于定义全体小程序的全局行为和外不雅观。
它的浸染紧张包括以下几个方面：

页面路由：通过 pages 数组定义小程序中所有页面的路径，这是小程序的路由系统的根本，决定了用户可以访问哪些页面。
窗口表现： window 工具用于设置小程序的窗口表现，如导航栏标题、背景色、笔墨颜色等，这些配置影响用户的视觉体验。
底部 tab 栏：如果小程序有底部 tab 栏，可以通过 tabBar 工具来配置其样式和行为，包括颜色、选中状态、图标等。
网络超时： networkTimeout 工具定义了小程序发起网络要求时的超时时间，这有助于掌握网络要求的相应韶光，提高用户体验。
调试模式： debug 布尔值用于掌握是否开启调试模式，开启后可以在开拓者工具中查看更多的调试信息。
sitemap 配置： sitemapLocation 指定了 sitemap.json 文件的路径，sitemap 文件用于配置小程序的页面收录情形，影响小程序在微信搜索中的展示。
权限配置： permission 工具定义了小程序须要利用的用户权限，如获取用户地理位置等。
跳转小程序： navigateToMiniProgramAppIdList 数组定义了许可跳转到的其他小程序的 appId 列表。
云开拓配置： cloud 工具用于配置小程序利用的云开拓环境，包括环境 ID 和是否追踪用户。
插件配置： plugins 工具用于声明小程序所利用的插件。
事情线程： workers 工具定义了小程序中利用的事情线程，用于实行后台任务。
编译模式： style 用于指定小程序的编译模式，如利用新版的框架。
网站舆图： sitemap 工具定义了小程序的网站舆图规则，影响小程序在微信搜索中的展示。
性能优化： optimization 工具用于开启性能优化选项，如分包加载和摇树优化。
小程序根目录： miniprogramRoot 指定小程序的根目录。
显示模式： display 定义了独立运行时的显示模式。
后台运行模式： requiredBackgroundModes 数组定义了小程序须要在后台运行的模式，如音频播放。
预加载规则： 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": [ "wx1234567890", "wx0987654321" ], // 云开拓配置 "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 配置文件中进行设置，它许可开拓者对单个页面的行为和表现进行风雅掌握。
页面配置的浸染紧张包括：

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