手把手带你开发微信小程序，零基础也能轻松上手

去年秋天，我表妹突然问我：“你说我一个学会计的，能做出那种点奶茶的小程序吗？”她连HTML是什么都不知道，电脑里除了Office就是微信。我当时没直接回答，而是把开发微信小程序的官方文档链接甩给了她。三个月后，她真的做出了一个能用的记账小程序，虽然界面丑得像Windows 98，但功能齐全。这件事让我明白，所谓“零基础”，差的不是智商，而是一套正确的方法和一点敢动手的勇气。今天这篇，我就把这条路重新走一遍给你看，保证每一步都踩得实。

第一步，也是最关键的一步：别去啃那些几百页的官方文档，先注册一个账号。打开微信公众平台，用你的邮箱注册一个小程序账号，类型选“个人”。这里有个坑得提醒你——个人主体不能开通微信支付，但用来练手、做工具类小程序完全够用。注册完，你会得到一个AppID，这玩意儿就像你的身份证，后面写代码、预览、上传都用得上。整个过程大概十分钟，比在银行开个户快多了。注册完别急着关，在“设置”里找到“开发设置”，把AppID复制下来存好，一会儿我们要用。

接下来是装工具。微信官方给开发者准备了一套IDE，叫“微信开发者工具”，直接去官网下载。装好后打开，选择“小程序项目”，把刚才的AppID填进去，选一个空文件夹，点“确定”。你会看到三个文件：app.js、app.json、pages目录。别慌，这三个文件就是小程序的地基。app.json是全局配置文件，相当于大楼的承重墙；app.js是逻辑入口，负责小程序启动时干的事；pages目录里放的是每个页面，每个页面又分wxml（结构）、wxss（样式）、js（逻辑）、json（配置）四个文件。你先别管这些名词，记住一句话：wxml是骨架，wxss是皮肤，js是大脑。咱们先从改骨架开始。

打开pages/index.wxml，删掉里面所有内容，写上一行字：你好，我的第一个小程序。然后按Ctrl+S保存，左边预览区立刻就会显示这行字。恭喜你，已经跑通了第一个页面。这时候你可能会说：“就这？”别急，真正的乐趣从给页面加交互开始。回到pages/index.js，找到Page({})这个对象，在里面加一个data属性，写上：data: { greeting: '你好，这是我从data里取出来的字' }。再回到wxml文件，把那行text改成{{greeting}}。保存，你会发现页面上的字变了。这就是小程序最核心的机制：数据驱动视图。你改数据，页面跟着变，不用手动操作DOM，比传统网页开发省心太多。

现在咱们做点有实际意义的东西。我建议你做一个“待办事项”小程序，功能就三个：输入一句话，点按钮添加，点条目删除。这个需求覆盖了小程序开发的全部基本操作：输入框绑定、按钮事件、列表渲染、条件判断。先改wxml：放一个input框，一个button按钮，下面用wx:for循环渲染一个列表。wx:for是模板语法，相当于把数组里的每一项都套进同一个模板里。然后把js改成：data里放一个todos数组，添加函数用setData把新数据push进去，删除函数用filter把对应项过滤掉。写完之后，你试试输入、添加、删除，整个过程流畅得像原生App。这时候你会感受到一个奇妙的点：小程序本质上就是“用网页技术做原生体验”，你学的每一行代码，将来都能迁移到其他前端框架上。

到了这一步，你可能会遇到第一个崩溃时刻：样式太丑了。默认的按钮是灰的，字体是宋体，页面空荡荡的。别急，打开wxss文件，你会发现它跟CSS几乎一模一样。给页面加个背景色，给按钮加个圆角，给列表加个分割线，十分钟就能让界面脱胎换骨。这里我教你一个野路子：去微信官方的小程序设计指南里偷样式，那些组件的配色、间距、圆角都是设计师调好的，直接抄比自己瞎琢磨强十倍。记住一个原则：先实现功能，再美化外观。功能跑通了，你才有心情去调那个1像素的边框。

接下来，咱们把数据存到本地。现在你关掉小程序再打开，待办事项全没了，因为数据存在内存里。微信提供了wx.setStorageSync和wx.getStorageSync这两个接口，操作本地缓存就像操作一个对象一样简单。在添加和删除的函数里，加一行代码把todos存进缓存；在onLoad生命周期里，把缓存读出来赋给data。改完你会发现，重启小程序，数据还在。这个功能让你从“写页面”进阶到“做产品”，因为真实应用必须解决数据持久化问题。而且你会发现，微信的API设计得极度友好，所有接口都带Sync后缀，意思是同步操作，不用处理回调地狱，对新手来说简直是救命稻草。

咱们把小程序发到手机上。点击开发者工具右上角的“预览”按钮，会生成一个二维码。用微信扫一扫，你亲手写的小程序就在手机屏幕上跑起来了。那一刻的成就感，不亚于第一次骑自行车上路。但注意，预览模式只对开发者本人开放，要让别人也能访问，得点“上传”按钮，把代码传到微信服务器，然后在后台提交审核。审核一般一两个工作日通过，通过后你的小程序就正式上线了，任何人在微信里搜到就能用。虽然个人小程序没有搜索排名优势，但把链接发给朋友，他们点开就能用，这种感觉真的会上瘾。

写到这里，我想起表妹后来跟我说的一句话：“原来最难的不是代码，是决定开始的那一刻。”确实，小程序开发的技术门槛已经被微信压得很低了，真正的门槛在于你能不能坐下来，跟着这篇文章把一个按钮从无到有地做出来。我的建议是：今天先注册账号，明天装工具写第一行代码，后天完成待办事项，一周内你就能拥有第一个能上线的小程序。别等“准备好了”再动手，因为准备的过程本身就是最好的学习。现在，打开电脑，去注册那个属于你的AppID吧。