微信小程序开发

一、小程序简介

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 任君挑 微信开发者工具 内置预览、真机调试、上传发布
    上线 传服务器 / 静态托管 提交 审核 → 微信官方“通关打怪”
    • 审核：名称、类目、页面内容、支付逻辑…… 都有规范。
    • 版本管理：每次上传都会生成 体验版、预览版 与 正式版。

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

小结：

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

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

1.2 小程序体验

image-20250514194305968

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

二、第一个小程序

2.1 注册小程序账号

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

2.1.1 点击注册按钮

image-20250514195348617

2.1.2 选择注册账号类型

image-20250514195503708

2.1.3 填写账号信息

image-20250514195555860

2.1.4 提示邮箱激活

image-20250514195925259

2.1.5 点击链接激活账号

image-20250514200016103

2.1.6 选择主体类型

image-20250514200115200

2.1.7 主体信息登记

image-20250514200246115

2.1.8 获取小程序的AppID

image-20250514201039619

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

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

2.2 安装微信开发者工具

2.2.1 工具有什么用？

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

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

2.2.2 下载最新版（Stable Build）

image-20250514223708259

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

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

image-20250514223849983

image-20250514223956952

image-20250514224026230

2.2.4 首次扫码登录

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

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

image-20250514224245896

image-20250514224258199

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

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

image-20250514224634646

小结

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

2.3 创建小程序项目

2.3.1 进入「小程序」标签页

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

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

image-20250514224957603

2.3.2 填写项目信息

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

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

image-20250514225515410

新版选择JS-基础模版

image-20250514225825947

2.3.3 项目创建完成

image-20250514225944486

2.3.4 编译 & 模拟器预览

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

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

image-20250514230136909

2.3.5 在真机上预览项目效果

​ 点击 预览 → 弹出二维码

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

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

image-20250514230301775

2.3.6 认识主界面五大区块

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

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

image-20250514230504216

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

三、小程序代码构成

3.1 小程序项目结构

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

image-20250515164906933

最主要的有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 小程序页面的组成部分

image-20250515165148951

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

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

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

创建新页面的最短路径

  1. 在 pages 下新建文件夹，如 about/
  2. 一键生成四件套（IDE 右键即可）
  3. 把路径 pages/about/about 添加到 app.json 的 pages 数组
  4. 编译 → 模拟器地址栏输入 /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文件——「总控台」

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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文件——开发者工具的偏好设置

1
2
3
4
5
6
7
8
9
10
{
  "miniprogramRoot": "./",
  "projectname": "mp_01",
  "appid": "wx************",
  "setting": {
    "urlCheck": true,
    "es6": true,
    "checkSiteMap": false
  }
}
  • setting 里可关闭/开启特定校验，例如 checkSiteMap
  • es6 设为 true 即可用 import / async 等语法

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

image-20250515172504642

1
2
3
4
5
6
7
8
{
  "rules": [
    {
      "action": "allow",
      "page": "*"
    }
  ]
}
  • allow / disallow 可对某些路径做精准控制
  • 若不想看到 IDE 的索引提示，把 project.config.json → checkSiteMap 设为 false 即可

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

image-20250515172516861

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

1
2
3
4
// 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 数组第一位即可：

    1
    2
    3
    4
    5
    "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 等（都小写，语义直接）

  • 属性语义不同

    1
    2
    3
    4
    5
    <!-- 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

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

index.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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（片段）

1
2
3
4
5
6
Page({
  data:{ title:'Hello World' },
  handleTap(){
    console.log('按钮被点击');
  }
})

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

3.3.3 小结

  1. WXML = 结构 + 模板指令，写法清爽、带数据驱动。
  2. WXSS = CSS Lite + rpx，屏幕适配不操心，全局/局部样式分而治之。
  3. 掌握二者配合后，再加 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 常见交互流程示例

  1. 用户操作 → WXML 触发事件

    1
    <button bindtap="add">+1</button>

  2. 页面 .js 接收事件，修改 data

  3. 视图自动刷新 —— 数据驱动视图，无需手动 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 本身 就是唯一宿主

image-20250515181205507

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

image-20250515181215955

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 为什么要理解宿主环境？

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

4.1.3 一口气总结

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

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

4.2 通信模型

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

4.2.1 通信主体

image-20250515181657953

层次 所在进程 负责内容
渲染层 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()

image-20250515181634413

性能提醒

  • 每次 setData 会经过桥接层，数据包越大、频率越高 → 卡顿越明显。
    养成“只改动需要的字段 + 合并多次写入”的习惯。
  • 网络请求走 Native，HTTPS 握手仍消耗时间；能用云开发或本地缓存的场景不要硬拉远程接口。

4.2.3 常见问题 & 解法

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

4.2.4 小结

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

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 思维导图

1
2
3
4
5
6
7
小程序启动  
├─ 下载代码包 → 解析 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 横向布局

image-20250515183220214

1
2
3
4
5
6
<!-- list.wxml -->
<view class="container">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>
1
2
3
4
5
6
/* 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 示例：纵向滚动列表

image-20250515183242767

1
2
3
4
5
<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 示例：基础轮播

image-20250515183302134

1
2
3
4
5
<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>
1
2
3
4
5
.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" → 自动替换空格方便排版
1
2
3
4
5
<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 等 
1
2
3
4
5
6
7
8
9
10
11
<!--类型-->
<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" 支持保存 / 识别二维码。
1
2
3
4
5
6
7
8
<!--空图占位-->
<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. 事件监听型
1
2
3
4
// 监听页面尺寸变化
wx.onWindowResize(({ windowWidth, windowHeight }) => {
  console.log('窗口尺寸：', windowWidth, windowHeight)
})
  • 使用场景：对系统级事件做被动响应（旋转、剪切板、网络变化…）。
  • 注意：无法取消，需要在离开页面或组件销毁时自行 ignore 回调结果。
2. 同步型
1
2
3
4
5
6
try {
  const value = wx.getStorageSync('token')
  if (value) { /* ... */ }
} catch (err) {
  console.error('读取缓存失败', err)
}
  • 适用场景：体量小、耗时极短且必须立刻拿到结果的操作（读取配置、本地缓存）。
  • 风险点：阻塞 JS 线程，频繁或大数据量调用会产生卡顿。
3. 异步型
1
2
3
4
5
6
7
8
9
10
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 小结

  1. 命名即语义：on* = 监听、*Sync = 同步，其余默认异步。
  2. 先判环境：调用前可用 wx.canIUse('API 名称') 检测版本兼容。
  3. 异常兜底：同步 API 用 try…catch，异步 API 永远写 fail / catch。
  4. 抽象封装：将宿主 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 等质量闸口，保证进入体验版的代码至少通过静态检查和单元测试。

image-20250515185229407

5.2小程序成员管理

5.3 小程序的版本

5.4 发布上线

5.5 运营数据

六、总结