打开微信开发者工具，新建一个项目，填上 AppID 和项目名称，一个空白的小程序就躺在那儿了。这个界面你大概率见过，但很多人卡在第一步：代码写完了，真机上一跑，白屏或者报错，然后就没了下文。其实小程序开发没那么多玄学，你缺的不是复杂框架，而是一条能完整跑通的路径。今天这篇，我就拿一个最简单的 demo 给你捋一遍，从零开始，每一步都落在地上。

先说工具。微信开发者工具是必须的，去官网下载稳定版就行，别追最新版，有时候新版本会带点小脾气，反而耽误事。装好之后，用你的微信号扫码登录，这时候会让你填 AppID——如果你只是想本地跑通，选“测试号”就够了，不需要注册企业账号。这一步很多人纠结，其实没必要，测试号一样能体验完整的开发流程，等你要发布上线了，再去注册正式的小程序账号，成本也就 300 块认证费，而且一年一审。

项目创建好，你会看到左边是模拟器，右边是代码编辑器，底部还有调试器。默认生成的目录结构里， 就是你的首页， 是全局配置， 是入口逻辑。先别急着写业务代码，把这两个文件搞清楚，你就已经跑通一半了。 里有个 数组，里面填的是页面路径，你新增一个页面，必须在这里注册，不然跳转的时候会直接报错找不到页面。这个坑几乎人人踩过，我当年调试了半天，发现就是忘了在 里加一行。

接下来我们写首页。打开 ，这里就是你的页面骨架。我建议你先放一个按钮和一个文本，别搞复杂了。WXML 的语法跟 HTML 很像，但标签是小程序自带的，比如 相当于 ， 相当于 。你写个 ，然后在 的 里定义一个变量，比如 ，再用 绑定到页面上，预览器里立刻就能看到变化。这就是数据绑定的逻辑，也是小程序最核心的机制。

光有展示还不够，得让用户能交互。给那个按钮绑定一个点击事件，在 里写个方法，比如 ，里面用 去修改 的值。注意，这里一定要用 ，直接给 赋值是不生效的，因为小程序的数据驱动是基于 来通知视图层更新的。写完之后，点一下按钮，文字变了，恭喜你，事件系统也通了。到这里，你已经掌握了小程序最基础的两板斧：数据绑定和事件响应。

然后咱们试着加一个页面跳转。在 目录下新建一个文件夹 ，里面创建四个文件：、、。别嫌麻烦，小程序每个页面都是这四个文件配套的。然后在 的 数组里加上 。接着在首页的按钮上加上 跳转，代码就一行：。跑一下，点击按钮，页面切换过去了。注意跳转路径前面要带斜杠，而且必须是绝对路径，相对路径在某些场景下会失效。

页面跳过去了，但你可能想带点参数过去。比如从列表页点进详情页，总要传个 ID 吧。这也很简单，在跳转的 URL 后面拼上参数：，然后在详情页的 生命周期函数里，通过 就能拿到这个值。打印到控制台看看，数据过来了。这里有个细节，如果参数是中文，记得用 编码一下，不然容易乱码。这一套下来，你的 demo 已经有了页面、交互、传参、跳转，基本的小程序骨架已经成型了。

最后一步，真机预览。在开发者工具右上角点“预览”，会生成一个二维码，用你的微信扫一扫，手机上的小程序就打开了。这时候你会发现，手机上看到的和模拟器里略有差异，比如底部安全区、刘海屏适配，这些问题在模拟器里是看不全的。但别慌，你只需要在 里配置一下 的 和 ，再在页面的 文件里设置 来适配自定义导航栏，基本就能解决大部分适配问题。跑通这一步，你手里这个 demo 就是一个能拿出去给别人体验的完整作品了。

回头看看这一路，你从新建项目开始，到数据绑定、事件交互、页面跳转、参数传递，再到真机预览，其实没碰什么高深的东西，每一步都是踩着实实在的地面往前走。很多人学小程序，总想着先啃完文档再动手，结果文档翻到第三章就放弃了。正确的姿势就是像我这样，拿一个最小的 demo 跑通全流程，中间遇到什么问题就搜什么，碰到的坑多了，你自然就熟了。这个流程你走完一遍，再回去看文档，会发现那些抽象的概念全都有了对应的画面，学起来快得多。