入门：微信小程序是什么与怎么起步

基于微信小程序（基础库 3.x）· 核于 2026-07

速查

• 一句话：微信小程序＝微信 App 内的原生小程序框架 + 运行平台，用微信定制的 WXML/WXSS ＋ JS ＋ JSON 编写，扫码 / 搜索 / 分享即达，无需安装、用完即走；不是 npm 包、不是套壳 H5
• 不是 H5：小程序跑在双线程运行时（逻辑层无 DOM/BOM），标签是组件（view/text）而非 HTML 标签；H5 是 WebView 里的网页
• 四文件：每个页面/组件＝.wxml(结构) + .wxss(样式) + .js(逻辑) + .json(配置)；全局＝app.js / app.json / app.wxss（详见四文件与 WXS）
• 起步：注册微信公众平台账号拿 AppID → 下载微信开发者工具 → 新建项目 → 编辑 → 真机预览（扫码）→ 上传 → 提交审核 → 发布
• 首页约定：app.json 里 pages 数组的第一项即首页
• 核心机制预告：逻辑层与渲染层双线程隔离，setData 是唯一跨线程更新 UI 的通道，也是性能命门（详见双线程与 setData）
• 跨端底座：uni-app / Taro / mpvue 把 Vue/React 编译成小程序四文件，它是这些框架的编译目标，懂原生机制才懂编译产物的性能规律
• 版本坐标：基础库 3.x（主流），Skyline 正式版起于 3.0.0，鸿蒙支持起于 3.7.x；用 wx.canIUse('api.method') 做特性检测

一、微信小程序解决什么问题

微信小程序要回答的问题是：能不能让用户「无需下载安装 App、也不用打开浏览器」，就在微信里即点即用一个功能完整、体验接近原生的应用？ 它的答案是——微信在客户端里内建一套小程序运行时，开发者用微信定制的一套 DSL（WXML / WXSS）＋ JavaScript ＋ JSON 编写应用，通过扫码、搜索、聊天分享、公众号跳转等入口直接进入，「用完即走」，不占用户的桌面与存储。

这条路线区别于三类方案：

• vs 原生 App（Swift/Kotlin）：小程序无需应用商店审核分发、无需用户主动安装，获客成本低、迭代快；代价是能力受微信运行时框定，无法调用任意系统 API。
• vs H5 网页：H5 是浏览器 / WebView 里的网页，能直接操作 DOM；小程序跑在双线程运行时里，逻辑层没有 DOM / BOM，且能力、性能、留存都强于普通 H5（有本地缓存、原生级组件、开放能力）。
• vs 跨端框架（uni-app/Taro）：这些框架把 Vue/React 语法编译成小程序四文件，小程序原生机制是它们的运行底座——本叶讲的正是这个底座。

二、小程序与 Web、跨端框架是什么关系

如果你会 Web 前端，就已经会了小程序的一大半：JS 逻辑、Flex 布局、事件驱动的心智完全通用。差异集中在三处：

1. 标签是组件而非 HTML：没有 div/span/img，取而代之是 view/text/image/scroll-view 等内建组件，它们由渲染层解析。
2. 样式受限且新增 rpx：WXSS 支持大部分 CSS，但部分选择器受限、不能用本地图片做背景；新增响应式单位 rpx（屏幕宽恒为 750rpx）。
3. 逻辑层无 DOM/BOM：拿不到 window / document，不能直接操作节点；更新界面唯一途径是 setData（把数据从逻辑层同步到渲染层）。

而 uni-app / Taro / mpvue 正是把「Vue/React 组件 + 路由 + 样式」在构建期编译成上述四文件。所以理解小程序的双线程、setData、生命周期，等于理解这些框架产物「为什么这样跑、卡在哪里」。

三、怎么起步：开发者工具四步走

小程序开发几乎全程围绕微信开发者工具（官方 IDE，含模拟器、调试器、真机预览、体验评分、上传发布）：

1. 注册账号拿 AppID：到微信公众平台注册小程序账号，在「开发 → 开发管理 → 开发设置」拿到 AppID（个人 / 企业主体能力不同）。
2. 下载并登录开发者工具：安装微信开发者工具，微信扫码登录，新建项目时填入 AppID（无 AppID 可选「测试号」，但无法用需主体的能力）。
3. 编辑与调试：在模拟器里实时预览，用调试器看 Console / Network / Storage；开发阶段可在「详情 → 本地设置」勾选「不校验合法域名」跳过域名白名单（仅开发有效）。
4. 真机预览 → 上传 → 审核 → 发布：手机扫「预览」二维码真机验证 → 「上传」填版本号与备注 → 到公众平台「提交审核」→ 通过后「发布」上线；支持体验版、灰度 / 分阶段发布。

也有全新改版的「开发者工具 2.0」预览版，深度集成 AI 编程助手（小程序知识库 + 端到端流程 + 智能调试），但日常仍以稳定版为主。

四、第一个页面：四文件最小示例

一个页面由四个同名文件组成（如 pages/index/index.*）。逻辑层用 Page() 注册页面、data 存渲染数据、setData 更新，视图层用组件 + 数据绑定渲染：

// pages/index/index.js —— 逻辑层
Page({
  data: { msg: 'Hello' },              // 只放"要渲染"的数据
  clickMe() {
    this.setData({ msg: 'Hello World' }) // 唯一的跨线程更新 UI 途径
  },
})

<!-- pages/index/index.wxml —— 视图层（Mustache 双花括号做数据绑定） -->
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

// app.json —— 全局配置，pages 第一项即首页
{
  "pages": ["pages/index/index"],
  "window": { "navigationBarTitleText": "标题" }
}

三条最容易踩的入门规则先记住：

• .json 是纯 JSON：不能写注释、不能写逻辑（上面示例注释仅为讲解，真实 app.json 里不可留）。
• data 只放渲染相关数据：与界面无关的业务数据挂普通属性（this.userData = {}），别塞进 data——否则每次 setData 都白白跨线程传输。
• 首页由 pages 数组第一项决定，不是文件名。

五、心智地图：接下来读什么

• 想搞懂「四个文件各管什么、rpx 怎么算」→ 四文件与 WXS。
• 想搞懂「小程序为什么这么设计、卡在哪、怎么优化」→ 双线程与 setData（最核心）。
• 想写页面逻辑、组件、跳转、调 API → 生命周期·API·事件。
• 想突破包体积、上 Serverless → 分包与云开发。
• 想把性能推向原生 → Skyline 与性能优化。
• 想接入登录与收款 → 登录与支付。
• 速记表在 参考。