微信小程序开发教程

微信小程序开发，微信本质上就是小程序开写前端页面加调用微信提供的API。别被“小程序”三个字唬住，发教它跟你平时写网页没多大区别，微信只是小程序开换了一套运行环境和规则。我见过太多人一上来就啃官方文档，发教结果被那些术语绕晕，微信其实你只需要记住三个核心文件：app.js（全局逻辑）、小程序开app.json（全局配置）、发教app.wxss（全局样式），微信剩下的小程序开页面就是由.wxml、.wxss、发教.js、微信.json四个文件组成的小程序开组合体。

先别管复杂的发教框架，直接打开微信开发者工具，新建一个项目。你会看到一个默认的“Hello World”页面。这时候你要做的第一件事，不是急着改代码，而是去看看app.json里的pages数组——那是整个小程序的页面路由表。想加新页面？在pages数组里加一行路径，然后保存，工具会自动帮你生成对应的四个文件。这个机制比传统网页开发要省事得多，不用手动创建目录结构。

接下来聊聊数据绑定。小程序用的是类似Vue的语法，但更接近原生。在.js文件的data对象里定义变量，然后在.wxml里用双大括号{ { }}把它渲染出来。比如你写一个message: '你好'，页面里就显示“你好”。改数据呢？必须用this.setData()方法，直接赋值是不行的——这是新手最容易踩的坑。我见过有人写this.message = '变了'，结果页面纹丝不动，然后怀疑人生。

事件绑定也别搞混。在.wxml里用bindtap来绑定点击事件，而不是onclick。比如一个按钮，你写<button bindtap="handleClick">点我</button>，然后在.js文件里定义handleClick: function() { ... }。注意，这里的函数名不用加括号，参数会自动传递一个事件对象。你要是习惯写网页的onclick="handleClick()"，在这就露怯了。

样式方面，.wxss跟普通CSS基本一样，但有些单位是特有的。比如rpx（responsive pixel），它会根据屏幕宽度自动适配。设计稿一般是750rpx宽，你量多少就写多少，不用做换算。这点对移动端开发特别友好——不用再写媒体查询适配各种屏幕了。不过也别高兴太早，小程序不支持通配符*选择器，全局样式得在app.wxss里逐个写。

说到API调用，这是小程序最值钱的地方。想获取用户位置？wx.getLocation()。想调起支付？wx.requestPayment()。想存个缓存？wx.setStorageSync()。这些接口都是微信封装好的，你只需要按文档传参就行。但有个坑：大部分接口都需要在app.json里声明权限，比如permission字段加上scope.userLocation，否则调用时会直接报错——这个错误信息还特别隐晦，光看报错根本猜不到是权限问题。

最后说点实在的。调试小程序，别光靠console.log。用开发者工具里的“调试器”面板，可以打断点、看变量、查网络请求。遇到页面白屏，先看控制台有没有红色报错，八成是JS语法错误或者某个API没定义。还有，真机预览和模拟器差别挺大——模拟器里流畅的动画，真机上可能卡成PPT。所以每写完一个功能，就掏出手机扫码预览一下，别攒到最后一起测。

你如果只是想做个简单的展示页面，大概两三天就能上手。但要是涉及支付、地图、蓝牙这些复杂功能，还是得老老实实啃官方文档——但至少现在，你知道该从哪下手了。