微信小程序开发实战，从零开始打造专属App

去年年底，有个做餐饮的老朋友找我，说想弄个点餐小程序，问我能不能教他。我问他为啥不直接找外包，他苦笑说问了一圈，报价从八千到三万不等，关键是后期改个菜单还得加钱。这事儿让我想起自己第一次碰小程序开发时的窘境——连个登录按钮都调了半天。其实小程序开发没想象中那么玄乎，今天我就把从零开始搭一个专属App的完整路子，掰开了揉碎了跟你聊聊。

先说说注册和准备工作。你得有个微信公众平台的账号，别走错了，是微信公众平台，不是开放平台。点进去选“小程序”，用个人或企业身份注册。个人号功能受限，比如不能做支付、不能上架社交类目，但练手完全够用。注册完后，在“开发”菜单里找到“开发设置”，复制AppID，这玩意儿就像门牌号，后面所有代码都得靠它认路。同时下载微信开发者工具，这个工具里集成了代码编辑器、模拟器、真机调试，省得你再折腾其他软件。第一次打开时，用微信扫码登录，AppID填进去，项目名称随便起一个，比如“我的第一个小程序”。

接下来就是代码结构。小程序的文件系统其实挺规整，根目录下有个app.js、app.json、app.wxss，这三个是全局文件。app.json好比总管家，里面写页面路径、窗口样式、导航栏颜色，比如“pages/index”就是首页。每个页面由四个文件组成：js控制逻辑、wxml搭结构、wxss管样式、json做页面配置。新手最容易犯的错是死记硬背，其实根本不用。你只需要记住：wxml相当于盖房子的砖头，js是水泥砂浆，wxss就是装修涂料。比如你想在页面上显示“你好，世界”，在index.wxml里写个text标签，js里用setData把值传过去，预览就能看到效果。

说完结构，咱们上手写点真东西。以我朋友的点餐小程序为例，首页得展示菜品列表。先在index.json里配置导航栏标题“今日推荐”，然后在wxml里用block标签循环渲染。数据从哪来？有两种方式：本地模拟和远程接口。初学者先用本地数据，在js的data对象里定义一个数组，比如foodList: [{name: '宫保鸡丁', price: 38, sales: 120}]。循环时用wx:for="{{foodList}}"，每个菜品的名字和价格就自动填进去了。这里有个坑：微信的循环变量默认是item和index，千万别自己瞎起变量名。要是想用自定义名，得写wx:for-item="food"，但新手最好先用默认的，少折腾。

用户交互这块，其实小程序比网页简单。比如点餐功能，每个菜品旁边加个“加入购物车”按钮。在wxml里绑定bindtap事件，比如“addToCart”，然后在js里写这个函数。函数里用getApp().globalData来跨页面传数据，或者用wx.setStorageSync存到本地缓存。我见过有人为了做个购物车，用了七八个第三方库，因为版本冲突崩了。其实小程序自带的setData方法就够用，比如每次点击，把当前菜品的id和数量push到一个数组里，再用setData重新渲染购物车角标。记住，setData是异步操作，别指望它立刻更新UI，调试时容易犯迷糊。

写到这，你可能觉得小程序开发就是前端搬砖。但真正让小程序“活”起来的，是云开发能力。微信提供了云函数、云数据库、云存储，不需要自己搭服务器。比如我朋友的点餐小程序，订单数据存在云数据库里。在开发者工具里点“云开发”开通，然后创建一个集合叫“orders”。前端提交订单时，用wx.cloud.callFunction调用云函数，云函数里用数据库API写入记录。整个过程不用写一行后端代码，也不用买服务器，微信帮你扛着。唯一要小心的是权限设置，默认只有创建者能读写，要改成“所有用户可读，仅创建者可写”，否则用户下单后自己都查不到订单。

聊聊发布和运营。代码写完，在开发者工具里点“上传”，传到微信后台。然后去公众平台提交审核，一般1-7个工作日。审核不通过的原因五花八门：个人号不能做虚拟商品、页面不能有诱导分享按钮、隐私政策必须写清楚。我第二次提交时，就因为登录页用了“微信授权”四个字被拒，必须改成“微信登录”。上架后别以为完事了，小程序的生命力在于迭代。比如我朋友每天看后台数据，发现晚上9点后点夜宵的多，就加了“深夜食堂”分类。他还用模板消息每周推优惠券，复购率直接翻倍。记住，小程序不是一次性产品，是越用越活的工具。

回头看看整个过程，从注册账号到写代码，从云开发到发布运营，每一步都有坑，但每一步也能趟过去。你可能会问：有必要自己学吗？外包固然省事，但就像租车和买车，租车不用管保养，但永远开不到自己想要的路线。当你亲手把一行行代码变成别人手机里的App时，那种掌控感，比省下几千块外包费实在多了。所以别犹豫，打开开发者工具，写你的第一行代码吧。