330-从零搭建微信小程序完整教程 - “Web全栈教师“AI助手
330-从零搭建微信小程序完整教程 - \"Web全栈教师\"AI助手
- 一、项目概述
- 二、环境准备
-
- 2.1 注册微信小程序开发者账号：
- 2.2 下载微信开发者工具：
- 2.3 确定 IoT 后端方案：
- 2.4 AI编程软件
- 2.5 豆包API密钥生成
-
- 概念
- 步骤
- 2.6 备注
- 三、小程序前端开发
-
- 3.1 小程序流程介绍
- 3.2 微信开发者工具
- 3.3 使用Cursor协助开发
- 3.4 备注
- 四、API测试
-
- 4.1 概念
- 4.2 cmd快速测试
- 4.3 备注
- 五、后端开发
-
- 5.1 概念
- 5.2 服务器配置
- 5.4 效果展示
- 六、小程序上传备案
-
- 6.1 概念
- 6.2 上传备案
一、项目概述
-
感谢孟老师留的这个小程序的作业，让我对微信小程序有了更深刻的了解！💐
-
该项目为从零搭建微信小程序完整教程 - \"Web全栈教师\"AI助手，以小白的视角讲解，绝对简单易懂。
-
项目特点：
- 零基础友好：步骤详细简单易懂，小白视角记录了我的搭建过程。应用AI工具，体验高效开发流程。
- 全栈覆盖：前端小程序开发 + 后端豆包API部署，一个项目学会全流程开发
-
技术栈
- 前端： 微信小程序原生框架 + JavaScript + WXML + WXSS
- 后端： 豆包AI API + HTTPS服务器
- 开发工具： 微信开发者工具 + Cursor AI编程助手
- 部署： 微信小程序平台 + 云服务器
-
流程总览图
#mermaid-svg-eqzryYRRlOqyiv7j {font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-eqzryYRRlOqyiv7j .error-icon{fill:#552222;}#mermaid-svg-eqzryYRRlOqyiv7j .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-eqzryYRRlOqyiv7j .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-eqzryYRRlOqyiv7j .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-eqzryYRRlOqyiv7j .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-eqzryYRRlOqyiv7j .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-eqzryYRRlOqyiv7j .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-eqzryYRRlOqyiv7j .marker{fill:#333333;stroke:#333333;}#mermaid-svg-eqzryYRRlOqyiv7j .marker.cross{stroke:#333333;}#mermaid-svg-eqzryYRRlOqyiv7j svg{font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-eqzryYRRlOqyiv7j .label{font-family:\"trebuchet ms\",verdana,arial,sans-serif;color:#333;}#mermaid-svg-eqzryYRRlOqyiv7j .cluster-label text{fill:#333;}#mermaid-svg-eqzryYRRlOqyiv7j .cluster-label span{color:#333;}#mermaid-svg-eqzryYRRlOqyiv7j .label text,#mermaid-svg-eqzryYRRlOqyiv7j span{fill:#333;color:#333;}#mermaid-svg-eqzryYRRlOqyiv7j .node rect,#mermaid-svg-eqzryYRRlOqyiv7j .node circle,#mermaid-svg-eqzryYRRlOqyiv7j .node ellipse,#mermaid-svg-eqzryYRRlOqyiv7j .node polygon,#mermaid-svg-eqzryYRRlOqyiv7j .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-eqzryYRRlOqyiv7j .node .label{text-align:center;}#mermaid-svg-eqzryYRRlOqyiv7j .node.clickable{cursor:pointer;}#mermaid-svg-eqzryYRRlOqyiv7j .arrowheadPath{fill:#333333;}#mermaid-svg-eqzryYRRlOqyiv7j .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-eqzryYRRlOqyiv7j .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-eqzryYRRlOqyiv7j .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-eqzryYRRlOqyiv7j .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-eqzryYRRlOqyiv7j .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-eqzryYRRlOqyiv7j .cluster text{fill:#333;}#mermaid-svg-eqzryYRRlOqyiv7j .cluster span{color:#333;}#mermaid-svg-eqzryYRRlOqyiv7j div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-eqzryYRRlOqyiv7j :root{--mermaid-font-family:\"trebuchet ms\",verdana,arial,sans-serif;} 🚀 开始项目 📱 环境准备 下载微信开发者工具 注册小程序账号 安装Cursor编辑器 🏗️ 项目初始化 创建小程序项目 配置项目结构 设置基础配置文件 🎨 前端开发 开发首页界面\\n- 用户授权\\n- 功能卡片\\n- 背景设计 开发聊天页面\\n- 消息列表\\n- 输入框\\n- 发送逻辑 用户数据管理\\n- 全局状态\\n- 本地存储\\n- 授权处理 🔧 后端配置 部署豆包AI API\\n- 服务器配置\\n- 域名设置 配置API接口\\n- 请求格式\\n- 响应处理 域名白名单配置\\n- 微信公众平台\\n- 安全设置 🔗 前后端联调 API调用测试 错误处理优化 性能优化 🧪 测试调试 功能测试\\n- 聊天功能\\n- 用户授权\\n- 页面跳转 兼容性测试\\n- 不同设备\\n- 网络异常 用户体验优化\\n- 加载状态\\n- 错误提示 🚀 部署上线 代码审核\\n- 微信审核\\n- 功能检查 正式发布\\n- 版本管理\\n- 用户反馈 ✅ 项目完成 📚 教程总结\\n- 经验分享\\n- 问题汇总\\n- 进阶建议
二、环境准备
2.1 注册微信小程序开发者账号：
- 访问 微信公众平台：微信公众平台
- 选择注册 “小程序”，按照指引完成注册。
- 注册完成后，你会获得一个 AppID，这是你小程序的唯一标识，开发和发布都需要它。
2.2 下载微信开发者工具：
- 下载网址：微信开发者工具
- 下载并安装最新版的微信开发者工具。这是你编写代码、预览、调试和上传小程序的 IDE。
2.3 确定 IoT 后端方案：
- 我们这里选择阿里云的服务器，阿里云有大学生优惠卷，可以免费用1年，还是很棒的，太良心了！至于优惠卷领取、服务器购买及配置，请看我的博客搭建文章，里面都有详细讲到。
- 网址：阿里云
- 服务器选购教程：310-个人博客搭建
2.4 AI编程软件
- 我这里用的是cursor，需要科学上网，不会的伙伴可以用国内的trae，也很好用。
- 什么是编程软件呢，编程软件内集成了DeepSeek、claude-4.0、GPT等全球顶尖大语言模型，在该软件内，你可以和对应模型提出要求，然后一键修改。
- 当然，也可以使用对话的形式进行平替，就是直接让AI生成代码，然后复制到对应文件夹中。
2.5 豆包API密钥生成
概念
- 什么是API呢，你可以想象为它是一个工厂，就是我们平常给豆包或DeepSeek发消息，会先将消息送到这个工厂中加工，然后再将加工好的消息呈现到对话框中。
- 为什么要用API呢？我们有了这个工厂，就可以不拘泥于官网对话框的形式了。我们可以将我们的小程序和工厂连接，用户直接在小程序中就可以体验到智能AI，而且我们还可以进行人物角色配置等操作。下面会用一个简单的可在我们命令窗中运行的方式来测试，相当于在命令窗和豆包聊天，很有意思。
- 为什么选择豆包？便宜。
步骤
- a.登录火山引擎：火山引擎
- b.获取密钥：开通API（通常赠送免费额度）、点击API Key管理获取密钥（不要泄露）
- c.开通服务：选择开通管理 -> 开通我们想用的模型，这里我们选择
Doubao-1.5-vision-pro即可 - d.查看对应接入文档：开通服务中，点击对应开通豆包模型的接入文档，保留requset部分。
- 这就是我们要调用豆包API的文件格式。
2.6 备注
- 这些准备可能让你摸不着头脑，这很正常，因为时间原因，我也没办法写很多，同时写太多了伙伴们也不想看。但是，这些都是很重要的，是大多数前后端开发都会用到的，所以建议大家可以花时间研究一下，一定会受益匪浅！
三、小程序前端开发
- 接下来我们会用微信开发者工具来进行我们的整个项目开发，小程序和软件不同，所以要用到这个专门的开发工具；同时在开发过程中我们会使用Cursor、Trae等AI编程工具提高我们的开发效率；最后还会进行后端配置、豆包API配置等步骤。
3.1 小程序流程介绍
- 这个小程序我们主要的功能就是web-AI老师的功能，用户点击web老师聊天框，发送消息，然后前端会将消息以特定的格式发送给后端服务器，我们的后端服务器已经配置好了豆包API，接收到小程序前端的特定消息后，会以API要求格式（我们之前复制的接入文档）发送给处理消息的工厂，然后再将返回的消息返回给小程序前端并呈现到用户的对话框中。
- 为什么要将API放到后端服务器上，而不是直接部署到小程序前端。这个操作是可以的，但是考虑的其中包含API密钥等信息，如果放到前端，会很容易被其他人窃取信息，所以将API直接部署到前端有数据泄露风险。
3.2 微信开发者工具
- a.打开安装好的微信开发者工具
- b.创建工程：点击加号 -> 填入项目名称、目录、AppID，选择基础模板，选择创建
- c.页面介绍
3.3 使用Cursor协助开发
-
如果不会用的话可以忽略此步骤，或者问AI然后复制粘贴。
-
a.打开Cursor，选择我们的小程序项目
-
b.需求发送：将我们的要求发送给它。将需求大概描述，同时需要提供给它我们之前复制的接入文档的内容。
-
c.确认修改，期间不断点击接受，然后几分钟AI就会帮你把整个工程大概建立好啦
-
d.完成
-
e.完善：当然不可能一次性都修改好，我们需要通过微信开发工具实时查看效果，然后不断修改啦，接下来让我们看微信开发者工具效果，点击编译
- 我这里直接没有显示效果，可能是被模板的代码覆盖了，这时直接将图片复制给Cursor，然后说明问题
- 复制给Cursor
- 自动检查
- 成功了！当然还有一些错误，就需要我们不断询问AI然后修改啦！
- 聊天功能也没问题（因为我的服务器之前已经配置好了，所以这里可以直接使用），不得不说，claude-4是真的太强大了啊，一次成功，几分钟搞定。所以啊，一定要紧跟时代，会使用人工智能的人才不会被淘汰！
3.4 备注
- 注意，Cursor免费额度为50次，如果没有很多账号，可以用Trae，这个是免费的，但是使用的人很多所以要慢一些。
- 授人以鱼不如授人以渔，在现在这个时代，我们可能不必要很懂代码，同样可以开发出很标准的项目。但是，请明白我们是AI的使用者，而不是被使用者，所以在AI赋予了我们便利的同时，要不要忘记读懂代码本身才是我们长久发展的根本！使用Cursor等工具就是一种很便利的捕鱼方法，但是想要吃上美味的鱼，了解鱼本身才是关键！
四、API测试
4.1 概念
- 想必大家已经对API是什么有了一些概念，那么这里让我用一个案例更直观的展示一下API调用的魅力吧！
- 在此之前，请确保你已经获得了火山引擎的API密钥，和对应模型的接入文档！
- 接下来我们依然教大家捕鱼的方式，就是如何用AI来帮助我们快速完成测试。
4.2 cmd快速测试
-
a.打开一个你常用的AI聊天界面（我用的是Gemini2.5,全球实力靠前且免费使用，真的很推荐），给它提供具体要求和信息
-
b. 按步骤复制粘贴：之后Gemini2.5会给我们具体的步骤，我们只需要根据步骤进行。
-
c.豆包返回消息
4.3 备注
- 是不是很有意思，使用AI可以帮助我们大大加快开发进度，但是API调用中还有很多有意思的地方，比如怎么提示豆包以什么样的角色来回复你的消息等！这都是需要我们花时间来了解学习的！
五、后端开发
- 该前提是你已经拥有了一个服务器（我的是阿里云服务器）
5.1 概念
- 什么是服务器呢，它就相当于一台一直运行的电脑。我们的项目写好后，最后肯定是要别人通过链接、网址访问等形式来看到的。所以我们将我们的代码网页等上传到服务器上，让服务器代替我们一直运行这个网页，等有用户输入对应网址的时候，就会访问到我们的服务器如何获得对应数据啦！
- 所以我们买服务器的时候都有位置选择，这就是我们服务器实体放置的位置，它的物理地址。
- 很多服务器都是liux系统，一般进行交互都是以命令行的形式。
5.2 服务器配置
- a.连接服务器：打开阿里云 -> 控制台 -> 云服务器 ECS -> 远程连接 -> 公网 -> 免密连接 -> 登录
- b.使用Gemini2.5辅助开发：这里同样使用AI协助开发。你需要将项目给它讲明白，然后告诉他需要做什么。因为时间原因，这里就交给大家啦，之后有时间可能会再次更新这一部分。
- c.后端配置好后，然后再测试我们小程序的聊天功能，就发现已经可以了！或者会遇到一些问题，但是我想你已经知道如何通过AI工具来解决了！
5.4 效果展示
六、小程序上传备案
6.1 概念
- 完成小程序后，需要备案审核通过后才可以发布并被大家搜索到。
- 备案分为两部分，一部分是要在国家有关部门备案，一部分是在微信备案。有关部门是审核小程序的内容主题等的合理性，微信则会审核代码等信息。
- 开发不同小程序，需要重新为新小程序备案。
- 国家部门备案时间一般大于等于7天，微信部门备案小于等于3天。
6.2 上传备案
- a.微信开发者工具中，打开我们要上传的项目，然后点击上传
- b. 备案：登录微信公众平台 -> 首页就有小程序发布流程，按照提示操作即可
- c.因为AI类目的小程序必须是商业户，个体户不行，所以遗憾的是这个小程序并没有通过备案😭。
