零基础玩转小程序:第5集微信开发者工具介绍

微信开发者工具到底装哪个版本？官网给出稳定版、预发布版、开发版三条下载线，第一次打开页面的人往往卡在这一步。这篇把工具从下载到第一个页面跑起来的完整路径拆开讲，零基础玩转小程序:第5集微信开发者工具介绍要解决的就是「装完不会用、用完不知点哪」的问题。

微信开发者工具本质是一个集成环境：代码编辑、实时预览、调试面板、上传发布都在同一个窗口里完成。不用另外装编辑器，也不用自己搭服务器。你只需要一个已注册的小程序账号，拿到 AppID，剩下的按下面的步骤走。

从下载到跑通第一个页面，按这五步走

顺序不要跳。跳步最容易出的问题是模拟器白屏、真机预览报错，回头排查比从头走一遍更费时间。

1. 下载稳定版并安装。官网下载页分稳定版、预发布版、开发版，新手只选稳定版，版本号形如 1.06.x。安装路径不要带中文和空格，否则个别插件加载会失败。安装完成后扫码登录，用绑定小程序管理员身份的微信扫，权限才完整。
2. 新建项目时填对三项。项目名称随意；目录单独建一个空文件夹，不要指向已有代码目录；AppID 填小程序后台「开发管理—开发设置」里那串 wx 开头的字符。没有 AppID 可以先点「测试号」，但测试号不能真机预览，也不能上传，只适合纯看界面。
3. 认识主界面的四个区。左侧是目录树，pages 下每个文件夹对应一个页面，含 .wxml、.wxss、.js、.json 四个文件；中间是模拟器，可选 iPhone、安卓机型与屏幕尺寸；右侧是编辑器；底部是调试器，Console 看报错、Network 看接口请求、Storage 看本地缓存。初学阶段九成问题在 Console 里能直接看到红色报错行。
4. 改一处代码看一次效果。打开 pages/index/index.wxml，把里面一行文字改掉，保存，模拟器会自动刷新。这一步的意义是确认编译链路通了。如果没刷新，点工具栏的「编译」按钮强制重编，仍无变化就检查目录是不是选错了。
5. 真机预览验证。点工具栏「预览」，生成二维码，用微信扫。手机上看到的排版和模拟器可能有出入，尤其是底部安全区、字体大小、fixed 定位元素。真机跑通了，才算这个页面真的能用。

五步走完，大概 20 到 40 分钟。这个时间投入值得，后面所有开发动作都建立在工具能正常编译这个前提上。

工具里几个容易被忽略但很实用的能力

界面上的按钮不少，新手常用的其实就那几个。下面这些属于「知道就省事、不知道也能凑合」的功能，但用起来效率差别明显。

• 编译模式可自定义。工具栏「普通编译」下拉里能新增编译模式，指定启动页面和携带参数。调试某个二级页时不用每次从首页点进去，直接设成启动页，省掉一串点击。
• 调试器里的 Wxml 面板能选中元素。模拟器上点不到的小元素，在 Wxml 面板里点对应节点，右侧直接显示它的样式和盒模型，比盲改样式快得多。
• 详情面板管本地设置。「不校验合法域名」这个勾选项在开发期很关键，本地接口是 http 或者没备案的域名时，勾上才能请求通。上线前记得取消，正式环境走的是后台配置的服务器域名白名单。
• 代码片段可分享。工具支持把一段可运行的最小代码导出成片段链接，发给别人直接打开。排查问题时把复现代码发过去，比截图描述高效。
• 版本管理面板内置 Git。不用切到命令行，提交、对比、回滚都在工具里完成。改动多了之后，回滚能力比什么都实在。

这些功能分布在不同面板里，第一次找会绕。有个笨办法：把工具栏每个按钮点一遍，看弹出来什么，比翻文档记得牢。

AppID、测试号、体验成员，三个身份别混

AppID 是小程序的身份证，上传、真机预览、调用需要登录态的接口都认它。测试号是临时替代品，功能受限。体验成员是小程序后台添加的微信号，只有体验成员能扫开发版二维码。三者的关系是：AppID 决定你是谁，体验成员决定谁能看，测试号只在没 AppID 时顶一下。上传代码前，先把要参与测试的同事微信加进体验成员名单，否则对方扫码会提示无权限。

装完工具先做这几项设置，能少踩不少坑

默认设置是按通用场景配的，实际开发里几处不改会反复出问题。按下面的清单过一遍，十分钟内能完成。

• 代码风格统一。设置里打开保存时自动格式化，缩进选 2 空格。团队协作时这一项不统一，代码对比时全是格式差异，看不出真实改动。
• 关闭「上传时压缩代码」之外的其他自动压缩选项。开发期代码压缩后报错行号会偏移，定位问题困难，等上线再开。
• 把项目目录加进版本管理并提交一次初始代码。这一步做完，后面任何误删都能找回来。
• 在详情—本地设置里勾选「不校验合法域名」，同时记下上线前要取消。这个勾选项忘了取消导致线上接口全挂的情况并不少见。
• 模拟器机型选一款主流安卓和一款 iPhone 交替看。小程序的样式兼容问题多出在安卓低版本和 iPhone 底部安全区。

工具只是载体，代码怎么写、页面怎么组织才是主体。开发环境跑通之后，下一步通常是照着官方示例把 tabBar、页面跳转、数据请求各写一遍。想先了解小程序从零到上线的整体流程和每个环节的注意点，可以看《做小程序》，那里把账号注册、类目选择、审核提交流程串成了一条线，和工具使用是前后衔接的关系。

有一个判断可以先给：这台工具装好之后，头两三天不要急着写业务代码，把模拟器、调试器、编译模式、真机预览这四个入口各点几遍，熟悉到不用想位置。工具用不顺，写十行代码要花八分钟找报错在哪。

零基础玩转小程序:第5集微信开发者工具介绍到这里，验收标准很简单——你能在模拟器改一个字、真机立刻看到变化，这一步过了，后面的页面开发才有落脚点。