微信小程序开发全流程，从零到上线的实用教程

好，咱们直接说正事儿。今天这篇东西，就是带你走一遍微信小程序开发的全流程，从脑子里那个想法一直到它真的能出现在别人手机上，每一步都给你掰扯清楚。别怕，这事儿没那么玄乎，只要你愿意花点时间，跟着往下走，准能成。

第一件事，得先把电脑收拾利索。去微信开发者工具官网，把那玩意儿下载下来。这东西就是你的战场，所有代码都是在这儿写的。别下错版本，稳定版就行。安装过程一路“下一步”，不用动脑子。装好后，打开它，用微信扫码登录。看到界面后，点“新建项目”。项目名称随便起，比如“我的第一个小程序”，AppID 先选“测试号”，这样不用真注册就能练手。后端服务选“不使用云服务”，开发模式选“小程序”。点确定，恭喜你，一个空壳子搭好了。左边的文件目录别被吓到，后面我会一个个说清楚。

接下来，你得弄明白小程序到底是怎么拼起来的。核心就四类文件：`.json` 是配置文件，管页面长啥样、标题叫啥、能不能下拉刷新；`.wxml` 是结构文件，管页面上摆什么按钮、放什么文字，长得像 HTML；`.wxss` 是样式文件，管这些东西穿什么颜色的衣服、间距多大、字体多粗；`.js` 则管逻辑，比如点按钮后跳转页面、从后台拿数据。打开项目后看到的 `pages/index` 目录里就有这四个文件。先别急着改，右键点“预览”，用手机微信扫二维码，你就能看到屏幕上有个 “Hello World”。虽然丑，但这是你的第一个小程序。

光看没意思，得动手改。打开 `index.wxml`，把里面那行 `` 标签的内容改成 “这是我的小程序”，保存。手机端会立刻刷新，不用手动点。再打开 `index.wxss`，加一句 `text { color: red; }`，保存，文字就红了。看到没？这就是小程序的即时反馈，改完就变，特别爽。但别光顾着玩，你得想清楚：你要做的小程序是干嘛的？卖东西的、查信息的，还是纯粹展示？这个目标决定了后面要加什么页面、用什么接口。比如想做记账本，至少得有“记录页”和“统计页”。别贪多，第一版只做核心功能，后面再慢慢加。想清楚这个，咱们继续。

现在要加新页面了。打开 `app.json`，在 `pages` 数组里加一行 `"pages/logs"`，保存。开发者工具会自动生成 `logs` 目录和四个文件。打开 `logs.wxml`，写个 `这是日志页`。但光有页面还不行，你得能跳过去。回到 `index.wxml`，加个按钮：`去日志页`。然后在 `index.js` 里写一个 `goLogs` 函数：`wx.navigateTo({ url: '/pages/logs' })`。保存，预览，点按钮，跳转成功。这就是小程序里最基本的页面跳转。别小看这一步，所有复杂功能都是从这里长出来的。你还可以试试 `wx.switchTab`，但那是给底部导航用的，后面再说。

页面多了，数据怎么传？比如在日志页显示从首页带过来的参数。首页跳转时加参数：`url: '/pages/logs?name=张三'`。然后在日志页的 `onLoad` 生命周期函数里，用 `options.name` 就能拿到 “张三”。生命周期函数是啥？简单说，就是小程序在特定时刻自动调用的函数，`onLoad` 是页面加载时触发，`onShow` 是页面显示时触发。你可以在这些函数里写网络请求、初始化数据。比如在 `onLoad` 里用 `wx.request` 调接口，拿到数据后通过 `this.setData` 更新页面。`setData` 是核心，改了数据页面会自动重新渲染。但注意，别在短时间内频繁 `setData`，性能会受影响。

数据有了，页面也得好看点。打开 `app.wxss`，这是全局样式，所有页面都共用。可以在这里定义公共颜色变量，例如 `--primary-color: #07