微信小程序开发入门指南，手把手教你从零开始

打开微信，谁没被几个小程序卡过脖子？想查天气得搜，想点外卖得搜，想玩个消消乐还得搜。但你有没有想过，这些看起来轻飘飘的玩意儿，到底是怎么从无到有被造出来的？我琢磨这事琢磨了挺久，后来咬着牙把微信官方的文档啃了一遍，又把几个开源项目翻来覆去拆了装、装了拆，总算摸出了点门道。今儿就不整那些虚头巴脑的概念了，咱们直接撸起袖子，从零开始，手把手把这玩意儿给搭出来。

先说个最扎心的事实：微信小程序跟咱平时做的网页，压根不是一个物种。网页靠浏览器渲染，小程序靠的是微信自己那套双线程模型——逻辑层跑在JSCore上，视图层跑在WebView里，两边靠一套异步消息系统通信。你写代码的时候，脑子里得绷着这根弦：别想着直接操作DOM，你连document都摸不着。新手最容易栽的坑就是拿网页的思路写小程序，结果一运行，白屏、报错、数据绑不上，心态直接炸裂。所以咱第一步，别急着写业务逻辑，先把微信开发者工具下了，注册个测试号，把官方那个“Hello World”模板跑起来，感受一下它跟浏览器里F12的区别。

工具装好、模板跑通之后，你就要面对小程序的骨架了——就是那四个后缀名不一样的文件：`.wxml`、`.wxss`、`.json`。WXML长得像HTML，但里面的标签全是微信自己的，比如``、``、``，而且支持数据绑定，用双大括号`{{ }}`把JS里的变量直接塞进模板里。WXSS呢，就是CSS的亲戚，但多了个rpx单位，专门适配不同屏幕宽度，750rpx正好等于屏幕宽度，你写样式的时候不用再苦哈哈地算百分比了。JS文件不用多说，就是逻辑层，但多了个Page()函数，里面塞data、onLoad、onShow这些生命周期方法。JSON文件则是配置，页面标题、导航栏颜色、能不能下拉刷新，都在这儿定。这四个文件必须同名，放在同一个目录下，小程序才能认出这是一个页面。

说到页面注册，有个细节特别容易被忽略：你新建了一个页面文件夹，里面放了那四个文件，但小程序根本不知道它的存在。你得跑到`app.json`里，把页面路径加进`pages`数组里，第一个路径就是启动页。这玩意儿就像你开了一家店，但没在商场前台登记，客人永远找不到你。而且`app.json`里还能配`window`字段，统一设置所有页面的导航栏背景色、标题文字、还有那个“下拉刷新”的开关。如果你要做底部TabBar，也是在这儿配，两到五个tab，图标、文字、页面路径，全得写清楚。你要是漏了这一步，辛辛苦苦写的页面，点开就是“页面不存在”，那种挫败感，我懂。

接下来咱聊聊数据流。小程序有个铁律：视图层不能直接改数据，必须通过`setData`来更新。你写了个`this.data.count = 1`，页面上的数字纹丝不动，因为视图层根本没收到通知。你得写`this.setData({ count: 1 })`，小程序才会把新数据从逻辑层传到视图层，重新渲染。这个设计虽然别扭，但好处是性能可控——它用的是脏检查机制，你setData的数据会走一遍diff，只更新变化的部分。所以你也别使劲往setData里塞大对象，一次传个几十KB，页面卡成PPT，那就别怪微信不给力了。还有个小技巧：频繁更新的数据，比如滚动位置、动画帧，别用setData往视图层送，塞到`this.data`以外的普通属性里就行，省得白白消耗性能。

说完数据，就得处理用户的手指头了。小程序里没有click事件，你得用`bindtap`，或者`catchtap`（后者能阻止冒泡）。事件对象`event`里，`currentTarget.dataset`能拿到你在WXML里自定义的`data-*`属性，这招在列表渲染时特别有用——比如你渲染一个商品列表，每个item上绑了个`data-id="{{item.id}}"`，点击时就能直接取到是哪个商品。还有输入框，用`bindinput`，每次键盘敲一下，事件就触发一次，你可以在里面实时过滤搜索词。但这玩意儿有个坑：如果输入框绑定了`value`值，但你没在`bindinput`里同步setData，那输入框就会变成“只读”，因为数据流是单向的，视图层改了，逻辑层没更新，它又给你顶回去了。当年我在这上面卡了整整一个下午，头发都薅掉好几根。

页面之间跳转也是新手重灾区。小程序里跳转方式有好几种：`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`，还有`wx.navigateBack`。前两种只能跳非TabBar页面，区别在于navigateTo会把页面压入栈，可以返回上一页；redirectTo则是替换当前页，回不去了。switchTab专门跳TabBar页面，而且会关闭所有其他页面栈。传参靠URL的query字符串，比如`/pages/detail?id=123`，目标页面的`onLoad(options)`里，`options.id`就能拿到123。但要注意，URL长度有限制，别把整个对象塞进去，要么存到全局变量`app.globalData`，要么用缓存。我见过最离谱的写法，是把整个购物车对象直接JSON.stringify塞进URL，结果页面直接崩了，白屏加报错，那场面，惨不忍睹。

聊到缓存，小程序提供了`wx.setStorageSync`和`wx.getStorageSync`，这俩是同步方法，简单粗暴，适合存取小数据。但你要是存个几百KB的列表，就得考虑用`wx.setStorage`的异步版本，免得阻塞UI线程。还有个细节：缓存是分用户和分小程序的，同一个微信账号在不同小程序里的缓存互不相通，但同一个小程序里，不同用户之间是隔离的。所以千万别把用户敏感信息明文存进去，虽然微信有加密机制，但咱写代码，得有点职业操守。另外，缓存有10MB的上限，超过了就存不进去，还会报错，你得在写入前做个大小判断，或者定期清理。

说到这儿，你可能觉得已经能写个小页面了。但真正的坑还没来——网络请求。小程序里没有`fetch`也没有`XMLHttpRequest`，你得用`wx.request`。这玩意儿最坑的一点是：必须在微信公众平台后台配置域名白名单，开发阶段可以勾选“不校验合法域名”，但上线后，你的接口域名必须是HTTPS，而且得备案。我见过不少新手，本地跑得欢，一上传真机，请求全被拦下来，报错信息还模模糊糊，就一句“request:fail”。这时候别慌，先检查域名有没有配，再检查是不是HTTPS，然后看看请求头有没有带`content-type`。还有，`wx.request`默认超时时间是60秒，你可以自己设置`timeout`，但别设太大，用户等不起。另外，POST请求的`data`默认会转成JSON，但如果你后端要的是表单格式，得手动改`header`里的`content-type`为`application/x-www-form-urlencoded`，不然后端解析出来全是null，又是一顿排查。

再说个容易忽略但特别要命的东西——上传审核。你辛辛苦苦写完了，在开发者工具里点“上传”，填个版本号，然后跑到微信公众平台提交审核。审核通过后，还得点“发布”，用户才能看到。这中间，微信审核团队会拿真机跑你的小程序，看有没有违规内容、有没有诱导分享、有没有收集用户隐私不声明。我有个朋友做个小工具，就因为没在隐私协议里写清楚“会读取用户头像昵称”，被拒了三次，每次等两天，前后拖了半个月。所以你现在写代码的时候，就把那些权限申请——比如`wx.getUserProfile`、`wx.getLocation`——对应的用途写在`app.json`的`permission`字段里，提前把坑填平。别等到被拒了再改，那感觉跟高考查完分发现答题卡涂错了一样，憋屈。

写到这儿，其实你手里已经捏着一把能跑通的小程序了。但你别急着把代码打包封存，多去翻翻微信官方文档里的“组件”和“API”列表，你会发现里面藏着不少好东西——比如`scroll-view`做长列表性能优化，`canvas`画图表，`web-view`嵌H5页面，还有云开发那套免服务器方案。工具是死的，用起来才是活的。当年我第一个小程序上线那天，盯着手机屏幕愣了好几分钟，就看着那个小图标在微信里跳转，心里想的不是“我多厉害”，而是“这玩意儿居然就这么跑起来了”。你也会走到那一步的，但前提是你得先动手，哪怕第一版丑得没法看，你也得把它写出来。代码这行当，眼高手低是常态，但只要你肯坐下来敲，总能把那个“从零”变成“从一”。