手把手教你搭建微信小程序，零基础也能轻松上手

我见过太多人一说起小程序，第一反应就是“那是程序员干的事”。其实真不是。疫情期间我帮楼下水果店老板搭了个线上点单的小程序，从注册到上线，前后不到一个下午。那老板连Excel都用不利索，照样把生意搬到了微信里。所以你别被“代码”两个字吓住，这年头搭小程序，跟当年玩QQ空间差不多——选模板、填内容、点发布，三步走完。

第一步，你得有个“壳”。微信官方的“小程序·云开发”就是最省事的入口，但更推荐你先去装个“微信开发者工具”，这玩意儿就像个带预览功能的记事本，左边写东西，右边实时显示效果。安装的时候别慌，一路点“下一步”就行。装完打开，选“小程序”项目，填个名字，选个空目录，它会自动生成一个基础框架。那一刻你会看到一堆文件，别怕，你只需要碰其中几个关键文件，剩下的全当空气。

接下来是重头戏——改首页。找到名为“pages/index.wxml”的文件，双击打开，里面是一堆尖括号标签。别被吓到，你只需要记住一个规则：尖括号里的单词就是“标签”，一个标签管一块内容。比如``管文字，``管图片，``管按钮。把默认的“Hello World”删掉，换成你的店铺名，保存，右边预览区立刻就会变。那种即时反馈，比当年在论坛改签名爽多了。

但光改文字不够，你得让页面动起来。这里有个小技巧：把你要展示的商品信息，写成一份简单的数据文件，放在“pages/index.js”里。格式就像填表格，每行一个商品名、价格、图片链接。然后在wxml文件里，用`wx:for`这个魔法属性，就能自动把数据循环展示成列表。你不需要懂原理，照葫芦画瓢改数字就行。我教水果店老板那会儿，他愣是花了二十分钟，把三十多个水果品种全录进去了，一边录一边念叨“这比我手写价签快多了”。

页面有了，接下来是“能点”。小程序最基础的交互就是“点击按钮跳转”。在wxml里给按钮加个`bindtap="goDetail"`，然后在对应的js文件里，写上一段几行字的函数，告诉小程序“点了之后去哪个页面”。这步听起来玄乎，其实就是两件事：复制一行代码，改个页面路径。我用这招给水果店老板做了个“点击水果看详情”的功能，他试了三次，第三次成功时，他媳妇在旁边拍手。

真正让小程序“活”起来的，是后台数据。但零基础的人别一上来就碰数据库，先用好“本地存储”。在js文件里用`wx.setStorageSync`把用户填的表单数据存下来，再用`wx.getStorageSync`取出来。这就像在手机里存了个记事本，数据不会丢。等你有感觉了，再升级到云开发，那玩意儿自带数据库，不用自己买服务器，学生党也能白嫖。

一步，也是最容易忽略的——测真机。在开发者工具右上角，点“预览”，会生成一个二维码，拿手机微信一扫，小程序就跑你手机上了。这时候你要做的不是欢呼，而是在真机上点一遍所有按钮，看有没有卡顿、跳错页。我那次陪水果店老板测，发现他录的商品图片有的加载不出来，后来一查，是图片链接带了个空格。你看，这种坑，不真机测根本发现不了。

小程序搭完，你可能会想：这就完了？差得远。但别急着学进阶，先把基础流程跑通。我见过太多人一上来就研究“用户登录”“支付接口”，结果卡在第一步就放弃了。记住，能跑通的烂项目，永远比写不完的好项目有价值。你今天搭的这个小东西，哪怕丑点、功能少点，但它已经是个能用的产品了。就像当年你第一次学会用QQ空间写日志，那感觉，比看一万篇教程都实在。

原文来自：小程序开发

下一篇：微信小程序输入框，一行代码搞定占位符样式优化 上一篇：从零到一，刷题小程序开发实战全攻略