手把手教你创建微信小程序，零基础也能轻松上手

说实话，每次看到“零基础学编程”这类标题，我都觉得有点虚。但微信小程序这事，还真不一样——它可能是普通人距离“拥有一个自己的App”最近的一次。你不需要买服务器，不需要会复杂的后端语言，甚至不需要懂什么叫API接口，只要有一台能上网的电脑，跟着我往下走，今天下午你就能在手机上看到自己亲手做出来的小程序。我见过五十多岁的阿姨，用了三个小时，做出了一个给社区团购用的报名小程序。所以，别怕，这个真的不难。

第一步，你得有个“地盘”去写代码。微信官方给开发者准备了一个叫“微信开发者工具”的软件，免费下载。你直接在浏览器搜“微信开发者工具”，进官网，选你电脑对应的版本（Windows或Mac），下载安装。装完之后，打开它，会跳出一个二维码，用你的微信扫码登录——注意，这里有个坑，微信小程序要求个人主体注册，你得先有一个微信号，而且这个微信号最好没注册过其他小程序，不然会提示冲突。登录进去之后，点“新建项目”，项目名称随便起，比如“我的第一个小程序”，目录选个你找得到的地方，AppID那里，如果你还没注册小程序账号，就选“测试号”，它会自动给你生成一个临时ID，够你玩了。

接下来，你会看到这个软件界面分成三块：左边是模拟器，中间是代码区，下边是调试器。别被吓到，你现在只需要盯住左边那块手机屏幕样子的区域——那叫模拟器，你写的代码会实时显示在这里，像变魔术一样。现在，你看到的默认页面是微信自带的“Hello World”模板，一堆代码，别管它们。我们来做一件最简单的事：改一行字。在中间代码区找到“index.wxml”这个文件（一般在pages/index/文件夹里），双击打开，你会看到一堆尖括号的标签，找到写着“Hello World”那行，把它改成“我的第一个小程序”，保存（Ctrl+S或Command+S）。你再看左边模拟器，上面的字变了。恭喜你，你已经完成了一个小程序的第一次修改，这感觉是不是挺奇妙的？

但光改字没意思，我们来做点能互动的东西。微信小程序的页面逻辑，简单说就是三个文件配合：.wxml负责结构（就像房子的骨架），.wxss负责样式（就像装修），.js负责行为（就像住在房子里的人）。我们给页面加一个按钮。在index.wxml里，把那行字下面加上一句代码：`点我试试`，保存后看模拟器，出现了一个绿色的大按钮。但这按钮现在按了没反应，因为它还没“行为”。接下来，我们打开同目录下的index.js文件，你会看到一个叫“data”的对象，里面有个“message”字段。我们在它下面加一行代码：`onButtonTap: function() { this.setData({ message: "你点了我一下！" }) }`，然后再回到index.wxml，把原来那行文字改成`{{message}}`——这里的花括号是模板语法，意思就是“把data里的message变量的值显示在这里”。保存后，点击模拟器里的按钮，文字变成了“你点了我一下！”。你看，你已经在写交互逻辑了，虽然只有几行，但这就是程序员干的事。

光有页面还不够，一个小程序得能切换页面才有意思。比如，做一个“关于我”的页面。在开发者工具的最上方，有个“新建页面”的按钮（一般是个文件夹加号图标），点它，输入页面名称“about”，它会自动生成about.wxml、about.wxss、about.js和about.json四个文件。然后，我们回到index.wxml，把刚才那个按钮改一下，加上一个跳转功能：在button标签里加`bindtap="goAbout"`，然后在index.js里，加上这个函数：`goAbout: function() { wx.navigateTo({ url: '/pages/about' }) }`。保存后，点一下按钮，模拟器页面就跳到了about页，虽然上面还是空的，但你已经实现了“页面跳转”。这个功能，很多做小程序的公司，靠这个就能收费几百块。

现在，你的小程序已经有模有样了，但你可能觉得页面有点丑。别急，我们来美化一下。回到index.wxss，这是控制样式的文件。你看