小白也能学会，手把手教你制作简单微信小程序

先泼盆冷水：别被“小程序”三个字吓住。我见过太多人，一听要写代码就腿软，其实做一个最简单的微信小程序，跟当年在QQ空间装饰主页差不了太多。你不需要成为程序员，只需要按步骤点按钮。今天这篇，我就用最笨的办法，带你从零摸到那个“发布”按钮。全程不绕弯子，你跟着做就行。

第一步，你得有个“工位”。打开电脑浏览器，搜“微信公众平台”，点进去注册一个小程序账号。注意，这里选“小程序”，不是“订阅号”也不是“服务号”。注册的时候会让你填邮箱、设密码，这些跟注册个游戏账号没区别。唯一要留神的是“主体类型”，个人就选“个人”，别手滑选成企业，不然后面要营业执照，麻烦。注册完，你会进到一个后台，先别急着乱点，找到左侧菜单里的“开发管理”，然后点“开发设置”，把你的AppID复制下来。这串字母数字串，就是你家小程序的“身份证”，待会儿要用。

这时候你可能会问：光有身份证，房子怎么盖？别急，微信官方早就给你备好了毛坯房。回到后台首页，找“工具”菜单，下载一个叫“微信开发者工具”的软件。安装的时候一路点“下一步”就行，别改路径，默认C盘最省事。装好后打开，用你刚才注册的微信号扫码登录。进去之后选“小程序”，然后点“导入项目”，把刚才复制的AppID粘贴进去，项目名称随便起一个，比如“我的第一个小程序”，目录就选个你记得住的地方，比如桌面新建一个文件夹。点确定，等个几秒钟，你会看到模拟器里出现一个“Hello World”的页面。恭喜，你的房子已经搭好骨架了，虽然现在还是毛坯。

毛坯房不能住人，咱们得刷墙铺地。在开发者工具左边，你会看到一列文件，有个叫“index.wxml”的，双击打开，这就是你小程序的“客厅墙纸”。把里面那行“Hello World”删掉，换成一句你真正想说的话，比如“今天天气不错”。换完按Ctrl+S保存，看右边模拟器，文字变了。接着改“index.wxss”这个文件，它是管“墙纸颜色”的。找到里面“color”那个单词，把后面的颜色代码改成“red”，保存，你再看，字变红了。就这么简单，你已经会改文案和颜色了，相当于装修的“刮大白”和“刷油漆”。

光有文字太单调，咱得加个按钮。在“index.wxml”里，文字下面加一行代码：`点我一下`，保存。你看，模拟器上出现了一个按钮。但光有按钮不干活，等于摆设。这时候要动“index.js”这个文件，它是小程序的“大脑”。在文件里找到“data”那一块，加一行：`message: ‘你戳我干嘛’`，然后在按钮上改个属性，让它点击时显示这句话。具体写法是：``，然后在“index.js”里写一个叫“showMsg”的函数，里面用`this.setData`把message换成“你戳我干嘛”。保存，点一下按钮，文字变了。这时候你已经会写“交互”了，说出去别人都以为你是高手。

接下来是重头戏：把房子从毛坯变成能见人的样板间。你需要在“index.wxml”里加个图片。图片哪儿来？不用自己拍，右键保存一张小猫图片，放到你项目文件夹里的“images”目录下（没有这个文件夹就新建一个）。然后在wxml里写：``。保存，图片出来了。这时候你发现图片有点大？没事，在“wxss”里给image加个宽度属性，比如`width: 300rpx; height: 300rpx;`，rpx是小程序专用的单位，你只要知道它能让图片在不同手机上自动缩放就行。改完保存，小猫变得规规矩矩。

现在最关键的临门一脚：把房子挂到网上卖。回到开发者工具，点右上角“上传”按钮，版本号填个“1.0.0”，备注写“第一个小程序”，点确定。这时候，你的代码就传到了微信服务器上，但别人还搜不到，因为你还没“过审”。去微信公众平台后台，点“版本管理”，你会看到刚才上传的版本，点“提交审核”。微信的人工智能审核员会看你的小程序内容，一般几个小时到一天，如果没违规，就通过。然后你点“发布”，整个世界都能搜到你家小程序了。但注意，个人小程序审核比较严，别放敏感词，别诱导分享，老老实实做内容。

说点掏心窝子的话。你跟着做到这里，已经超过了90%只会说“我想做小程序”的人。剩下的路，比如怎么让页面更漂亮、怎么加地图功能、怎么接入支付——说白了，都是往这个骨架上添砖加瓦。遇到不会的，别急着报班，先在开发者社区里搜，90%的问题都有人踩过坑。做个简单小程序，本质上就是“改文字、加图片、绑按钮”这三板斧。你把这篇文章收藏好，哪天手痒了，翻出来照着点一遍，比看十篇理论文章都管用。工具就在那儿，门槛低得跟门槛似的，就看你要不要迈这一步了。

原文来自：小程序开发

下一篇：微信小程序核心属性详解，开发必知要点 上一篇：手把手教你从零开发微信小程序，零基础也能轻松上手