打开微信开发者工具，新建一个项目，默认模板里躺着的那一堆文件，就是你跟小程序打的第一声招呼。很多人在这儿就懵了——wxml、wxss、js、json，四个文件各管一摊，看着像网页开发，但又处处不一样。其实你只要记住一句话：wxml负责长什么样，wxss负责好不好看，js负责怎么干活，json负责配置规矩。今天这篇实战，我不讲空理论，直接拿真实业务场景里的关键代码说事，你看完能直接抄走用。

先说数据绑定，这是小程序最基础也最容易踩坑的地方。网页里你用innerHTML拼字符串，小程序里不行，它靠的是Mustache语法，就是双大括号。比如你从后端拿到一个用户列表，想在页面上渲染出来，wxml里这么写：。注意那个wx:key，很多人图省事不写，结果列表一刷新，页面闪烁、滚动位置乱跳，全是它的锅。key值最好是每条数据唯一的id，别用index，不然删除中间某条数据时，渲染会错位。js里你只需要在data里声明userList数组，然后通过setData更新它，页面就跟着变了。记住，setData是异步的，你要是紧接着读数据，拿到的还是旧值，得在回调里处理。

再来说说事件绑定，这块儿跟网页的onclick不太一样。小程序里bindtap是最常用的，但bind和catch有个关键区别——bind冒泡，catch阻止冒泡。打个比方，你有个卡片，卡片上有个收藏按钮，如果你在卡片上绑了bindtap跳详情，按钮上也绑了bindtap收藏，那点按钮的时候，两个事件都会触发，页面就跳走了。这时候按钮上必须用catchtap，把冒泡掐断。代码长这样：。还有个细节，传参不能用括号直接传，得用data-属性，比如，然后在事件函数里通过event.currentTarget.dataset.id拿到。currentTarget和target也有讲究，currentTarget是绑定事件的元素，target是你实际点到的元素，如果按钮里套了个小图标，你点图标，target就是图标，currentTarget还是按钮，取数据的时候用currentTarget才稳。

生命周期这块儿，很多人搞混onLoad和onReady，其实区别挺大。onLoad是页面加载时触发，这时候页面还没渲染完，你在这儿拿参数、初始化数据最合适。onReady是页面首次渲染完成，相当于网页的onload，你要操作canvas、获取节点信息，都得等onReady。举个例子，你要从上一个页面跳过来，带上一个商品id，在onLoad里用options.id拿，然后去请求详情接口。但你要是想在页面上画个二维码，必须等onReady之后，因为canvas得先渲染出来才能画。还有个onShow，每次页面显示都会触发，比如从后台切回前台、从下一个页面返回，都会走它。你要是做了个列表页，每次返回都想刷新数据，就把请求写在onShow里，别写在onLoad里，不然第一次进来刷一次，返回再进来就不刷了。

接下来是组件通信，这块儿是实战里最容易写成一团乱麻的地方。父组件给子组件传值，用properties，子组件接收后直接当data用。子组件想给父组件传消息，用triggerEvent，父组件在标签上监听对应事件就行。我举个例子，你做了个搜索框子组件，用户输入关键词后，要把这个关键词传给父组件去请求列表。子组件里这样写：，父组件里，然后父组件的handleSearch里，通过event.detail.keyword拿到值。有个坑，properties里的值，你不能直接修改，要修改得用observer监听，或者复制一份到data里再改。很多新手直接在子组件里this.xxx = xxx，然后发现页面不更新，就是因为没走setData。

网络请求这块儿，小程序跟浏览器差别最大。浏览器里你随便fetch，小程序里必须走wx.request，而且域名得在后台配置白名单，开发阶段可以勾选“不校验合法域名”，上线前必须配好。请求的时候，注意method默认是GET，POST要显式声明。header里content-type要设成'application/json'，不然后端可能接不到参数。还有，wx.request的success回调里，你拿到的res.data才是后端返回的数据，res.statusCode是HTTP状态码，得先判断200再处理业务逻辑。我见过太多人把res直接当成数据用，结果出bug找半天。另外，小程序里没有跨域问题，因为它是通过微信服务器转发的，但反过来，你的后端接口得支持HTTPS，不然真机上跑不通。

说一个高级点的技巧——自定义组件里的插槽。小程序支持单个插槽和多个插槽，用slot标签占位。比如你做了个通用的弹窗组件，标题和内容区域是固定的，但底部按钮可能不一样，有时候是“确认”，有时候是“取消+确认”，这时候就在组件里放两个slot，一个叫footer，一个叫content。父组件用的时候，对应地传入内容。多个插槽要设置options: {multipleSlots: true}，不然不生效。这个技巧能帮你把公共逻辑抽得特别干净，一个弹窗组件，几十个页面复用，改一处全生效。

小程序开发说到底，就是把网页那套思维转个弯。数据驱动、组件化、生命周期管理，这三样拿捏住了，代码质量直接上一个台阶。我见过太多人照着网上的demo抄，但不知道每个api为什么这么用，一遇到需求变化就抓瞎。你要做的不是背代码，而是理解每个关键节点背后的设计逻辑——为什么setData是异步的，为什么catch要阻止冒泡，为什么properties不能直接改。把这些想通了，你写的就不是“能跑的代码”，而是“经得起改的代码”。下次再有人问你会不会小程序，你可以直接把这篇实战里提到的坑都讲一遍，比什么证书都管用。