零基础开发微信小程序，源代码实战全攻略

打开微信，每天都有无数人在用小程序。点外卖、查公交、玩小游戏，甚至去政务大厅办事，小程序几乎无处不在。很多朋友看着我做的那些小程序，心里痒痒的：这东西难不难？我没写过代码，能学会吗？我的回答是：能，但前提是你得用对方法。今天这篇攻略，不给你灌鸡汤，直接带你从零开始，用源代码一步步跑通一个完整的小程序。

先别急着下载一堆工具。开发小程序，你只需要一个微信开发者工具，官网免费下载。装好之后，用你的微信扫码登录，就能看到新建项目的界面。这里有个关键选择：项目类型选“小程序”，不是“小游戏”；后端服务选“不使用云服务”，咱先跑本地。目录名随便起，比如“my-first-app”，AppID先选“测试号”，等以后真上线再换正式的。点确定，一个标准的模板项目就生成了。

这时候你会看到左边是模拟器，右边是代码区。模板自带了一堆页面，别嫌乱，咱先看最核心的三个文件：app.js、app.json、app.wxss。app.json是全局配置，里面写了页面路径、窗口样式、tabBar导航栏。你打开它，把“pages/index”改成“pages/home”，再把模板自带的index页面删掉，模拟器里瞬间就变成空白了。别怕，这不是报错，是你开始掌控项目的第一小步。

接下来，咱手写第一个页面。在pages文件夹下新建一个home文件夹，里面新建四个文件：home.wxml、home.wxss、home.json。这四个文件分别管结构、样式、逻辑、配置。打开home.wxml，删掉所有内容，写一行最简单的代码：`你好，小程序！`。保存，模拟器里立刻就能看到这行字。对，就这么简单。你现在已经会写小程序页面了——它本质上就是一套网页技术，只是套了微信的壳。

但光显示静态文字没意思，咱得让它动起来。回到home.js，在Page({})里加一个data对象：`data: { message: '这是从源代码里传过来的数据' }`，然后把home.wxml里的文字改成`{{message}}`。保存，模拟器里的文字变了。这就是小程序最核心的数据绑定机制：wxml负责展示，js负责提供数据，两者通过双大括号连接。你以后再看到任何复杂的小程序，底层逻辑都是这一套。

光会展示还不够，得能互动。在home.wxml里加一个按钮：`点我换句话`，然后在home.js里加一个方法：`changeMessage: function() { this.setData({ message: '你刚刚点了按钮，这是新的话' }) }`。保存，点模拟器里的按钮，文字变了。到这里，你已经掌握了小程序开发的三板斧：数据绑定、事件绑定、setData更新视图。这三个东西，是几百个小程序功能里最底层的骨架。

接下来加点样式，让页面不那么寒碜。打开home.wxss，写几行简单的CSS：给页面加个背景色，给文字加个大字号和居中。保存，模拟器里立刻变样。小程序的样式和网页CSS几乎一模一样，你以前如果接触过网页设计，上手毫无压力；就算没接触过，记住几个常用属性（display、margin、padding、color、font-size）也够用了。样式这东西，不用背，用到什么查什么，多写几次自然就记住了。

现在你的小程序已经有个像样的首页了，但只有一页太单薄。咱加个tabBar，弄成两个页面。在home的同级目录新建一个about文件夹，同样建四个文件。about.wxml里写`这是关于页`。然后在app.json里配置tabBar：`"tabBar": { "list": [ {"pagePath": "pages/home", "text": "首页"}, {"pagePath": "pages/about", "text": "关于"} ] }`。保存，模拟器底部就出现了两个切换标签。你点来点去，页面来回切换，一个真正意义上的多页面小程序就这么跑起来了。

到这里，你已经走完了零基础到入门的最关键一步。回头看，你其实已经掌握了：项目结构、页面创建、数据绑定、事件交互、样式调整、多页面配置。这些代码加起来不到五十行，却是一个完整小程序的全部骨架。接下来你想往哪个方向深入，就有目标了：想做电商就研究商品列表和购物车，想做工具就研究表单和本地存储，想做社交就研究微信登录和云开发。每个方向都是在今天这套骨架上添砖加瓦。

给你一句掏心窝的话：学小程序开发，别一上来就啃官方文档，那玩意儿是给有基础的人看的。你要做的，就是照着今天这篇文章的节奏，一行代码敲出来，跑通了再改，改坏了再调。源码这东西，你亲手敲过一遍，比看十遍教程都管用。今天你敲了这五十行，明天你就能敲五百行，后天就是一个能上线的产品。零基础不是问题，问题是别只看不练。现在，打开你的微信开发者工具，把上面那几段代码敲进去，你的第一个小程序，已经在路上了。