一、前言
最近挑战使用7天的时间，从0开始上线了一个前后端都具备的微信小程序。 中间大量使用到了AI-IDE来进行编码，所以这是一篇复盘贴，同时希望能给刚接触AI编程的朋友们一个上线微信小程序全流程的参考。
这篇文章的主要内容：
- 复盘这个过程中，我用到的提效工具和踩过的坑。
- 分享如何用最低的成本上线一个全栈小程序。
二、项目介绍
本次是做了一个拍照翻译的小程序。
灵感最先来源是因为最近购买了一些跨境的商品，而这些商品上的标签一般都没有中文，所以很难知道它的使用方法和成分。
在微信上有一个拍照翻译的功能，但效果非常的差，很多翻译词不达意。
加上现在AI识图的能力已经很不错了，所以实现这么一个需求理论上是可以行的。
开发过程中有用到 AI-IDE(windsurf/trae)、微信小程序、后端API-fastapi、飞浆OCR、智谱glm模型、docker、代码托管平台CodeUp。
三、工具与花费盘点
“踏上取经的路，比抵达灵山更重要” ----- 冯骥
把白嫖精神贯彻到底。
在项目初期减少一切不必要的花费。
用最低的成本，先踏上取经的路。
这次上线小程序抛开所花费的时间之外，上线这个小程序的全部花费如下：
AI编辑器：
- Trae：免费
- Windsurf：免费
微信小程序:
-
微信小程序开发工具：免费
-
小程序认证： ￥30
后端API:
- Python+FastAPI：免费
OCR工具：
- 飞桨OCR: 免费
智谱GLM模型：
智谱 GLM 系列模型提供免费调用的服务，很强！推荐大家使用。
- GLM-4V-Flash ：免费
代码托管平台：
- CodeUp：免费
云服务器ECS:
多个项目共用，摊低成本。
- 阿里云 2核2G： ￥99/年。 之前已经购买，并且多个项目共用，所以本次花费￥0。
域名：
已经有域名的同学，可以配置一个子域名来使用。
- 万网购买：最低 ￥5.5。 本次是配置的子域名来使用，所以花费￥0。
内网穿透工具：
- Frp: 免费
小结：
如果你是一名开发者，已经有了云服务器和域名，那全部花费就只有小程序认证的30块钱。
如果从0开始，那么全部花费是: 小程序认证￥30 + 云服务器 ￥99 + 域名 ￥5.5 = ￥134.5
三、踩坑复盘
1. AI-IDE(windsurf/trae)
目前我最常用的是Trae海外版本。
它的优势主要是免费，并且claude3.7模型也是免费用。
这个编辑器在行动手册里也有介绍，用它我已经做了很多个项目了，IDE交互体验也是我比较习惯的。
问题是需要排队，然后感觉最近貌似有点降智。
第二用的是Windsurf。 这个在本次行动手册里没有介绍，我也是才开始体验它。不过它应该是付费里面使用体验仅次于cursor的编辑器了。
第一次使用也有一定的免费额度，后续续费是15刀/月。比Cursor便宜5刀，性价比高。
之所以没用Cursor是因为现在续杯越来越麻烦了，而且不稳定，而我不想折腾这些了，所以主要采取的是平替方案。
2. 微信小程序
1. 1个邮箱只能注册一个公众号、或者小程序。
由于我自己的邮箱之前已经注册过公众号了，所以只好再申请一个邮箱来注册小程序。(PS:不太能理解微信为啥要这么做=_=!)
注册邮箱我使用的是163邮箱，然后使用的也是邮箱大师来管理邮箱。 这样也可以第一时间收到邮件。
2. 吭哧吭哧开发，而忽略了原型图。
做软件，尤其是ToC 的软件，交互的重要性就不必多讲了。而的坑就是在脑海里有了大致的构想之后就直接进行开发了，结果在调样式调页面布局、按钮样式的时候，调到几乎崩溃。
我在开发前期也踩了这个坑。最后还是痛定思痛沉下心来，花了大半天的时间，设计了一下原型图，对着原型图就很好开发了。
在原型图这里，我主要是用的还是 MasterGo。因为它具备基本的原型图设计功能，同时也支持AI 生成原型图和代码。
同时它的社区非常丰富，可以复制一份其它大厂的设计，方便借鉴他们的元素和设计规范，随取随用。
这是我用MasterGo设计生成的页面，非常接近理想状态了。只是他目前还不支持生成原生微信小程序的页面代码。
3. 小程序使用了相机、相册权限等一定要填写隐私申明。
具体情况是，我的小程序需要默认使用摄像头。 开发和体验版本都能正常使用，并且可以正常弹出授权弹窗。 发布上线后却无法打开摄像头，同时没有授权申请弹窗
这里比较坑的是在提交代码和发布审核，甚至审核通过了后，我都没有收到提醒说要更新隐私声明的提醒。
直到我修改了两次代码，发布了两次，问题依然存在，看到论坛上其它的资料后才发现。
并且这个设置的入口还比较深，找了好一会。
修改后审核通过后线上的版本立刻就可以使用了，审核大概花了3个小时。
比较巧的是，同一天，群里另外一位群友也遇到了类似的问题，这个经验也立刻发挥了它的价值。
4. 小程序需要备案，备案速度比预想得快。
小程序注册完后，在微信公众平台的后台，首页就会提示你要备案。
备案的流程简单概括：填写信息→微信平台初审→工信部短信核验→通信管理局复审→下备案号。
我的备案流程大概只花了3天，感觉还是比较快到。
5. 选择个人认证还是公司认证。
微信小程序是需要做主体认证后才能上线的，支持个人主体或公司主体。
个人主体只需要身份证、手机号等个人信息就可以了。但缺点是无法使用微信支付、无法实现商品交易、付费活动等商业功能，仅能通过广告盈利， 比较适合工具、博客类型的小程序。 认证费用是30块
公司主体则需要营业执照、法人身份证、对公账户信息等资质，支持广告投放、会员管理、H5页面跳转等等。 认证费用 300块。
因为我希望这个小程序在后期想做会员定阅，需要微信支付的功能，所以在认证方式这里犹豫了一下。
在群里咨询了群友后，最后选择了先使用个人认证。原因企业认证前期成本会比较高，等跑通基本流程，确定市场可行后，可以再通过主体迁移升级到公司认证。
没有使用新注册一个小程序的原因是考虑到小程序已有用户留存的问题。
不过也有提到说小程序主要是根据好名字来排名的，所以是否注册一个新的小程序影响不大。
当然这个就仁者见仁了。
3. 后端API
后端我是使用的是FastAPI。 因为之前接触也比较多，所以比较习惯。
新手建议使用next.js，减少编程语言的学习成本。
我的后端整体服务比较简单，只有1个接口，主要是调用OCR和大模型的API，所以开发上的坑不多。
这里的一个技巧是在开发之前，不要直接就让Cursor/Tare 进行开发。 最好先告诉它你的需求，然后让他根据最佳实践来建好目录结构，这样它在后续的开发就不会导致目录太混乱。
4. 对程序部署所需要的资源预估不足
由于OCR我使用的是飞桨的SDK，因此需要把服务安装在服务器上。
但是部署的过程才发现，2核2G的服务器根本就顶不住。
在折腾的了一晚上后，终于是掏出来10年前的笔记本来扛起大旗~~。
2核的i5 CPU+12G 的内存，虽然现在来讲根本不够看了，部署一个飞浆OCR的服务还是绰绰有余。
而云服务器一台2核8G的就需要 1200+/年了
5. 内网穿透-线上调用本地的服务
既然把服务部署到本地了，那么在线上怎么调用就是一个问题了。
因此这时就需要用到内网穿透的工具了，一般内网穿透的工具很多，根据自己的需求来选择。
这里我用的是Frp。
原因是它是一个开源项目，同时我也有一个线上服务器了，部署一个frp非常的方便。
安装方法：
- 在github上下载你的机器对应的版本。 服务器和本地电脑都需要装。
- 解压后，里面会有4个文件
- 在线上服务器安装Frps(frp-server) ，在本地电脑安装frpc(frp-client)。
配置参考官方文档的这一节：gofrp.org/zh-cn/docs/…
官方文档演示的是ssh的服务，这里把22端口改成你的服务的端口即可。
name 是可以自定义的
- 线上服务器要开放两个端口，分别是
bindPort、remotePort。 否则frpc 连接不上线上的frps服务。
之后你在线上服务器就可以直接访问 http://127.0.0.1:6000 的地址来调用本地电脑的服务了。
6.caddy配置
caddy 是一个反向代理服务器，这一步是将域名指向到我们的服务。
选择caddy的原因是因为caddy的配置非常简洁，两行配置就可以搞定一个服务转发的配置。
目前免费的https证书有效期都非常短，之前只用nginx，每隔一段时间就需要重新申请，而caddy可以自动管理证书的续期！ 并且默认就是开启自动需求，完全无感，非常的香。
7. 云服务器
阿里云ECS，目前2核2G的只需要99/年。 大部分的网站、小程序后端都够用了。
我目前使用的云服务器是在活动时购买的，99的价格直接买了4年。 用来开发测试，和部署一些轻量级的服务非常香
8. 域名
我使用的域名也是之前个人博客网站注册的主域名，配置一个二级域名就可以了。
.com的域名比较贵，万网上现在价格在83/首年，续费是90/年。
不过现在已经不是门户网站的时代了，用户在使用小程序的时候，也不会关注你的域名是什么。 因此后缀什么的根本不重要了。
新手选择一个最便宜的就好了。
目前万网上 .xyz后缀的，只要5.5/首年，不过续费会比较贵。
考虑到后面续费的话，可以选择.top的域名，首年12块，续费也只要32块/年。
-
代码托管-codeup
一般人都会建议使用git + github 来管理代码。
确实，github作为一个开源平台，无人可以望其项背，不过在国内有一个硬伤，就是网络的问题。
国内需要魔法才能稳定访问。
所以我个人不建议把非开源项目放到github上。
可以选择一些国内的代码托管平台，例如gitee/codeup等等。
我选择的是Codeup。 Codeup 是阿里云云效（Apsara DevOps）提供的企业级代码托管平台，基于 Git 开发，支持代码管理、代码评审、持续集成（CI/CD）等功能，适用于团队协作和 DevOps 全流程管理。
主要看中它的两点功能：
- CICD功能，个人用户每月免费3000分钟！
- CICD时执行docker build 的机器支持香港节点。 因为 docker 在国内也被ban了，所以现在国内使用docker 非常的慢，也经常不成功，而香港环境则不会受到这个限制，pull 镜像的速度非常的快。
CICD是啥？
简单来讲CI/CD（Continuous Integration / Continuous Deployment）是一种自动化软件开发流程，在提交代码之后，自动执行测试、打包、docker镜像编译、部署到服务器（比如网站、App更新） 的功能。
-
传统方式（手动操作）：
- 代码写完后，要自己测试、打包、上传服务器，容易出错，而且很慢。
-
CI/CD 方式（自动化）：
- 代码一提交，自动测试、打包、发布，又快又稳。
四、心得与体会
完成比完美更重要
作为之前没有开发过小程序的新手，这是一个从0-1完成的过程，也正是因为AI，所以才赋予了我们更多敢想敢做的能力。
