微信小程序采用组件化、模块化架构，包含视图层(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 小程序加载与运行流程图
流程说明：
- 开始：用户点击微信中的小程序图标或扫描小程序码。
- 加载小程序：微信客户端开始加载小程序。
- 初始化全局数据：执行 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 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 小程序加载与运行流程图
流程说明：
- 开始：用户点击微信中的小程序图标或扫描小程序码。
- 加载小程序：微信客户端开始加载小程序。
- 初始化全局数据：执行 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
}