跑起来第一个小程序——账号、工具与项目初探

Corey2026/8/20大约 11 分钟

小程序开发系列 · 第 2/14 篇
上一篇：《微信小程序是什么》
下一篇：《页面四件套与数据绑定》

开头：概念懂了，然后呢

上一篇讲了双线程、宿主环境这些「为什么」，但一个没写过小程序的人打开微信开发者工具的第一感受多半是：好多按钮，好多面板，不知道从哪下手。

本篇把「从零到真机上跑起来」这条路走一遍，只做四件事：

雪球	这一球加上去的	当场能看见的效果
1	账号与 AppID	有了「身份证」，能登录管理后台
2	开发者工具	本机有一个能编译、能模拟的 IDE
3	新建项目 + 项目结构	一个能跑的默认模板，认识每个文件
4	编译与真机预览	手机微信里打开自己的小程序

四步全做完，你就有了后续 12 篇要一直往上滚的那只雪球——本系列的实验项目「小事记」（一个待办清单小程序）。

一、申请账号：先领身份证

小程序的开发入口是一个账号，账号的编号叫 AppID。官方文档的原话：「小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID（注意这里要区别于服务号或订阅号的 AppID）」。

两条路线，按需选择：

	正式账号（推荐）	测试号
申请方式	小程序注册页注册，选个人主体	测试号申请页，微信扫码即得
需要	未注册过公众平台的邮箱 + 身份证 + 手机号	只要一个微信号
费用	免费	免费
能否发布上线	能（第 14 篇要用）	不能
域名白名单等配置	完整	部分
适合	跟完本系列全程	快速试水前几篇

操作（正式号路线）：

打开小程序注册页，邮箱激活、信息登记选「个人」，按指引填身份证、绑手机号；
注册完成，登录小程序管理后台；
左侧菜单「开发」→「开发设置」，页面里就能看到 AppID（wx 开头的字符串）——把它记下来。

✅ 实测（2026-08-20，Windows 10）：注册后登录 mp.weixin.qq.com，左侧菜单「开发」→「开发管理」→「开发设置」，页面「开发者 ID」区块里就是 AppID(小程序ID)——wx 开头 18 位（形如 wx59****）。新手常见卡点就是这个菜单藏得深，不在首页任何显眼位置。

一个容易混的点先钉死：AppID ≠ 账号密码。AppID 是公开给工具和代码用的编号，真正要保密的是「开发设置」页里的 AppSecret（后续调服务端接口用，本系列暂时用不到，先别动它）。

二、安装开发者工具：本机 IDE 就位

小程序不像网页有个 URL 就能看，它需要一个专门的 IDE 来编译、模拟、上传——微信开发者工具。

操作：

打开开发者工具下载页；
下载 Windows 64 位 · 稳定版 Stable（还有 RC/预发布版可尝鲜，学习阶段用稳定版就好）；
安装后打开，微信扫码登录——工具和你的微信账号绑定，后面上传代码、真机预览都靠这个身份。

✅ 实测（2026-08-20，Windows 10）：安装 Stable 2.02.2608040（win32-x64），版本号在工具右上角「关于」里看。扫码登录一次即可，后续打开免扫码。

三、新建项目：向导每一项都选什么

工具首页 → 「小程序」→ 「+」新建，向导里有三个关键选项，逐个说清为什么：

选项	选什么	为什么
开发模式	小程序	同一个工具还能开发小游戏、插件，别选岔
后端服务	不使用云服务	云开发是官方托管后端（Serverless），本系列讲纯小程序端；以后要用随时能开
模板	JS-基础模板（会用 TypeScript 的可选 TS）	基础模板是最小可运行骨架，正好用来逐文件拆解；「不使用模板」给完全从零的手写党，本系列 03 篇起会把它改造成自己的页面

其余两项：

目录：填一个空目录——官方文档特别标注「注意：你要选择一个空的目录才可以创建项目」。本系列用 E:\MyGithub\mp-demo-lab；
项目名称：小事记（名字随意，只影响工具里显示，不等于上线后的小程序名）；
AppID 填上一节拿到的（没有正式号就填测试号的）。

点「新建」，工具会生成默认模板并自动编译，左侧模拟器里立刻能看到效果。

✅ 实测（2026-08-20，工具 Stable 2.02.2608040）：新手第一坑就埋在这里——按「基础模板」的意图走完新建向导，落盘两次都是云开发 QuickStart 模板（projectname 为 quickstart-wx-cloud，多出 cloudfunctions/ 目录，app 三件套被套进 miniprogram/ 子目录，首页标题「云开发 QuickStart」）。云开发模板自带一整套云函数示例，对本系列是干扰。
最终采用的解法是绕过向导：手写一个与基础模板等价的最小骨架（9 个文件），再用工具的「导入」打开目录——project.config.json 里写好 AppID，导入时工具自动识别。目录结构如下：
mp-demo-lab2/
├── app.js               # App 实例 + globalData
├── app.json             # pages 户口本 + window 全局窗口配置
├── app.wxss             # 公共样式
├── project.config.json  # AppID 在这（导入后工具自动补全了一大批 setting 字段）
├── sitemap.json
└── pages/
    └── index/           # 首页四件套
        ├── index.js / index.json / index.wxml / index.wxss
判断建对了的标志：根目录直接是 app.js/app.json/pages/，没有 cloudfunctions/ 和 miniprogram/ 套娃。如果你在向导里能明确找到「不使用云服务 + 基础模板」的组合，走向导一样可以——两条路殊途同归。

四、看懂工具界面：三大块

项目打开后，开发者工具的主体分三块，先认脸：

区域	位置	干什么	对应上一篇的概念
模拟器	左侧	渲染小程序界面	相当于渲染层的 WebView（Chromium WebView）
编辑器	中间	改代码	普通编辑器，和 VS Code 同源
调试器	右侧	Console 日志、Sources 断点、Network、Storage 等	相当于 Chrome DevTools，看的是逻辑层

顶部工具栏最常用的三个按钮，从现在起会天天按：

编译：重新构建，模拟器刷新（快捷键 Ctrl+B）；
预览：生成二维码，手机微信扫码，在真机上跑当前代码——代码被推到微信的服务器，手机从那拉取执行，这其实就是第 14 篇「开发版」的运作方式；
真机调试：比预览更进一步，手机上运行的同时，工具里能看它的日志、断点（第 05 篇调事件时用它）。

✅ 实测（2026-08-20）：点「编译」模拟器正常渲染；点「预览」→ 手机微信扫码，真机成功打开，显示内容与模拟器一致（本例是静态文本，看不出引擎差异——03 篇起页面复杂了，差异观察继续）。注意预览走的是「代码上传到微信服务器 → 手机拉取」的链路，不是局域网直连。

五、项目结构一览：默认模板里都有什么

先按官方目录结构把「理论骨架」摆出来，再对照你的实际目录：

mp-demo-lab/
├── app.js               # 小程序逻辑：注册全程序唯一的 App 实例
├── app.json             # 全局配置：页面户口本（pages）、窗口样式、tabBar
├── app.wxss             # 公共样式（可选）
├── project.config.json  # 工具配置：AppID、编译选项等（给开发者工具看的）
├── sitemap.json         # 搜索优化：哪些页面允许被微信索引
└── pages/
    └── index/           # 一个页面一个目录，四件套同名
        ├── index.js     # 页面逻辑
        ├── index.wxml   # 页面结构（模板）
        ├── index.wxss   # 页面样式
        └── index.json   # 页面配置

几个要点：

pages 数组是户口本：app.json 的 pages 里登记了哪些页面，小程序才有哪些页面；第一个元素是首页。默认模板通常还有第二个页面（比如 logs），在模拟器里从首页点进去就能看到——你人生第一次「页面跳转」马上就要在 06 篇被拆开揉碎讲。
project.config.json 不属于「小程序」本身：它描述的是「这个项目在这台机器的工具里怎么编译」——所以团队协作时它常进版本库，但微信运行时根本不看它。
sitemap.json：告诉微信的爬虫哪些页面可以进搜索（「搜一搜」能搜到你），对运行无影响，先放着。
app.json 是第一个值得逐行读的文件：pages（页面户口本）、window（导航栏标题/颜色等全局窗口样式）这两个字段现在就能看懂。官方起步教程里给的示例长这样（默认模板形态）：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

✅ 实测：本系列实验项目的 app.json（手写骨架，逐字段都能对上上面的说明）：
{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "小事记",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#f6f6f6"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}
两个新面孔先混个脸熟：style: "v2" 表示用新版组件样式；lazyCodeLoading: "requiredComponents" 是按需注入（第 13 篇性能篇的主角之一）。另外观察到一个工具行为：「导入」项目后，开发者工具会自动往 project.config.json 里补全一大篇 setting 字段（es6 转换、压缩、sourcemap 等开关）——你的原始 9 行配置被扩写成 30 多行，这不是被改坏了，是工具在写自己的默认设定。

📌 版本口径：本节「默认模板长什么样」的描述基于 2026-08 的官方基础模板，模板内容随工具版本会变；你看到的和文章不一致很正常，以实际为准并告诉我，我把文章改成你真实看到的版本。

六、编译与预览：三种「跑起来」的区别

到这里，「跑」字已经出现了三种含义，提前理清，后面篇目不再纠缠：

方式	在哪跑	渲染引擎	什么时候用
编译（模拟器）	开发者工具左侧	Chromium WebView	改代码后立即看效果，日常 95% 的时间
预览	手机微信	真机引擎（XWeb / WKWebView）	验证「真机上到底什么样」
真机调试	手机微信 + 工具联动	真机引擎	需要看真机日志/断点时

再强调一次 01 篇的结论在实践中的样子：模拟器正常 ≠ 真机正常。工具渲染层是 Chromium，真机 Android 是 XWeb、iOS 是 WKWebView——样式细节（尤其滚动、字体、吸顶）最终以真机为准。

小结

开发小程序的前置三件套：AppID（身份证）→ 开发者工具（IDE）→ 空目录新建项目；
向导三选项：小程序 / 不使用云服务 / JS-基础模板——每项都有明确的「为什么」；
工具三大区：模拟器（渲染层）/ 编辑器 / 调试器（逻辑层），三个「跑」：编译 / 预览 / 真机调试；
项目结构就是 01 篇的抽象落地：app 三件套 + pages 下的页面四件套，app.json 的 pages 是户口本、第一个是首页；
project.config.json 是给工具看的，sitemap.json 是给微信爬虫看的，都不是给运行时看的。

思考题：

预览时手机上跑的代码是从哪来的？是开发者工具通过局域网推给你的手机，还是经过了微信的服务器？（提示：想想为什么公司内网隔离环境里「预览」偶尔会失败，而「编译」永远正常。）
把 app.json 里 pages 数组的两个页面顺序对调，会发生什么？改完编译试试（改回来就行）——这个实验 10 秒钟能做，它验证的是户口本「第一个是首页」的规则。
删掉 pages/logs/logs 这个页面目录，但不改 app.json，编译会怎样？（会报错的——为什么户口本登记了却找不到人，工具不能装看不见。）

参考（微信官方文档，2026-08 核验）：开始：申请账号/安装工具/第一个小程序/编译预览｜目录结构｜开发者工具介绍｜工具下载页