框架核心（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()
}

在线查询

如需更详细的配置项说明，可直接抓取：

全局配置：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
页面配置：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
场景值列表：https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html

5.5 KiB Raw Blame History Unescape Escape