微信小程序开发

一、小程序简介

1.1 小程序与普通网页开发的区别

#	对比维度	普通网页	微信小程序	评论
1	运行环境	运行在浏览器内核（Chrome/Blink、Safari/WebKit 等）	运行在微信内置引擎（JSCore + 自家渲染层）	“浏览器是公共澡堂，谁都能泡；小程序是微信包间，只招待持票乘客。”
2	可用 API	可直接访问 DOM/BOM，还能随手 `alert('Hello')`	禁用 DOM/BOM！取而代之的是 `wx.*` 系列原生 API（定位、扫码、支付…）	“想摸 DOM？抱歉，这里是熊猫馆——能看的只能远观。”
3	开发模式	浏览器 + 任意编辑器（VS Code、WebStorm…）	官方“三件套”：① 申请开发者账号② 安装微信开发者工具③ 创建 & 配置项目	“学前班发铅笔、橡皮和练习本；微信发账号、IDE 还顺便发一堆‘真题’——审核规范。”

运行模式不同
- 网页
  直接跑在浏览器，渲染线程 + JS 引擎打配合。
- 小程序
  代码在微信的 JSCore 沙箱里执行，UI 由独立的渲染层（WebView-like）负责。渲染与逻辑分居两室，靠桥（setData）通信——优点是更易于性能管控，缺点则是“搬砖”稍显繁琐。

有开发者吐槽——“小程序就像远距离恋爱，消息要经过桥接才能见面；传大对象？那是异地恋寄 20kg 的生蚝。”

API不同
- 网页党 覆手可得：
  1
  2
  document.querySelector('#btn').addEventListener(...)
  window.location.href = '...';
- 小程序党 请改练 wx 派内功：
  1
  2
  3
  4
  5
  6
  7
  8
  // 获取地理位置
  wx.getLocation({
  type: 'gcj02',
  success(res) {
  const { latitude, longitude } = res;
  console.log('我在', latitude, longitude);
  }
  })
  禁飞区：document.*, window.alert, localStorage…（用了直接报“找不到对象”）
  
  可飞区：微信提供的 能力型 API ——定位、蓝牙、支付、扫码、人脸识别… 这些都是浏览器里要么做不到、要么需要用户安装插件才能做到的事。
有人把 wx.scanCode() 叫做“高配版 prompt()”——不仅能让用户输入，还顺便帮你拍张照确认身份。

开发模式不同

步骤	网页	小程序
“我要开干”	新建 `index.html`，F5 刷浏览器	先申请小程序 AppID（没公司就用测试号）
写代码	VS Code / Sublime / vim 任君挑	微信开发者工具内置预览、真机调试、上传发布
上线	传服务器 / 静态托管	提交审核 → 微信官方“通关打怪”

审核：名称、类目、页面内容、支付逻辑…… 都有规范。
版本管理：每次上传都会生成 体验版、预览版 与 正式版。

地狱梗：第一次提审被驳回？别急，官方实际在帮你做“需求评审”；只是评审老师换成了微信小助手。

小结：

环境：浏览器 vs 微信沙箱——决定了可用能力边界。
API：DOM/BOM → wx.*，把“网页思维”先放下，练微信内功。
流程：浏览器即发布 vs 官方 IDE + 审核——多一步，但也多一层安全 & 质量保证。

记住一句话：“写网页是路边摆摊，写小程序是进商场开店。”
摆摊自由度高，开店规矩更多，但人流也更多、支付更顺畅——取舍看业务场景。

1.2 小程序体验

可以通过扫描二维码体验到微信官方的小程序开发体验小程序中。

二、第一个小程序

2.1 注册小程序账号

步骤	关键动作	说明 & 小贴士
1. 打开注册页	访问 https://mp.weixin.qq.com/ → 右上角「立即注册」	别走错门——这是微信所有形态账号的“大门口”。
2. 选择“小程序”	四个方块里选紫色「小程序」	订阅号/服务号是公众号亲戚，不要点错。
3. 填写邮箱 + 密码	输入常用邮箱、设置登录密码、填验证码，点「注册」	每个邮箱只能申请 1 个小程序，职业刷号党请自备一打邮箱。
4. 去邮箱激活	收到激活邮件 → 点进邮件里的链接	如果 5 分钟还没收到，先检查垃圾箱，再检查老板有没有把公司邮件网关关了😅。
5. 点击链接完成激活	浏览器自动跳回公众平台，提示激活成功	恭喜通关，下一关——主体信息。
6. 选择主体类型	个人 / 企业 / 政府 / 媒体 / 其他组织	自学练手选「个人」最快；企业主体后续才能开支付、直播等高级能力。
7. 填主体信息	身份证姓名、号码、绑定手机号，扫码人脸核验	官方叫“实名制”，程序员俗称“上交面子和里子”。
8. 获取 AppID	后台左侧「开发」→「开发设置」查看 AppID	后续创建项目、上传代码都靠它，务必复制到小本本。

2.1.1 点击注册按钮

2.1.2 选择注册账号类型

2.1.3 填写账号信息

2.1.4 提示邮箱激活

2.1.5 点击链接激活账号

2.1.6 选择主体类型

2.1.7 主体信息登记

2.1.8 获取小程序的AppID

新版微信小程序网页：左边->开发与服务->开发管理

注册小程序就像上高速——先拿通行证（AppID），才能一路飙车（写代码）。别怕流程多，毕竟微信要替 12 亿用户把关。祝注册顺利，下一节我们正式开工写“Hello, 小程序”！

2.2 安装微信开发者工具

2.2.1 工具有什么用？

一键创建项目，省掉敲 npm init 的仪式感
代码查看 / 编辑，内置 ESLint、格式化
真机级模拟器，断点调试 / 网络抓包 / 数据面板
扫码预览 & 上传发布，告别手动打包

顺口溜：“创建-调试-预览-上传，四步循环、日行一善。”

2.2.2 下载最新版（Stable Build）

直接访问官方稳定版链接
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
Windows（64/32 位）、macOS 均有安装包
别贪 Beta ——日常学习用稳定版更省心

2.2.3 安装流程（比装 QQ 还简单）

序号	界面提示	要做的事
①	欢迎界面	点下一步
②	许可协议	勾我接受 → 下一步
③	选择安装目录	默认即可，磁盘别剩 <1 GB
④	正在安装	倒杯咖啡，进度条很快
⑤	完成界面	留勾“运行微信开发者工具” → 完成

2.2.4 首次扫码登录

工具启动后会出现一个巨大二维码
用 同一微信号（与小程序管理员一致更佳）扫码
手机点 确认登录 → 电脑端提示“扫描成功”
进入主界面，左侧能看到 “+” 号，等待创建首个项目

如果你在工位上一抖手把手机掉地上——别怕，二维码会一直等你，超长待机。

2.2.5 推荐设置（界面 & 网络代理）

点击右上齿轮 → 外观
- 主题：浅色 / 深色随心切
- 字体：Consolas，字号 18，护眼又不眯眼
代理选项 → 勾 “不使用任何代理，勾选后直连网络”
- 仅当公司网络走代理时再改为“使用系统代理”

小结

稳定版链接收藏，Beta 留给勇士。
安装一路“下一步”即可，和 Windows 经典软件一样。
扫码登录后立马能新建项目 —— AppID 没准备好？用「无 AppID」模板先练手！
调个暗色主题 + 大字号，码一整天眼不酸。

2.3 创建小程序项目

2.3.1 进入「小程序」标签页

打开微信开发者工具首页，左栏点 小程序

中间区域点击灰色 “+” 卡片，新建项目

2.3.2 填写项目信息

字段	说明	建议
项目名称	随意（例：mp_01）	先用英文+下划线，后期方便版本管理
目录	本地存放代码的位置	选一块空余空间大的盘符
AppID	真 AppID / 测试号	没有就点“测试号”，功能受限但足够练手
开发模式	小程序 / 公众号网页等	选小程序
后端服务	云开发 / 不使用	初学可先选不使用云服务
语言	JavaScript / TypeScript	建议新手先 JavaScript，TS 后面再上

填完点 「新建」，工具会生成默认目录结构并自动打开。

新版选择JS-基础模版

2.3.3 项目创建完成

2.3.4 编译 & 模拟器预览

右上编译按钮（或 Ctrl + B）
左侧 iPhone 模拟器即刻刷新，能看到默认 “Hello World” 页面

小提示：项目目录里 app.js / app.json / app.wxss 就对应全局 JS、配置、样式，后续会常改。

2.3.5 在真机上预览项目效果

点击预览 → 弹出二维码

用同一微信扫码，在手机上查看实际效果

这个二维码 2 小时左右失效，再次预览重新生成即可

2.3.6 认识主界面五大区块

菜单栏：文件、编辑、工具等传统选项
工具栏：编译 / 预览 / 真机调试 / 上传…
模拟器区：手机壳+页面渲染，支持横竖屏切换
代码编辑区：左树右编辑，内置高亮和格式化
调试区：Console、Network、Storage 等调试面板

第一次在模拟器看到 “Hello World” 时，有人会截图发朋友圈——“妈，我真的在写小程序了！”

获得小程序组件的API文档->帮助->开发者文档->在网页中查看对应组件的文档

三、小程序代码构成

3.1 小程序项目结构

3.1.1 了解项目的基本组成结构

最主要的有pages、app.js、app.json

文件 / 目录	作用
pages/	所有页面的家，每个页面一个独立文件夹
utils/	工具函数、通用模块（如日期格式化）
app.js	小程序入口脚本，监听生命周期（`onLaunch` 等）
app.json	小程序全局配置：路由、窗口样式、网络超时…
app.wxss	全局样式，可理解为“全局 CSS”
project.config.json	微信开发者工具的工程设置（ESLint、编译选项等）
sitemap.json	控制页面能否被微信索引，用于 SEO

3.1.2 小程序页面的组成部分

官方建议：一个页面 = 一个文件夹，内含 4 个同名不同后缀文件：

后缀	角色	内容示例
`.js`	脚本	`Page({ data: { msg:'Hi'}, onLoad(){…} })`
`.json`	配置	设置页面标题、启用下拉刷新、分享卡片等
`.wxml`	模板	组件、数据绑定 —— 相当于 HTML
`.wxss`	样式	页面私有的 CSS，支持尺寸单位 `rpx`

思维对照：HTML ➜ WXML、CSS ➜ WXSS、JS ➜ JS，再加一个同名 JSON 配置。

创建新页面的最短路径

在 pages 下新建文件夹，如 about/
一键生成四件套（IDE 右键即可）
把路径 pages/about/about 添加到 app.json 的 pages 数组
编译 → 模拟器地址栏输入 /pages/about/about 进行跳转预览

3.2 JSON配置文件

3.2.1 JSON配置文件的作用

微信小程序的开关面板几乎都写在 .json 里。项目里常见 4 种 JSON，各自负责的层级和用途如下：

文件	作用范围	关键字段（示例）	使用场景
app.json	全局	`pages` 路由、`window` 导航栏样式、`tabBar` 底部菜单	新增/调整页面、统一主题色
project.config.json	工具层	`setting` 编译选项、`appID`、`projectname`	修改 ESLint 规则、关闭 sitemap 提示
sitemap.json	SEO	`rules` 设定 `allow/deny` 页面索引	允许或屏蔽小程序搜索曝光
页面同名 .json	局部页面	覆盖 `window` 中对应项	只让某页导航栏变色

3.2.2 app.json文件——「总控台」

json


复制编辑
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "WeChat"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages：数组顺序决定路由，第一项即默认首页
window：导航栏、背景色、文字色等全局外观
style：组件默认样式版本
sitemapLocation：指向 sitemap.json 文件

3.2.3 project.cofig.json文件——开发者工具的偏好设置

{
  "miniprogramRoot": "./",
  "projectname": "mp_01",
  "appid": "wx************",
  "setting": {
    "urlCheck": true,
    "es6": true,
    "checkSiteMap": false
  }
}

setting 里可关闭/开启特定校验，例如 checkSiteMap
es6 设为 true 即可用 import / async 等语法

3.2.4 sitemap.json文件——让不让微信索引搜索？

{
  "rules": [
    {
      "action": "allow",
      "page": "*"
    }
  ]
}

allow / disallow 可对某些路径做精准控制
若不想看到 IDE 的索引提示，把 project.config.json → checkSiteMap 设为 false 即可

3.2.5 页面的json文件小范围“涂色笔”

所有与 app.json → window 同名的字段，都能在页面级 .json 里被覆盖。

// pages/index/index.json
{
  "navigationBarBackgroundColor": "#00B26A"
}

效果：只有 index 页的导航栏变绿，其他页面仍沿用全局白色。

如果页面级别的配置和全局级别的配置发生冲突，那么会以页面级别的为准。

3.2.6 新建小程序页面

新建
1. 在 pages 目录建文件夹 list/
2. app.json → pages 数组追加 "pages/list/list"
  IDE 会自动生成四件套 list.js/json/wxml/wxss

修改首页
把想要的页面路径拖到 pages 数组第一位即可：

"pages": [
  "pages/list/list",
  "pages/index/index",
  "pages/logs/logs"
]

编译后模拟器默认进入 list 页。

3.2.7 小结

想做的事	改哪个 JSON
换全局主题色	app.json → window
只改某页颜色	页面同名 .json
关闭搜索索引提示	project.config.json → setting.checkSiteMap
屏蔽整站搜索	sitemap.json

掌握这些配置文件，就能“拧螺丝”般快速调校小程序外观、路由与调试体验。

3.3 WXML模版和WXSS样式

名称	类比于 Web	作用
WXML (WeiXin Markup Language)	HTML	负责“骨架”——页面结构、组件层级
WXSS (WeiXin Style Sheets)	CSS	负责“皮肤”——颜色、尺寸、布局

3.3.1 WXML 基础认知

标签集合更精简
- HTML：div span img a …
- WXML：view text image navigator 等（都小写，语义直接）

属性语义不同

<!-- HTML 超链接 -->
<a href="/home">Home</a>

<!-- WXML 页面跳转 -->
<navigator url="/pages/home/home">Home</navigator>

内置“Vue 风格”模板语法

功能	关键指令	一眼示例
数据绑定	`{{ msg }}`	`<text>{{ msg }}</text>`
列表渲染	`wx:for`	`<view wx:for="{{list}}" wx:key="id">{{item.name}}</view>`
条件渲染	`wx:if / wx:elif / wx:else`	`<view wx:if="{{login}}">Hi~</view>`

3.3.2 WXSS 与传统 CSS 的差异

特性	说明	小贴士
新增尺寸单位 `rpx`	会随屏幕宽度自动缩放	设计稿 750 px → 1 px ≈ 1 rpx
全局 / 局部样式分离	`app.wxss` 全局；页面同名 `.wxss` 仅当前页	想统一字体就写到全局
选择器子集	支持 `.class` `#id` 元素、并集、后代；不支持伪元素如 `::after`	写法越简单，渲染越快
CSS 语法基本兼容	媒体查询、不透明度等常用属性都 OK	动画推荐用 API（如 `animation`）提高流畅度

“Hello WXML+WXSS” 迷你示例

index.wxml

<view class="container">
  <text class="title">{{ title }}</text>
  <button bindtap="handleTap">获取头像昵称</button>
</view>

index.wxss

.container{
  padding:40rpx;
  text-align:center;
}
.title{
  font-size:48rpx;
  color:#00B26A;
  margin-bottom:60rpx;
}
button{
  width:300rpx;
  background:#ffffff;
  border-radius:12rpx;
}

index.js（片段）

Page({
  data:{ title:'Hello World' },
  handleTap(){
    console.log('按钮被点击');
  }
})

编译后即可在模拟器看到绿色 “Hello World” 标题和按钮，布局在不同机型上会因 rpx 自适应而保持一致。

3.3.3 小结

WXML = 结构 + 模板指令，写法清爽、带数据驱动。
WXSS = CSS Lite + rpx，屏幕适配不操心，全局/局部样式分而治之。
掌握二者配合后，再加 JS 逻辑，就能快速搭好小程序页面。下一步可以尝试引入组件（如 image、scroll-view），让页面“活”起来！

3.4 JS逻辑交互

在小程序里，界面展示靠 WXML/WXSS，行为逻辑就交给 JavaScript。
JS 文件按作用域可分 3 类：

类别	入口函数	典型职责	代码片段
1. app.js （全局）	`App()`	启动小程序、监听全局生命周期、存放公共数据	`js App({ onLaunch(){ // 全局初始化 } })`
2. 页面 .js （局部）	`Page()`	定义页面数据 `data`、事件处理、页面生命周期	`js Page({ data:{ count:0 }, add(){ this.setData({count:this.data.count+1}) } })`
3. 普通 .js （工具模块）	——	封装公用函数 / 常量，供 `require` / `import`	`js // utils/time.js module.exports=formatTime;`

3.4.1 常见交互流程示例

用户操作 → WXML 触发事件
1
<button bindtap="add">+1</button>
页面 .js 接收事件，修改 data
视图自动刷新 —— 数据驱动视图，无需手动 DOM 更新

3.4.2 开发要点速查

场景	关键 API / 方法	备注
修改页面数据	`this.setData({ … })`	触发视图更新
跨页面数据共享	`getApp()`、全局 `globalData`	简单状态、无需状态管理库
本地缓存	`wx.setStorageSync / wx.getStorageSync`	同步 / 异步版本均有
调原生能力	例如 `wx.getLocation()`、`wx.scanCode()`	Promise 化可用 `wx.promisify`

小技巧：把与页面无关的逻辑拆到 utils 里（如日期格式化、网络请求封装），页面文件只关心“拿数据 + 绑定事件”，结构会更清晰，后期维护也轻松。

四、小程序的宿主环境

4.1 宿主环境简介

宿主环境（host environment）= 程序运行所必需的“生存土壤”

Android 系统、iOS 系统分别是 原生 App 的宿主环境

对 微信小程序 而言——手机微信 App 本身 就是唯一宿主

小程序脱离微信无法单独运行，但也正因“寄生”于微信——它天然继承了微信的大量能力（扫码、支付、位置、联系人、蓝牙…）。换个比喻：网页是住“群租房”，原生 App 是买自建房，小程序则是住在微信这座“超大商场”里的档口——水电网 (系统能力) 全包、客流量自带，只要专心卖货即可。

4.1.1 宿主环境的四大构成

顺位	模块	作用简述
① 通信模型	逻辑层 (JSCore) ⇆ 渲染层 (WebView) 双线程桥接	`setData()` 消息队列、事件回传
② 运行机制	页面栈 + 生命周期；前后台切换由微信托管	`onLaunch`, `onShow`, `onHide`
③ 基础组件	微信团队实现的 UI 组件库；语义精简	`view`, `scroll-view`, `swiper`, `button`
④ 能力型 API	直接调用微信/系统底层功能	`wx.scanCode`, `wx.getLocation`, `wx.login`, `wx.requestPayment`

Tip：当你在 WXML 里写一个 <map> 组件、在 JS 里调用 wx.openLocation() 时，其实就是“喊”微信宿主帮你干活。

4.1.2 为什么要理解宿主环境？

性能边界感
不同于浏览器，渲染与逻辑分离——频繁 setData 会阻塞桥接；理解后才能写出高帧率页面。
权限与合规
微信提供的能力必须走官方授权弹窗，比如地理定位、相册；否则审核直接驳回。
跨端一致性
同一段小程序代码在 Android / iOS 中，UI 基本一致；但系统级 API（如蓝牙）仍存在差异，需要做降级处理。

4.1.3 一口气总结

宿主 = 微信，不给微信当“插件”就跑不起来
微信把 通信、渲染、原生能力 都封装好了，小程序像乐高积木随取随用
开发者最重要的任务：写好逻辑层 JS + 轻量视图层 WXML/WXSS，其余交给宿主

“小程序离开微信就像离开水的鱼——它确实还能发消息（抖两下），但没人敢买单。”

4.2 通信模型

在微信小程序里，所有数据都绕不过一座“转发站”——微信客户端本身。
下面先看参与者，再看两条通信通路。

4.2.1 通信主体

层次	所在进程	负责内容
渲染层	WebView	解析 WXML / WXSS，负责页面展示、用户触摸事件上报
逻辑层	JSCore	运行 JS 脚本，处理业务逻辑、网络请求、数据缓存
Native	微信 App	把两层“撮合”到一起，并代为调系统能力

一句话：渲染层“长得好看”，逻辑层“动脑子”，Native “当保姆”。

4.2.2 两大通信路径

#	方向	流程 & 关键点	开发者可感知的 API
① 渲染层 ⇆ 逻辑层	双向消息（受控队列）	- 逻辑层调用 `setData()` 推 UI 更新 - 渲染层把点击、滚动等事件打包回传	`this.setData()`、`bindtap`、`bindscroll`
② 逻辑层 ⇆ 第三方服务器	HTTP(S) 请求	- 由逻辑层发起 `wx.request`，Native 代劳实际网络通信 - 域名需预先配置在「合法域名」白名单里	`wx.request()`、`wx.uploadFile()`、`wx.downloadFile()`

性能提醒

每次 setData 会经过桥接层，数据包越大、频率越高 → 卡顿越明显。
养成“只改动需要的字段 + 合并多次写入”的习惯。

网络请求走 Native，HTTPS 握手仍消耗时间；能用云开发或本地缓存的场景不要硬拉远程接口。

4.2.3 常见问题 & 解法

症状	原因	解决思路
页面频繁掉帧	`setData` 高频 + 大对象	拆分字段；`throttle/debounce` 用户输入；长列表用 `virtual-list`
请求 400 / 404	域名未备案或未加入白名单	在小程序管理后台开发→开发设置→服务器域名添加并验证
iOS 正常，Android 出错	不同平台底层 WebView / JSCore 行为差异	使用官方组件&API 避免私造 DOM；及时关注基础库版本差异

4.2.4 小结

两层一桥：渲染层 & 逻辑层通过微信 Native 桥接。
两条通路：层间消息 + 网络请求，都走 Native 转发。
开发者关注 包大小、调用频率、域名白名单 三件事，就能让通信既快又稳。

4.3 运行机制

微信小程序在微信宿主中“苏醒→展示”大致分两条流水线：小程序启动与页面渲染。理解这两条流水线能帮助我们定位白屏、初始化慢等常见问题。下文结合两张流程 PPT 逐步拆解。

4.3.1 小程序启动（App 级别）

顺序	阶段	关键动作	对应生命周期
①	拉取代码包	微信客户端从服务器或本地缓存下载/比对代码包（`*.wxapkg`）
②	解析 `app.json`	读取全局配置：路由表 `pages[]`、窗口 `window{}`、`tabBar`…
③	执行 `app.js`	调用 `App()` 创建全局实例，注入生命周期回调	`onLaunch`
④	渲染首页	读取路由表首项所指页面（例如 `pages/index/index`）
⑤	启动完成	首屏可见，进入前台	`onShow`

首屏优化 Tips

首页放置最小可运行逻辑，复杂初始化放次级页面或懒加载

合理使用分包，避免一次下载 2M+ 资源

4.3.2 页面渲染（Page 级别）

顺序	动作	说明
① 加载 `index.json`	读取页面私有配置，覆盖 `app.json → window` 同名字段
② 解析 `index.wxml` / `index.wxss`	渲染层构建 DOM Tree & CSSOM
③ 执行 `index.js`	调用 `Page()` 生成页面实例，注册 `data`、事件处理	`onLoad`
④ 渲染完成	首次数据绑定 & 布局绘制	`onReady`

随后页面进入可交互状态，后续的显示/隐藏/卸载遵循：

1
2
3

onShow → 用户可见
onHide → 退到后台 / 被覆盖
onUnload → 被销毁（从页面栈移除）

4.3.3 页面栈（Page Stack）与路由

微信维护一个栈结构来保存已打开页面顺序：[index] -> [list] -> [detail]
wx.navigateTo() 压栈，wx.navigateBack() 弹栈；最多 10 层

栈顶页面可访问下层页面实例：

1 2	const pages = getCurrentPages() const prevPage = pages[pages.length - 2] // 上一个页面

4.3.4 常见问题速查表

现象	可能原因	排查思路
首屏白屏 ≥3 s	代码包过大；首页依赖网络数据	分包 + 骨架屏；接口并行请求
`onLoad` 不触发	页面被缓存，走了 `onShow`	确认是否使用 `tabBar` 页面；看调试面板
返回上一页数据未刷新	仅在 `onLoad` 拉数据	在 `onShow` 里增补刷新逻辑或使用事件总线

4.3.5 思维导图

小程序启动  
├─ 下载代码包 → 解析 app.json → App() → onLaunch  
└─ 渲染首页  
    ├─ 解析 page.json / wxml / wxss  
    ├─ Page() → onLoad  
    ├─ 数据绑定 & 绘制 → onReady  
    └─ onShow  (用户可见)

一句话总结： 小程序启动像开机——先读 BIOS (app.json) 再跑系统 (app.js)；
页面渲染像打开软件——解析配置、加载资源、实例化 Page，然后正式显示。
熟悉这两段流程，你就能精确拿捏生命周期，让首屏更快、页面更顺滑。

4.4 组件

组件由 微信宿主环境 内置提供，开发者无需重复造轮子即可快速拼装页面。官方把全部组件分成 9 大类，如下表所示，本节先聚焦最常用的 视图容器类 和 基础内容类，其余将在下节继续。

分类序号	组件类别	典型成员
①	视图容器	`view`、`scroll-view`、`swiper / swiper-item`
②	基础内容	`text`、`rich-text`
③	表单组件	`button`、`input`、`picker` …
④	导航组件	`navigator`、`scroll-view`（滚动监听）
⑤	媒体组件	`image`、`video`
⑥	map 地图组件	`map`
⑦	canvas 画布组件	`canvas`、`live-player`
⑧	开放能力	`ad`、`official-account`、`open-data`
⑨	无障碍访问	`aria-*`（WAI-ARIA 属性）

4.4.1 视图容器类组件

组件	作用	常用属性 / 说明
`view`	普通视图区域，相当于 HTML 中的 `div`。配合 WXSS 可做任何布局。	支持 `hover-class`、`hover-start-time` 等触摸态效果
`scroll-view`	可滚动的视图区域。竖向或横向滚动列表、图片瀑布流等首选。	`scroll-y / scroll-x` 开启滚动；滚动方向必须给定固定高度/宽度，否则无法滚动
`swiper` + `swiper-item`	轮播容器与其子项。常见于首页 Banner、广告位。	支持 `indicator-dots` 页签、`autoplay` 自动播放、`circular` 衔接滚动等

1) `view` 示例：Flex 横向布局

<!-- list.wxml -->
<view class="container">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

/* list.wxss */
.container           { display:flex; justify-content:space-around }
.container view      { width:100px; height:100px; text-align:center; line-height:100px }
.container view:nth-child(1) { background:lightgreen  }
.container view:nth-child(2) { background:lightskyblue }
.container view:nth-child(3) { background:lightcoral }

效果：三块彩色方块水平均分对齐。

2) `scroll-view` 示例：纵向滚动列表

<scroll-view class="box" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

1 2	.box { width:100px; height:120px; border:1px solid #e00 } /* 高度必须固定 */ .box view { width:100px; height:100px }

要点：

纵向滚动用 scroll-y；横向用 scroll-x

滚动方向对应的尺寸 必须固定，否则内容无法滚动

3) `swiper / swiper-item` 示例：基础轮播

<swiper class="swiper" indicator-dots>
  <swiper-item><view class="item">A</view></swiper-item>
  <swiper-item><view class="item">B</view></swiper-item>
  <swiper-item><view class="item">C</view></swiper-item>
</swiper>

.swiper      { height:150px }
.item        { height:100%; line-height:150px; text-align:center }
.item:nth-child(1) { background:lightgreen   }
.item:nth-child(2) { background:lightskyblue }
.item:nth-child(3) { background:lightcoral   }

常用属性	类型	默认值	说明
`indicator-dots`	`boolean`	`false`	是否显示面板指示点
`indicator-color`	`color`	`rgba(0,0,0,.3)`	指示点颜色
`indicator-active-color`	`color`	`#000000`	选中指示点颜色
`autoplay`	`boolean`	`false`	是否自动切换
`interval`	`number`	`5000`	自动切换间隔（ms）
`circular`	`boolean`	`false`	是否循环衔接滑动

提示：轮播高度由外层 .swiper 控制；若放在 scroll-view 内部，务必关闭 scroll-view 的同向滚动冲突或改用 catchtouchmove。

4.4.2 基础内容类组件

组件	作用	常用属性	备注
`text`	普通文本	`selectable` (是否可长按复制)`space` (`ensp`/`nbsp`) 空格处理	类似 HTML 中的 `<span>`
`rich-text`	富文本渲染	`nodes` (字符串 / 数组，描述要渲染的节点)`editable` (是否可编辑)	官方默认过滤潜在危险标签

1 2	<text>微信小程序</text> <rich-text nodes="{{ htmlString }}"></rich-text>

1
2
3

Page({
  data:{ htmlString:'<h3 style="color:#07c160;">Hello MiniProgram</h3>' }
})

1) `text` 组件

定位：最轻量的文本呈现容器。
核心属性
- selectable="true" → 支持长按选中复制
- space="ensp" / space="nbsp" → 自动替换空格方便排版

<view>
  <text>普通文本</text>
  <text selectable>138 0000 5006</text>
  <text space="ensp">空   格   对   齐</text>
</view>

2) `rich-text` 组件

rich-text 用来把 HTML 字符串 或 nodes JSON 渲染为 WXML 结构。常见场景：文章 / 商品详情 / 评论内容。

1
2
3

<rich-text
  nodes='<h1 style="color:#e54d42;">标题</h1><p>段落<b>加粗</b></p>'>
</rich-text>

安全提示：只有白名单标签（div、p、img、h1–h6 等）会被保留，脚本标签会被自动移除；如需更多格式，建议后端预处理为 nodes 数组。

4 .4 .3 其它常用组件概览

组件	典型用途	精华属性 / 方法
`button`	操作入口、调起微信能力	`type` `size` `plain` `disabled` `open-type`
`image`	图片展示	`src` `mode` `lazy-load` `show-menu-by-longpress`
`navigator`	页面跳转	`url` `open-type` (`navigate` `redirect` `switchTab` …)

下文分别展开 button 与 image 两个最常用组件；navigator 会在后续详述。

4 .4 .5 `button` 组件

属性	说明
`type` → `default / primary / warn`	系统预设三种主题色
`size` → `default / mini`	小尺寸按钮
`plain`	镂空按钮，常用作次要操作
`open-type`	调起微信能力，如 `contact`（客服）、`share`、`getPhoneNumber`、`feedback` 等

<!--类型-->
<button>默认</button>
<button type="primary">主色</button>
<button type="warn">警告</button>

<!--尺寸 & 镂空-->
<button size="mini" type="primary">mini</button>
<button plain type="primary">镂空</button>

<!--调起客服会话-->
<button type="primary" open-type="contact">联系客服</button>

4 .4 .7 `image` 组件

默认尺寸：300 px × 240 px，如需自适应请配合 mode。
懒加载：lazy-load="true" 仅当页面滚动到可视区域再加载。
长按菜单：show-menu-by-longpress="true" 支持保存 / 识别二维码。

<!--空图占位-->
<image />

<!--等比缩放完整展示（aspectFit）-->
<image src="/images/avatar.png" mode="aspectFit" />

<!--封面图常用裁剪（aspectFill）-->
<image src="/images/banner.jpg" mode="aspectFill" style="width:100%;height:160px;" />

`mode` 属性速查

mode 值	行为	典型场景
`scaleToFill` (默认)	拉伸填满，不保持比例	彩色占位图
`aspectFit`	等比缩放，完整显示长边	头像 / 缩略图
`aspectFill`	等比缩放，完整显示短边，多余裁剪	Banner / 封面
`widthFix`	宽度固定，高度自适应	等宽瀑布流
`heightFix`	高度固定，宽度自适应	固定高度画廊

4 .4 .8 小结

模块	速记
文本	`text` 轻量、`rich-text` 富文本
交互	`button` 自带主题 + 微信开放能力
媒体	`image` 默认固定尺寸，`mode` 决定裁剪 / 缩放
导航	路由跳转交给 `navigator`（后续详讲）

掌握以上组件，你已能完成大多数页面的静态 UI 构建。接下来建议动手把示例代码敲一遍，加深对属性、默认行为的直观理解。

4.5 API

小程序的能力 = 宿主环境 + JavaScript 运行时。
组件解决“页面结构/样式”的问题，API 负责“能力调用”——无论是硬件能力（摄像头、定位）、软件能力（网络请求、本地存储）还是微信生态能力（登录、支付、分享）都要通过 API 触达。

4.4.1 API 概述

小程序所有 API 都由 微信客户端（宿主环境）统一暴露。开发者只需使用 wx.* 命名空间即可调用，无需关心底层平台差异。常见场景示例：

场景	典型 API	作用
获取用户信息	`wx.getUserInfo()`	调起授权弹窗并获取用户基础信息
本地数据缓存	`wx.setStorageSync()/wx.getStorageSync()`	读写 10 MB 以内的 KV 数据
微信支付	`wx.requestPayment()`	拉起微信支付收银台完成支付

4.4.2 API 的三大分类

分类	识别方式	特点	常用示例
事件监听型 (Event Listener APIs)	以 `on` 开头	只负责订阅宿主事件，不直接返回结果	`wx.onWindowResize(cb)` 监听页面尺寸变化 `wx.onNetworkStatusChange(cb)` 监听网络状态
同步型 (Sync APIs)	以 `Sync` 结尾	堵塞式执行，结果以返回值形式同步拿到；失败会抛出异常	`wx.setStorageSync(key, value)` 本地写入 `wx.getSystemInfoSync()` 获取系统信息
异步型 (Async APIs)	其他大多数 API	类似 `$.ajax`：通过 `success / fail / complete` 或 Promise 接收结果；不阻塞 UI	`wx.request({...})` 网络请求 `wx.login({...})` 获取临时登录凭证

1. 事件监听型

// 监听页面尺寸变化
wx.onWindowResize(({ windowWidth, windowHeight }) => {
  console.log('窗口尺寸：', windowWidth, windowHeight)
})

使用场景：对系统级事件做被动响应（旋转、剪切板、网络变化…）。
注意：无法取消，需要在离开页面或组件销毁时自行 ignore 回调结果。

2. 同步型

try {
  const value = wx.getStorageSync('token')
  if (value) { /* ... */ }
} catch (err) {
  console.error('读取缓存失败', err)
}

适用场景：体量小、耗时极短且必须立刻拿到结果的操作（读取配置、本地缓存）。
风险点：阻塞 JS 线程，频繁或大数据量调用会产生卡顿。

3. 异步型

wx.request({
  url: 'https://api.example.com/user', 
  method: 'GET',
  success: ({ data }) => { this.setData({ user: data }) },
  fail: console.error,
})
// Promise 写法（基础库 2.10.0 起）
wx.request({ url: '/login', method: 'POST', data: loginForm })
  .then(({ data }) => /* ... */)
  .catch(console.error)

适用场景：网络、文件、支付、蓝牙等 耗时或需要用户交互 的能力。
最佳实践：统一封装 request 工具（超时、BaseURL、全局错误处理），并用 Promise / async-await 提升代码可读性。

4.4.3 小结

命名即语义：on* = 监听、*Sync = 同步，其余默认异步。
先判环境：调用前可用 wx.canIUse('API 名称') 检测版本兼容。
异常兜底：同步 API 用 try…catch，异步 API 永远写 fail / catch。
抽象封装：将宿主 API 再包装成业务层服务（StorageService、AuthService…），减小“宿主直耦合”。

这样，你就完成了 API 能力层 的知识梳理：

组件塑造「视图层」，API 打通「能力层」，二者在 逻辑层（JS） 里汇合，构成小程序完整的开发模型。

五、协同工作和发布

5.1 协同工作

核心问题	关键要点
为什么要做权限管理？	中⼤型团队往往有多⻆⾊并⾏参与同⼀小程序。为避免「所有⼈都能改所有东西」导致的混乱与风险，需要按岗位/角色做权限边界规划，让协同更安全、更高效。
团队典型组织结构	项目管理者（Owner）：统筹进度与风险，控制对外发布时间节奏；产品组：提出业务需求并在体验阶段收集反馈；设计组：产出设计方案，参与体验阶段的 UI 调整；开发组：代码实现，维护主干分支；测试组：负责测试、回归、灰度放量。
标准开发流程	1. 提出需求 → 产品组 2. 设计 → 设计组 UI/UX 方案 3. 开发 → 开发组编码，推送到 `dev` 分支 4. 体验 → 产品&设计打开体验版，提出修改意见（小程序后台「体验版本」） 5. 测试 → 测试组在「审核版本」进行功能/兼容/性能测试 6. 发布 → 项目管理者合并 `master` 并提交审核，通过后灰度或全量发布

权限划分示例（可映射到微信小程序后台 → 「成员管理」）

角色	推荐权限	说明
项目管理者	管理员	创建/删除成员、提交审核、发布上线
产品经理	体验成员	体验版访问、数据分析查看
设计师	体验成员	无需代码修改，仅验收 UI
开发工程师	开发者	代码上传、体验版生成
测试工程师	体验成员	体验/审核版本测试、提 Bug

Tips

发布节点建议采用 灰度 + 指定比例，确保线上问题可控。

在 CI/CD 流程里引入 npm run lint && npm run test 等质量闸口，保证进入体验版的代码至少通过静态检查和单元测试。

5.2小程序成员管理

5.2.1 成员体系与职责

角色	能力边界	典型职责
管理员	• 新增/删除项目成员和体验成员 • 为项目成员分配/调整角色	统筹安全与进度，最终对外发布
项目成员	可登录小程序管理后台；权限由管理员按角色分配	运营、开发、数据分析等
体验成员	仅能体验体验版，无法登录后台	内测、验收、反馈

一个人可以同时拥有多种身份：管理员 → 项目成员 → 体验成员 (权限递减)

5.2.2 角色-权限矩阵（后台可勾选）

权限 \ 角色	运营者	开发者	数据分析
开发者工具 / 代码上传	×	✓	×
体验版使用	✓	✓	✓
登录后台	✓	✓	✓
数据分析	✓	×	✓
微信支付 / 推广	✓	×	×
云端配置（腾讯云）	×	✓	×
开发设置（服务器域名、消息推送）	×	✓	×
停⽌服务、解绑公众号、插件管理	✓	×	×

最小权限原则：只赋予完成工作必须的权限，降低误操作与安全风险。

5.2.3 典型角色说明 —— 以「开发者」为例

开发者权限：可使用开发者工具、提交代码
体验者权限：可扫码体验版进行自测
登录权限：无需管理员确认即可进入后台
开发设置：域名/消息推送/通用链接二维码配置
腾讯云管理：云函数、数据库等 Serverless 配置

5.2.4 后台添加成员（管理员视角）

左侧栏 → 管理 → 成员管理
在「项目成员」区域点击 编辑 / 添加
- 输入微信号 → 勾选角色 → 保存
滑到「体验成员」区域点击添加
- 可一次性添加 100+ 人用于灰度/内测

完成后，对方在微信“小程序助手”里即可收到邀请。开发者需在 开发者工具 → 添加小程序，输入 AppID 即可开始协作。

5.3 小程序的版本

微信小程序把同一套代码在不同生命周期节点拆分成 4 个“版本阶梯”，既方便团队协作，也保证了线上稳定性：

阶段	关键词	主要使用人群	典型动作
开发版本	开发/自测	开发者	• 通过开发者工具上传 • 账号只保留本人最新一份代码 • 可删除，不影响体验/审核/线上
体验版本	灰度/内测	产品经理、测试、体验成员	• 管理员/开发者在后台把某份开发版本一键“标记为体验” • 只能存在 1 份 • 体验成员扫码即可体验
审核中版本	合规审核	审核员 & 开发者	• 每次提审会把体验版复制成 “审核版” • 后台只能存在 1 份审核中代码 • 可撤回 / 替换代码重新提审
线上版本	正式发布	全量用户	• 审核通过后可直接 “发布” 或 “手动上线” • 新版发布后会覆盖旧线上代码

流程串联
开发版 ↠ （选定）体验版 ↠ （提审）审核版 ↠ （发布）线上版

5.4.1 版本过渡时机

代码自测稳定 → 设为体验版
体验测试无阻塞缺陷 → 提交审核
审核通过 → 立即或择时发布

5.3.2 团队协作小贴士

命名规范：在上传时为 commit 填写 feat/login-v1.3.0 之类的语义版本，后台列表更直观。
多分支并行：多人协作可用 Git 分支（如 feature/… ）合并后再上传，保证体验版始终可用。
灰度发布（高级设置）：重大改动可先把“体验版”发布至 5 % 用户，监控异常后再全量。
回滚策略：后台保留最近 5 个线上版本，可在「版本管理」一键回退。

5.3.3 常见疑问

问题	解答
体验版可以直接提审吗？	不能。需先将体验版另存为“提交审核”动作，系统自动生成审核中版本。
删除开发版本会影响体验版吗？	不会。体验版、审核版、线上版都各自独立存储。
能同时存在多个体验版吗？	不能。后台设计为始终只保留1 个体验版，以避免混淆。

通过“开发 → 体验 → 审核 → 上线”四级缓冲，小程序既能满足多人并行开发，又能把风险锁在灰度区间，从而高效、稳健地交付正式版本。

5.4 发布上线

整体流程：上传代码 → 提交审核 → 发布上线
所有动作都在 微信开发者工具 + 小程序管理后台 完成。

5.4.1 上传代码

开发者工具顶部　点击上传（⭡）
依次填写
- 版本号：仅支持 数字 · 英文，建议遵循语义化 1.2.3
- 更新类型：功能迭代 / Bug 修复 / 待定更新
- 项目备注：30 字左右，便于后台查找
点击上传 → 成功后会在后台产生 开发版本 记录

上传动作只是把本地代码同步到「开发版本」仓库，不会影响体验 / 审核 / 线上版本。

5.4.2 后台确认 & 提交审核

登录 小程序后台 → 【管理】→【版本管理】→【开发版本】
复核 版本号 / 备注是否正确
点击 提交审核
- 按提示填写 功能/类目、体验账号、测试说明
- 提交后会生成唯一的 审核中版本
等待官方审核（通常 2 h – 48 h，节假日顺延）
- 可撤回：若发现严重问题，可在审核列表直接撤回并替换代码

审核要点：页面路径要在 app.json 声明、支付/地图等能力需对齐服务类目，避免使用敏感词。

5.4.3 发布上线

审核通过 → 管理员会在微信收到系统通知
后台【版本管理】→【审核版本】点击发布
发布后，审核版本即刻变为 线上版本，向所有用户开放
回滚：后台保留最近 5 个线上版本，可在【详情】中一键回退

上线动作无需再次审核，但下架只能靠「提审新版本」或「暂停服务」。

5.4.4 基于小程序码推广

优势	说明
① 视觉冲击	小程序码可自定义主题色 / 中心图，比普通二维码更易识别
② 便于品牌	统一视觉体系，强化品牌形象
③ 推广链路	线下海报、线上社媒、短链 wxp://… 多场景触达

获取方法（5 步）
`登录后台 → 设置 → 基本设置 → 基本信息 → 小程序码及线下物料下载

5.5 运营数据

目的：通过官方统计面板实时掌握小程序的使用量、留存、来源、转化等关键指标，辅助产品迭代与推广决策。

5.5.1 查看路径一：小程序后台【统计】

步骤	说明
① 登录 mp.weixin.qq.com → 选择对应小程序	需要运营者 / 开发者 / 数据分析者权限
② 左侧导航点击统计	后台会自动加载最近 7 天概览
③ 切换上方 Tab	概况 / 用户访问 / 留存 / 来源分析 / 页面分析 / 错误分析等

常用指标

日活 DAU / 新增用户 / 累计用户
访问次数 & 平均使用时长
留存率（次日 / 7 日 / 30 日）
访问来源（会话 / 公众号 / 小程序跳转 / 扫码等）
页面转化漏斗—发现高跳失页面快速定位体验问题

导出数据：右上角 下载 CSV，支持按天、周、月汇总，方便二次分析。

5.5.2 查看路径二：微信「小程序数据助手」

步骤	说明
① 打开微信 → 搜索小程序数据助手	官方小程序，无需安装
② 绑定需要查看的数据主体	需使用项目成员微信号登录
③ 进入后选择概况 / 实时数据 / 留存 / PV 排名…	默认展示当天实时数据，每 5 分钟自动刷新

场景优势

移动端随时查：外出、会议中快速拉数
异常提醒：可设置 UV / 错误率阈值，超过即模板消息告警
多小程序切换：运维同学一台手机掌控多个项目

5.5.3 数据角色与权限

角色	后台统计	数据助手	典型职责
运营者	✅	✅	活动投放、增长分析
开发者	✅	✅	性能 & 错误监控
数据分析者	✅	❌ （可申请运营者权限）	深度挖掘、埋点优化
体验者 / 访客	❌	❌	无数据权限

如需开放权限：后台 →【成员管理】→ 角色勾选 数据分析者 或 运营者，即时生效。

5.5.4 实战 Tips

场景	操作建议
新品上线监控	发布当日使用实时数据观察 PV / Crash，≤ 2 h 内快速定位异常
功能 A/B 测试	在后台新建转化漏斗，对比两版本页面 PV→点击→转化路径
渠道投放评估	查看来源分析 → 渠道二维码统计，计算 CPA / ROI
留存提升	结合用户画像 + 留存曲线，针对高流失人群做 push / 优惠券唤回

至此，协同发布后的“运营闭环”就搭建完成：监控 → 发现问题 → 迭代上线 → 再监控。熟练运用后台统计与「小程序数据助手」，让数据成为驱动产品成长的发动机。

六、总结

「起步」这一章，我们把一个微信小程序从 创建 → 开发 → 协同 → 发布 → 运营 的完整闭环走了一遍。到这里，你应该已经具备了下列五项核心能力：

创建项目
- 熟练安装与配置 微信开发者工具
- 明白 appID 的作用与获取方式
理解项目结构
- 知道全局入口文件 app.js / app.json / app.wxss 的职责
- 会在 pages/ 目录中按路由新增页面
拆解页面组成
- 能区分并编写 WXML（结构）/ WXSS（样式）/ JSON（配置）/ JS（逻辑） 四层代码
使用常见组件
- 掌握视图层组件：view 布局、text / rich-text 文本、image 图片等的基本 API 与属性
- 了解 scroll-view、swiper 等进阶组件常见用法
完成协同开发与发布
- 能在后台进行 成员管理，给产品 / 设计 / 开发 / 测试分配合适角色
- 会把代码 上传 → 提交审核 → 正式发布，并生成小程序码进行推广
- 会通过 统计面板 / 小程序数据助手 监控 DAU、留存、页面转化等运营数据