小程序

微信小程序

基础概念

核心文件

文件	作用
app.js	项目逻辑文件，注册小程序实例，绑定生命周期回调、错误监听
app.json	公共配置：页面路径、窗口表现、网络超时、多 Tab
project.config.json	项目个性化配置（开发者工具相关）
sitemap.json	配置是否允许被微信索引

生命周期

• onLaunch — 小程序初始化
• onShow — 小程序启动/从后台切前台
• onHide — 小程序从前台切后台
• onError — 错误监听
• Page onLoad(options) — 页面加载，接受路由参数

尺寸单位

• rpx：1rpx = 页面宽度 / 750 ≈ 0.5px（iPhone 6 下）

---

常用配置与 API

app.json

{
  "tabBar": {
    "custom": true
  }
}

• "custom": true → 根目录新建 custom-tab-bar/ 自定义底部导航
• 保留 list 配置以兼容低版本

事件系统

• data-xx 传参 → e.target.dataset.xx 获取
• this.triggerEvent — 自定义事件
• bind:tap — 不阻止冒泡
• catch:tap — 阻止冒泡
• hover-stop-propagation / hover-class — 点击态样式

页面跳转

API	行为
wx.navigateTo	保留当前页，不卸载
wx.redirectTo	关闭当前页，不保留

标签映射

HTML	小程序
div	view
span	text
img	image
a	navigator

• <image> 的 src 可使用绝对路径
• <navigator> 切换 Tab：open-type="switchTab"；回退：open-type="navigateBack"

本地缓存

API	说明
wx.setStorageSync('key', data)	同步写入
wx.getStorageSync('key')	同步读取
wx.getStorage()	异步读取（返回 Promise）
wx.removeStorageSync('key')	同步删除
wx.clearStorageSync()	同步清空

---

运行架构

双线程模型

渲染层 (WebView)  ←→  系统层 (Native / JSBridge)  ←→  逻辑层 (JSCore)
                                                         ↕
                                                    服务器 (HTTPS / WebSocket)

• 渲染层与逻辑层分离，运行在不同线程（Hybrid 模式）
• 网页中渲染层和逻辑层互斥；小程序中二者并行
• 交互链路：渲染层 → 系统层 → 逻辑层（处理）→ 系统层 → 渲染层
• 没有 DOM，没有响应式数据——无需定义在 data 中的数据不会触发视图更新，定义多余数据影响性能

启动与销毁

• 冷启动：首次进入或小程序已销毁后重新进入
• 热启动：已打开过，约 5 分钟内再次打开，或后台切前台
• 销毁时机：切换后台存活一段时间后回收；系统资源紧张时可能被回收

---

业务要点

• 云开发 = 无服务端开发模式
• 小程序中一切皆为组件
• setData：逻辑层 → 视图层（异步），同时更新 data 中的值（同步）
• openid：用户在小程序中的唯一标识，28 位，通过 wx.getUserInfo 获取
• unionId：同一微信开放平台下多个应用间的用户唯一标识，29 位

性能优化

• 合理设置可点击/响应区域
• 页面节点 < 1000，节点树深度 < 30，子节点数 ≤ 60
• 使用内置 hover-class 属性
• iOS 惯性滚动：-webkit-overflow-scrolling: touch
• 避免耗时长、短时间内大量请求（包括图片）
• 使用 HTTPS，频繁请求做缓存
• 同一分包各页面共同预下载 ≤ 2M

---

uni-app

目录结构

目录/文件	说明
pages/	页面存放
static/	静态资源
uni_modules/	uni-app 组件
main.js	入口文件
manifest.json	应用配置（appid、logo、版本、打包等）
pages.json	页面路径、窗口样式、tabBar

manifest.json 关闭警告

{
  "mp-weixin": {
    "setting": {
      "checkSiteMap": false
    }
  }
}

VS Code 插件

• uni-helper — 语法支持
• uni-app-snippets — 代码片段
• uni-app-schemas — pages.json / manifest.json 校验
• uni-ui-snippets — uni-ui 组件代码片段

常用 UI 库

• mescroll — 局部下拉/上拉加载
• mphtml — 富文本转小程序可识别元素（主题包 theme.typora.io）

条件编译

onLaunch: function () {
  /* #ifdef H5 */
  console.log('当前处于 H5 编译平台');
  /* #endif */
  /* #ifndef H5 */
  console.log('当前处于非 H5 编译平台');
  /* #endif */
}

H5 开发

• 启动 dist 文件：anywhere