微信开发者工具全攻略，零基础快速设计你的第一款小程序

打开微信开发者工具的那一刻，你可能会被界面上一排排按钮吓到——左边是模拟器，右边是代码区，上面还挂着个菜单栏。别慌，我见过太多人在这一步就关掉窗口，转头去学什么“三天精通小程序”的课程。其实这东西没那么玄乎，你手机上那些天天用的美团、拼多多，最初都是从这样一个空白窗口里长出来的。我今天不跟你讲官方文档那套，就按我当初踩坑摸出来的路子，带你走一遍从注册到跑通第一个页面的全过程。

先说最要紧的准备动作，注册账号。很多人卡在这一步是因为找不到入口——你直接搜“微信公众平台”，点右上角的“立即注册”，选“小程序”这个类型。注意，邮箱别用QQ邮箱，容易被系统判定为个人号导致后续没法认证，我当初就吃过这个亏，白等了一天审核。注册完拿到AppID，这东西相当于你小程序的身份证号，后面写代码要反复用到。如果你只是自己练手，可以不填AppID，选“测试号”模式，功能一点不少，只是不能真发布到微信里。

接下来下载开发者工具，微信官网就有，分Windows和Mac两个版本。安装完打开，会让你选择“小程序”还是“小游戏”，选小程序。项目名称随便起，比如“我的第一款应用”，目录选个你记得住的位置，AppID就填刚才注册那个，或者选测试号。点确定后，你会看到一堆自动生成的文件，别被吓着——这相当于一个空房子，墙和地板都给你铺好了，你只需要往里面放家具。

现在进入核心环节，理解那四个核心文件的角色。app.js是全局逻辑，管着小程序启动时要做什么；app.json是全局配置，决定你的小程序长什么样，比如窗口背景色、页面路由；app.wxss是全局样式，相当于整栋楼的装修风格；而pages文件夹里，每个子文件夹代表一个页面，每个页面又包含四个文件——wxml管结构，wxss管样式，js管交互，json管这个页面的小配置。我建议你第一件事就是打开pages/index.wxml，把里面默认的“Hello World”删掉，自己写一行`你好，微信`，然后按Ctrl+S保存，右边模拟器立刻就会显示出来。这种即时反馈特别上瘾，你能亲眼看到自己的代码变成屏幕上的内容。

接下来咱们做点能拿得出手的东西，比如一个带按钮的页面。在wxml里加一个``标签，然后去js文件里给它绑定事件。举个例子，你要做一个点击按钮就弹出“今天也要加油”的提示框，只需要在button上写`bindtap="showMsg"`，然后在js文件里加一个方法：`showMsg: function() { wx.showToast({ title: '今天也要加油', icon: 'success' }) }`。就这么简单，你完成了小程序里最核心的“事件驱动”逻辑。很多教程会把这部分讲得特别复杂，什么数据绑定、生命周期函数，其实你只需要记住：用户点一下，代码响应一下，这就是小程序交互的本质。剩下那些高级概念，等你把这个跑通了再学也不迟。

界面好看不好看，全靠wxss撑场面。你可以把整个页面的背景改成渐变蓝，给按钮加上圆角和阴影。比如在index.wxss里加这么一段：`page { background: linear-gradient(to bottom, #a8edea, #fed6e3); } button { border-radius: 20rpx; box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1); }`。注意单位用rpx，这是微信特有的自适应单位，不管在iPhone还是安卓上宽度都会自动缩放，你硬记下来就行，不用问为什么。改完保存，看右边模拟器，整个页面气质完全不一样了——从一个白底黑字的测试页，变成了有设计感的界面。这种即时视觉反馈，就是自学小程序最爽的地方。

等你把单个页面玩熟了，就该试试页面跳转。在app.json里注册新页面，比如加一行`"pages/detail"`，然后在index.wxml里放一个按钮，绑定`wx.navigateTo({ url: '/pages/detail' })`，你就能实现点一下跳到新页面的效果。这里有个坑得提醒你，URL路径必须带斜杠开头，而且页面文件必须真实存在，不然会报错。跳转成功后，新页面会自带一个返回箭头，这个微信帮你处理好了，不用自己写。等你把几个页面串起来，你的小程序就有了基本的骨架，不再是孤零零一个页面了。

提醒你两个常见卡点。第一个是调试器报错，别怕，红色报错信息里往往直接告诉你哪一行代码出了问题，鼠标点过去就能定位。第二个是模拟器和真机效果不一致，比如你写的字体大小在模拟器上刚好，到iPhone上却显得挤——这是因为不同设备屏幕密度不同。解决办法是养成习惯，用rpx做单位，并且每隔一段时间就点工具栏上的“预览”按钮，用手机微信扫码真机调试一下。这个习惯能帮你省掉后面大量的返工时间。

看到这儿，你已经完成了从完全零基础到能独立开发一个多页面小程序的跨越。回想一下，整个过程其实就三步：注册账号、理解文件结构、动手改代码。没有哪一步需要数学天赋或者十年编程功底，全靠你在开发者工具里反复试错。当初我学会第一个页面跳转的时候，激动得截图发朋友圈，现在你也能做到同样的事，而且只花了一个下午。下次再有人说“小程序开发很难”，你可以直接把这篇攻略甩给他，然后打开你的开发者工具，让他看看你屏幕上那个已经能点击跳转的小应用。

原文来自：小程序开发

下一篇：微信报名小程序制作全攻略，三步轻松搞定 上一篇：爬虫攻破微信小程序，数据采集新战场