小程序制作教程:0基础用免费工具做第一个小程序,1小时做出能扫码预览的预约页(附完整)
- 2026-10-22 09:12:50
爬坡系列走到第四课了：第一张AI图 → 第一条AI视频 → 第一个网页，今天做最后一个、也是最有分量的一个——第一个小程序。
先说清楚它和网页的区别，你就知道为什么值得多花这半小时：网页发到微信里，对方点开经常是一串文件、打不开；小程序不一样，它是"长在微信里"的——发出去就是一个卡片，点开就能用，不用装App，不用下载。这也是为什么很多实体店老板愿意为它花钱。
先交个底，方便你决定要不要看完：
- 今天做成什么样：
一个能在"微信开发者工具"里跑起来、手机扫码就能在自己微信上看到的预约页（店名、价目表、预约登记、一键打电话） - 要多久：
第一次大概 60~90 分钟（一半时间在装工具和注册，一半在复制粘贴） - 要花钱吗：
不用。注册小程序免费，开发者工具免费，AI 用免费的 - 能靠它赚钱吗：先把它做出来
。这行的真实情况我放在文末，老实说，不画大饼
网页是你电脑上的一个文件，双击就能看。小程序不行——它必须由微信开发者工具把它打包、上传到微信，读者才能在微信里打开。
所以你今天的操作就三样：在工具里建项目 → 把代码粘进去 → 点"编译"看效果。
个人也能注册小程序，不收钱。需要：一个没注册过公众号的邮箱、你的身份证、一次人脸识别。必须有这一步，因为微信要知道这个小程序是谁做的。
凡是要你先交钱买"小程序代理权""一键生成小程序系统"的，你现在都不需要。真做起来了再谈。
1. 一个没用过的邮箱 —— 用来注册小程序账号。注意：一个邮箱只能注册一个小程序，注册过公众号的邮箱不能再用来注册小程序。
2. 微信开发者工具 —— 微信官方出的免费软件，Windows 和 Mac 都有。
3. 一个免费的AI聊天工具 —— 豆包、Kimi、通义千问、DeepSeek 的网页版都行，认准一个用熟。
装完这三样，就够做完今天这一篇了。
1. 电脑浏览器打开 mp.weixin.qq.com，点右上角「立即注册」
2. 选「小程序」（别点成"订阅号""服务号"，那是公众号）
3. 填邮箱 → 去邮箱点激活链接 → 设密码
4. 主体类型选「个人」 —— 个人主体免费，只需要身份证 + 人脸核身；如果你有营业执照，也可以选"企业"，但个人足够做展示类小程序
5. 填身份证信息、用微信扫码做一次人脸核身
6. 提交后，在小程序后台左侧「开发」→「开发管理」→「开发设置」里找到你的 AppID，是一串 wx 开头的字母数字
卡点提醒：这一步审核通常几十分钟到几小时。AppID 先复制到记事本存着，下一步要填它。
1. 浏览器搜「微信开发者工具下载」，进微信官方文档站（developers.weixin.qq.com）
2. 版本选「稳定版 Stable Build」，别选 Beta（会踩奇怪的坑）
3. 下载对应系统版本，一路默认安装
4. 装完打开它，用你自己的微信扫码登录
1. 点左侧「+」（新建项目）
2. 项目名称：随便填，比如 yuyue（建议英文，别用中文和空格）
3. 目录：点「选择」，新建一个空文件夹给它（必须是空文件夹）
4. AppID：把第一步存的 AppID 粘进去
5. 开发模式选「小程序」，后端服务选「不使用云服务」，模板选「不使用模板」（或 JS 基础模板）
6. 点「确定」
工具会自动生成一个小程序骨架，中间那块就是模拟器，左边是文件列表，右边是代码。
AI 会给你一堆代码，新手最容易懵在"往哪粘"。小程序一个页面，固定就这四个文件：
miniprogram/ ├── app.json 全局配置（有哪些页面、导航栏颜色） ├── app.js 启动入口（新手阶段不用动） └── pages/index/ ├── index.wxml 页面结构（有什么内容） ├── index.wxss 页面长相（颜色、间距、圆角） ├── index.js 页面逻辑（点按钮发生什么） └── index.json 页面配置（保持 {} 就行）记法：wxml 是"有什么"，wxss 是"长什么样"，js 是"点了会怎样"。 三样各管一摊，互不干扰——这就是为什么小程序比网页更适合新手改：改坏一样，另外两样还在。
打开你的AI工具，把下面这段话整段复制进去，括号里换成你自己的：
请帮我做一个"小店预约登记"微信小程序，只做一个页面（pages/index/index），要求：
① 顶部一个绿色卡片：店名（阳光理发店）+ 一句话介绍（洗剪吹、烫染、营业时间）；
② 第二块：服务与价格清单，4 条（洗剪吹 35、烫发 168、染发 128、儿童剪发 20），每行左边名字右边价格；
③ 第三块：预约登记，两个输入框（称呼、手机号）+ 4 个可点选的时间段（选中变绿）+ 一个"提交预约"按钮，点击后先检查手机号是不是 11 位，不合法就弹提示，合法就弹窗显示"预约已记下"；
④ 底部一个"一键打电话给店里"的按钮，点击后调起拨号；
⑤ 样式干净、圆角、绿色为主色，用 rpx 单位，适配手机；
⑥ 请分别给我这 4 个文件的完整代码：index.wxml、index.wxss、index.js、index.json，每个文件用文件名标清楚，不要省略、不要用省略号跳过。
发出去，AI 会分四段给你代码。
这是整篇最容易出错的一步，一个文件的代码只能粘进对应的那个文件：
点左侧文件列表里的 index.wxml→ 把 AI 给的 wxml 那段全选粘贴进去（注意：粘之前先把编辑器里原来那几行全选删掉）再点 index.wxss→ 粘 wxss 那段再点 index.js→ 粘 js 那段app.json如果 AI 也给了，就一起换掉
关键提醒：千万别把 wxss 粘进 js 里——这是新手第一大坑，一粘就满屏红字。粘贴前先看一眼左侧文件名，粘完再核对一眼。
粘完后，index.js 里的核心逻辑长这样（AI 给你的基本就是这个形状）：
Page({ data: { services: [ { name: '洗剪吹', price: 35 }, { name: '烫发（含剪）', price: 168 } ], times: ['上午 9-11 点', '下午 1-3 点', '下午 3-5 点'], name: '', phone: '', activeTime: '' }, onSubmit() { const name = this.data.name; const phone = this.data.phone; if (!name) { wx.showToast({ title: '请先填写称呼', icon: 'none' }); return; } if (!/^1\d{10}$/.test(phone)) { wx.showToast({ title: '手机号要填 11 位', icon: 'none' }); return; } wx.showModal({ title: '预约已记下', content: name + '，我们打 ' + phone + ' 跟您确认。' }); } });看懂两件事就够：data 是"页面里会变的东西"（价格、输入的名字、选中的时间都放这儿），onSubmit 是"点提交按钮时做的事"（先检查、再弹窗）。价格要改，改 data 里的数字就行，不用碰别的。
工具顶部有个「编译」按钮，点它。左边的模拟器里就出现你刚做的页面。
这就是照上面那段提示词做出来的真实效果（模拟器 375 宽的手机屏幕）：
真实渲染效果：教程里这份页面代码渲染出来的样子——绿色店名卡 + 价目表 + 预约登记
往下填名字、填手机号、点一个时间段（选中会变绿），再点「提交预约」，就会弹出确认框：
真实渲染效果：填完信息、选中时间段后点提交，弹出"预约已记下"的确认框
模拟器里能看到，还不算"真的在你手机上"。想让你自己的微信里看到它：
1. 点工具右上角的「预览」
2. 屏幕上出现一个二维码
3. 用你自己的微信扫这个码（就是刚才登录工具那个微信号）
4. 手机上就出现这个小程序了，可以来回点、来回试
这一步能成功，说明你的小程序真的跑起来了——虽然它现在只有你自己能看到。
| 现象 | 原因 | 改法 |
|------|------|------|
| 新建项目时报错，建不出来 | 目录不是空文件夹 | 重新建一个空文件夹，别用有文件的 |
| 提示 AppID 无效 | 复制时带了空格，或还没注册好 | 重新去后台复制 AppID；没注册就先用"测试号" |
| 编译后一片白，什么都没有 | 代码粘错文件了 | 检查 wxml 里是不是混进了 wxss 的内容，换回来 |
| 满屏红字，说 xxxx is not defined | js 只粘了一半 | 让 AI "再给我一次完整的 index.js"，整段重粘 |
| 样式完全没生效，只有黑字 | wxss 没粘进去，或类名对不上 | 让 AI "确保 wxss 里的类名和 wxml 里的完全一致" |
| 图片显示不出来 | 用了本地图片路径 | 让 AI "不要用任何图片，用 emoji 代替" |
| 手机上扫码后打不开 | 扫码的微信和登录工具的不是同一个 | 用登录开发者工具那个微信扫码 |
| 点提交没反应 | 按钮的 bindtap 名字和 js 函数名不一致 | 让 AI "核对 bindtap 和函数名是否一一对应" |
| 想让店名价格换成自己的 | 改的地方找错了 | 价格改 js 的 data；文字改 wxml；颜色改 wxss |
一句话总结：小程序出问题，九成是"粘错文件"和"名字对不上"，不是 AI 不行。
上面做的版本，提交预约只是在手机上弹一个确认框——信息没有传到任何地方。你自己点着玩没问题，给店里用还不够。
想让它真的收到预约，只有一条路：接一个"存东西的地方"（后端）。小程序官方给了一个省事的方案叫「云开发」：把你的数据存到微信自己的数据库里，有免费额度，个人小店那种量级够用。
要不要今天就做？我的建议是：不要。 新手一天里同时学"页面 + 数据库"，八成会卡到怀疑自己。先把页面做出来、先拿给店主看效果——你能不能接到活，靠的是"店主看了觉得能用"，不是"数据库有多高级"。数据库那部分，等你要接第一单的时候再学。
1. 给本地小店做"展示 + 预约"小程序 —— 理发店、汽修店、宠物店、家政、摄影工作室。他们大多只有一个微信，没有正经的预约入口。这是目前最现实的接单方向。
2. 先免费做一条换真实反馈 —— 免费给一家店做一版，拍下店主使用的照片和一句评价。这一条，比你在群里发十遍"我会做小程序"都管用。
3. 做报价页/服务介绍页 —— 一次促销、一份价目表、一个服务说明，做成小程序发卡片，比长图清楚。
4. 攒作品 —— 这行真正值钱的是"你能拿出几个做好的小程序"。做到三个、五个，才谈得上报价。
给几句实话：
- 简单展示/预约类小程序，市场价大多在几百到两三千
，靠的是量和口碑，不是"技术多难" - "小程序躺赚""挂广告月入过万"的话别信
—— 个人小程序挂广告有门槛（需要一定访问量），而且这点收入很薄 - 个人主体有明确限制：
不能做电商交易（不能收款卖货）、不能做医疗/金融/教育培训等需要资质的类目。接单前先跟店主说清楚这一点，别到审核被拒才解释。
- 别抄别人的小程序：
整站照搬、复制别人的名字 logo 文案，平台会下架，严重的要赔钱 - 别仿冒官方：
做成银行、医院、政府、大平台的样式，哪怕只是练手，也可能被当成诈骗，这是刑事风险 - 别乱收集用户信息：
收集手机号必须有用途说明和隐私协议，别把用户的手机号存到自己的表格里再倒卖——这是违法的 - 别乱填资质和承诺：
编造"官方指定""包治""稳赚"，出问题你要担责
这一课就到这。你今天的任务只有一件：注册一个小程序账号，把 AI 给的代码粘进去，点一次"编译"，再让手机扫一次码。
>
哪怕页面上只有店名、四行价格、一个手机号，只要它真的在你手机里打开了、你亲手改过一版颜色，你就已经比"收藏了教程却一直没动手"的人快了一大步。
>
别贪多，也别想着一次做完美——先做出来，你自己去动手。
