5.5 KiB
5.5 KiB
框架核心（Framework Core）
官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
架构概述
小程序框架（MINA）分为两部分：
- 逻辑层（App Service）：运行 JavaScript，处理数据和业务逻辑
- 视图层（View）：渲染 WXML + WXSS，展示 UI
逻辑层和视图层分别运行在不同的线程中，通过 Native 层进行数据传输和事件通信。
关键限制：逻辑层不运行在浏览器中，没有 window、document 等 Web API。
目录结构
一个小程序主体部分由三个文件组成（必须放在项目根目录）：
| 文件 | 必需 | 作用 |
|---|---|---|
app.js |
是 | 小程序逻辑（App() 注册） |
app.json |
是 | 小程序公共配置 |
app.wxss |
否 | 小程序公共样式表 |
一个小程序页面由四个文件组成：
| 文件 | 必需 | 作用 |
|---|---|---|
页面.js |
是 | 页面逻辑（Page() 注册） |
页面.wxml |
是 | 页面结构（模板） |
页面.wxss |
否 | 页面样式 |
页面.json |
否 | 页面配置 |
app.json 全局配置
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"navigationBarTitleText": "小程序",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
},
"tabBar": {
"color": "#999",
"selectedColor": "#333",
"backgroundColor": "#fff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/tab/home.png",
"selectedIconPath": "images/tab/home-active.png"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"subpackages": [],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
"lazyCodeLoading": "requiredComponents"
}
pages 配置
- 数组第一项为小程序初始页面（首页）
- 不需要写文件后缀，框架会自动寻找
.json.js.wxml.wxss四个文件 - 新增/减少页面需要修改 pages 数组
window 配置
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
| navigationBarTextStyle | string | white | 导航栏标题颜色，仅支持 black / white |
| navigationBarTitleText | string | 导航栏标题文字 | |
| navigationStyle | string | default | 导航栏样式，custom 为自定义导航栏（只保留右上角胶囊按钮） |
| backgroundColor | HexColor | #ffffff | 窗口背景色 |
| backgroundTextStyle | string | dark | 下拉 loading 样式，仅支持 dark / light |
| enablePullDownRefresh | boolean | false | 是否开启全局下拉刷新 |
| onReachBottomDistance | number | 50 | 页面上拉触底事件触发时距页面底部距离（px） |
tabBar 配置
list数组最少 2 个、最多 5 个 tab- tabBar 页面必须在 pages 数组中
position可选bottom（默认）或top（顶部时不显示 icon）
页面配置（page.json）
每个页面可以有自己的 .json 文件，覆盖 app.json 中 window 的配置：
{
"navigationBarTitleText": "页面标题",
"enablePullDownRefresh": true,
"usingComponents": {
"my-component": "/components/my-component/my-component"
}
}
sitemap.json
配置小程序及其页面是否允许被微信索引：
{
"rules": [
{
"action": "allow",
"page": "*"
}
]
}
场景值
场景值用于描述用户进入小程序的路径，常见场景值：
| 场景值 | 说明 |
|---|---|
| 1001 | 发现栏小程序主入口 |
| 1007 | 单人聊天会话中的小程序消息卡片 |
| 1008 | 群聊会话中的小程序消息卡片 |
| 1011 | 扫描二维码 |
| 1012 | 长按识别二维码 |
| 1020 | 公众号 profile 页相关小程序列表 |
| 1035 | 公众号自定义菜单 |
| 1036 | App 分享消息卡片 |
| 1037 | 小程序打开小程序 |
| 1038 | 从另一个小程序返回 |
| 1043 | 公众号模板消息 |
| 1047 | 扫描小程序码 |
| 1048 | 长按识别小程序码 |
| 1089 | 微信聊天主界面下拉 |
可在 App.onLaunch / App.onShow 中通过 options.scene 获取。
基础库版本兼容
// 方式一：wx.canIUse
if (wx.canIUse('openBluetoothAdapter')) {
wx.openBluetoothAdapter()
} else {
wx.showModal({ title: '提示', content: '当前微信版本过低，无法使用该功能' })
}
// 方式二：比较版本号
function compareVersion(v1, v2) {
v1 = v1.split('.')
v2 = v2.split('.')
const len = Math.max(v1.length, v2.length)
while (v1.length < len) v1.push('0')
while (v2.length < len) v2.push('0')
for (let i = 0; i < len; i++) {
const num1 = parseInt(v1[i])
const num2 = parseInt(v2[i])
if (num1 > num2) return 1
else if (num1 < num2) return -1
}
return 0
}
const SDKVersion = wx.getSystemInfoSync().SDKVersion
if (compareVersion(SDKVersion, '1.1.0') >= 0) {
wx.openBluetoothAdapter()
}
在线查询
如需更详细的配置项说明，可直接抓取：