概述与开发环境搭建

1.1 微信小程序是什么

微信小程序（WeChat Mini Program）是腾讯微信团队于 2017 年 1 月正式上线的轻量化应用平台。与传统 App 不同，小程序运行在微信客户端内部，用户无需下载安装即可使用，用完即走。截至 2025 年，全平台已有超过 400 万个小程序，日活用户突破 5 亿。

小程序 vs 传统 App vs H5

维度	原生 App	H5 网页	微信小程序
安装成本	需下载安装（MB-GB）	无需安装	无需安装，首次加载约 1-2 MB
用户体验	最佳，原生渲染	较差，受浏览器限制	良好，Skyline 接近原生
原生能力	完全访问设备 API	受限，安全沙盒	微信授权的 API 集合
开发成本	高，iOS/Android 双端	低，跨平台	中，一套代码多端运行
发现渠道	应用商店	搜索引擎 / 链接	微信搜索 / 二维码 / 分享
商业化	应用内购 / 广告	广告 / 订阅	微信支付 / 广告 / 订阅消息

1.2 小程序架构演进

理解小程序的架构有助于写出更高性能的代码。微信小程序从诞生到现在经历了三个重要阶段：

第一代：双线程架构（2017 年）

最初的小程序采用双线程架构——逻辑层（AppService）与渲染层（WebView）分别运行在独立线程，通过 Native Bridge 通信。这一设计解决了 Web 应用中 JS 执行阻塞页面渲染的问题，但也引入了线程通信的序列化开销。

第二代：Skyline 渲染引擎（2022 年起，2024 年稳定）

Skyline 是微信全新的渲染引擎，抛弃了 WebView，改用自研渲染管线，实现了更接近原生 App 的性能体验。2024 年随基础库 3.x 全面稳定，成为新项目推荐引擎。

1.3 Skyline vs WebView 详细对比

特性	WebView 模式	Skyline 模式
渲染引擎	系统 WebView（WKWebView/X5）	微信自研渲染管线
JS 运行时	JavascriptCore / V8	JavascriptCore / V8（同）
原生组件层级	原生组件总在最顶层	同层渲染，与普通组件同级
动画性能	依赖 CSS Animation / WXS	worklet 动画（渲染线程直接执行）
手势系统	无原生手势竞争	声明式手势，支持竞争/协作
共享元素动画	不支持	原生支持（shared-element）
CSS 支持	WebView CSS 全集	部分 CSS，含新增 Skyline 专属
启动速度	每页一个 WebView，初始化较慢	单线程渲染，启动更快
兼容性	全版本兼容	基础库 2.30.4 以上（需配置）

1.4 微信开发者工具安装与配置

微信开发者工具（WeChat DevTools）是小程序官方 IDE，基于 Electron 构建，集成了代码编辑器、模拟器、调试器和云开发控制台。

安装步骤

1. 访问 微信公众平台（mp.weixin.qq.com），注册或登录小程序账号，获取 AppID
2. 前往 开发 → 开发工具 下载页，选择 Stable 稳定版（当前 1.06.x），按操作系统下载 macOS / Windows 安装包
3. 安装完成后，使用微信扫码登录开发者工具（需与小程序账号关联的微信号）
4. 首次启动会提示更新基础库版本，选择 3.x 最新稳定版
5. 在设置 → 通用 → 主题中可切换明暗主题

界面布局说明

1.5 创建第一个小程序项目

让我们从一个最小项目开始，理解小程序的基础文件结构。

新建项目

打开微信开发者工具，点击「+」新建项目，填写：

• 项目目录：选择一个空文件夹
• AppID：填写在公众平台获取的 AppID（测试号也可以）
• 开发模式：选择「小程序」
• 模板：选择「不使用模板」或「基础模板」
• 渲染引擎：选择「Skyline」

最简项目结构

├── app.js          # 小程序逻辑（App 注册、全局方法）
├── app.json        # 全局配置（路由、窗口样式）
├── app.wxss        # 全局样式
├── project.config.json  # 项目配置（工具设置、AppID）
├── sitemap.json    # 页面搜索配置
└── pages/          # 页面文件夹
    └── index/
        ├── index.js    # 页面逻辑
        ├── index.json  # 页面配置
        ├── index.wxml  # 页面模板
        └── index.wxss  # 页面样式

app.js — 小程序入口

// app.js — 每个小程序只有一个 App 实例
App({
  // 小程序初始化完成时触发（全局只触发一次）
  onLaunch(options) {
    console.log('小程序启动', options)
    // options.scene: 进入场景值（1001=发现栏，1011=扫码等）
  },

  // 小程序显示/切前台时触发
  onShow(options) {
    console.log('前台显示', options)
  },

  // 小程序隐藏/切后台时触发
  onHide() {
    console.log('切换后台')
  },

  // 全局共享数据（各页面可通过 getApp() 访问）
  globalData: {
    userInfo: null,
    isLoggedIn: false
  }
})

pages/index/index.wxml — 第一个页面

<!-- index.wxml -->
<view class="container">
  <view class="title">你好，微信小程序 🎉</view>

  <!-- 数据绑定：{{}} 语法 -->
  <view class="count">点击次数：{{count}}</view>

  <!-- bindtap 绑定点击事件 -->
  <button bindtap="addCount" type="primary">点我 +1</button>
</view>

pages/index/index.js — 页面逻辑

// index.js
Page({
  // 页面初始数据
  data: {
    count: 0
  },

  // 自定义事件处理函数
  addCount() {
    this.setData({
      count: this.data.count + 1
    })
  },

  // 生命周期：页面加载
  onLoad(options) {
    console.log('页面加载，参数：', options)
  }
})

pages/index/index.wxss — 页面样式

/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 40rpx;
  min-height: 100vh;
  background: #f8f8f8;
}

.title {
  font-size: 44rpx;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 40rpx;
}

.count {
  font-size: 36rpx;
  color: #07c160;
  margin-bottom: 40rpx;
  font-weight: 600;
}

1.6 真机预览与调试

在开发者工具中点击顶部「预览」按钮，会生成一个二维码，用绑定了开发者权限的微信号扫码，即可在真机上实时预览小程序。

常用调试快捷键

1.7 小程序账号体系

开发微信小程序涉及多个主体身份，理解它们的关系很重要：