上周终于把商城小程序搞出来了！现在赶紧把实战过程记下来。毕竟自己踩过的坑，不能让大家再踩一遍。

第一步：装家伙事儿

打开电脑，直接去微信官网下了个开发者工具。安装过程跟装QQ似的，下一步到底就行。顺手注册了个小程序账号，填完身份证和手机号，邮箱里点个链接就激活了。

第二步：画图纸

掏出手机刷了十几个超市小程序。重点看人家怎么摆货架、怎么塞广告位。拿张卫生纸，用笔画了三个框：

• 最上面：轮播图广告位
• 中间：商品分类导航栏
• 底下：商品列表瀑布流

对！商品详情页都懒得多画，到时候抄别家现成的！

第三步：搭空壳子

在开发者工具新建项目的时候，手抖勾了“云开发”。新建完一看文件结构：

• pages文件夹藏着页面文件
• 云开发图标在工具栏里发亮
• 配置文件的json看着像天书

直接把卫生纸上的三个框，用view组件在代码里怼出来。首页瞬间多了三个大白框！

第四步：塞假货

看着空荡荡的页面犯愁，突然发现云开发里有现成的数据库！立马新建了商品集合，瞎编了二十条数据：

• 商品名随便敲键盘（反正测试版）
• 价格栏疯狂按键盘数字键
• 图片直接拖本地火锅照片

点完保存按钮，商品列表页突然弹出热腾腾的毛肚图！就是照片变形得像被门夹过...

第五步：微信支付搞里头

最头疼的来了！在后台点开通支付，被要求填二十多项资料。折腾两天终于过审，拿到商户ID和密钥串。重点来了：

• 把密钥抄错三次，支付界面死活弹不出来
• 检查两小时发现把数字0抄成了字母O
• 测试支付时输自己银行卡号，结果真扣了1分钱！

现在后台订单列表里还躺着那笔0.01元的冤种订单！

第六步：真机上耍一把

开发者工具扫码预览全是bug：

• 商品分类栏挤成二维码
• 收藏按钮点了没反应
• 购物车莫名其妙显示负数

熬夜改到凌晨三点终于能看，第二天发给朋友测试，结果iPhone用户全打不开页面！原来安卓写的样式在苹果上全乱套...又返工两天才搞定。

现在这个小程序已经挂上线，虽然日访问量还不到20人，但每次看到订单列表里那个0.01元的支付记录，就想给自己点根蜡。