零基础也能学会，手把手教你从0到1建造微信小程序

“零基础也能学会，手把手教你从0到1建造微信小程序”。这话你信吗？说实话，我第一次听到这句话，心里也在打鼓。毕竟我是个连代码长啥样都记不住的人，大学里唯一跟编程有关的课，就是考前突击背了背“hello world”。但后来我真的试了，才发现这玩意没那么玄乎。微信小程序这几年火得不行，从点外卖到查公交，从卖水果到做笔记，几乎啥都能干。关键是，它不像传统 APP 那样需要学一堆复杂的语言。只要有个微信账号，愿意花点时间，就能把想法变成现实。别被“编程”这个词吓住，这次我带你一步步来，从注册账号到发布上线，每个环节都拆开说清楚。

第一步，得先有个“家”。你要去微信公众平台注册一个小程序账号。这事儿不难，打开浏览器搜索“微信公众平台”，点进去找到“小程序”注册入口。填邮箱、设密码、收验证码，跟注册论坛账号差不多。但有个坑要注意：邮箱不能已经注册过公众号或小程序，否则会提示冲突。注册完选“个人主体”，因为个体户或企业主体要填营业执照信息，个人版就简单多了，填身份证号、绑定银行卡验证就行。整个过程大概十分钟。注册成功后，你会得到一个 AppID，这玩意儿就是小程序的身份证，后面开发时会反复用到，建议记在备忘录里。别嫌麻烦，这一步搞定了，后面的事儿就顺了。

有了账号，接下来要装开发工具。微信官方推出了“微信开发者工具”，用于写代码、调试、预览。去官网下载，安装过程和普通软件一样，点“下一步”就行。打开后，用刚才注册的微信号扫码登录，选“新建项目”，填上 AppID，项目名称随便起个“我的第一个小程序”，然后选“不使用云服务”，因为零基础入门先从本地做起。界面出现后，你会看到左边是模拟器，右边是代码区。乍一看密密麻麻的字母，别慌。点开 “pages” 文件夹，找到 “index.wxml” 和 “index.wxss” 这两个文件，这就是小程序的“骨架”和“衣服”。wxml 负责结构，比如放文字、按钮、图片；wxss 负责样式，比如颜色、大小、间距。先试着改改里面的文字，把 “Hello World” 改成 “你好，世界”，模拟器里会实时更新。这种感觉就像小时候玩橡皮泥，捏一下就变个样，挺上头的。

零基础最难的不是技术，而是不知道从哪儿下手。所以先定个小目标：做个“个人名片”小程序。功能就三个：展示你的名字、一句话介绍、以及联系方式。打开 index.wxml，清空默认内容，写上一行代码：\你的名字\，这是显示文字的标签。再写：\一句话介绍\，比如 “爱吃火锅的程序员”。然后加个按钮：\联系我\。保存后，模拟器上就出现了三样东西。但文字和按钮会挤在一起，不好看。这时去 index.wxss 里调样式，加几行代码把内容居中并给按钮加背景色，例如：```css.container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;}```这段代码的意思是把内容垂直居中，并占满整个屏幕。改完保存，模拟器里的界面立马清爽了。这一步就是“骨架”和“衣服”的组合，你不需要懂所有代码，只要知道改哪儿会有什么效果就行。

光有界面还不够，得让按钮有反应。比如点击 “联系我” 弹出一个对话框，显示你的微信号。这就要用到“事件绑定”。在 wxml 文件里，把 \ 改成 \，bindtap 表示点击时触发。然后在 js 文件里写一个叫 contactMe 的函数。找到 index.js，在 data:{} 下面加上：```javascriptcontactMe: function() {wx.showModal({title: '联系方式',content: '微信号：yourWechat',showCancel: false});}```wx.showModal 是微信提供的弹窗功能，content 里填你的微信号。保存后，点击按钮，弹窗就出现了。这一步会让你有成就感：原来让小程序“动起来”就这么简单。别怕写函数，只要复制粘贴，改改文字就行，试几次你就摸到门道了。

小程序做好了，得让别人也能用。这就涉及到“预览”和“上传”。在开发者工具里，点击工具栏的 “预览” 按钮，会生成一个二维码。用手机微信扫一扫，就能在手机上看到这个小程序。但注意，这个二维码有效期只有 24 小时，而且只能给开发者自己用。想正式发布，必须点 “上传”，把代码提交到微信后台。上传前，需要先填几个基本信息：小程序名称、头像、简介。名称不能随意使用 “最”“第一” 等违禁词，也不能与他人重名。头像随便选一张图，简介写清楚功能，例如 “个人名片展示工具”。提交后，微信审核需要 1 到 7 个工作日。审核期间可以继续打磨功能，比如加个人照片或做一个简单的导航页。审核通过后，你的小程序就正式上线，任何人都能搜索到。从零到一，就这么走完了一圈。

说点实在的。零基础学做小程序，最大的障碍不是技术，而是心态。很多人一看到代码就觉得自己不行，其实这些代码 90% 都是固定套路，只要会复制、粘贴、改参数就行。就像学开车，你不用懂发动机原理，只要会踩油门、打方向盘就能上路。微信小程序的官方文档写得很详细，遇到不懂的就去搜索 “微信小程序+功能”，网上教程一大把。另外，别追求一次完美，先做一个能用的版本，哪怕界面丑点、功能少点，发布出去就是成功。等你跑通了一遍流程，再回头看那些复杂的代码，会发现其实没那么可怕。关键是迈出第一步：注册账号、装工具、写第一行代码。别犹豫了，现在就打开电脑试试。

原文来自：小程序开发

下一篇：解析微信“我的小程序”功能，轻松管理你的常用工具 上一篇：微信小程序制作抽奖，零基础也能轻松上手