大家好，我是大瑜，一个工作十年的程序员，ai 编程的资深玩家。

一、前言

最近朋友圈对于营销广告的整治力度在加大，所以很多人一天发了好多条内容都被折叠了。直接就变成这样了。

那么关于微信放折叠的修改无非是这些点：

1、修改文案：通过换行或者隐藏敏感词，从而避免被折叠的风险。（原创为王）

2、将重要的文案内容，转化为图片发送。

3、发布频率要优化，在精不在多，一天不要吭哧吭哧发几十条，不把你关小黑屋，天理不容。

4、 通过视频号、微信公众号分享内容而不被折叠。（最近发现，这个也会折叠，所以还需要在文案上下功夫）

那么今天就做一个朋友圈防折叠的小程序。看看能不能解决第一个问题，对于文案的优化。

微信小程序的效果图如下所示，或者搜索：“圈圈文案防折叠”访问。

                                 

整体的界面如下：

二、详细实战步骤

下面将将我如何从0-1开发这款小程序的全过程。包含：功能提取、原型生成以及技术架构选型等功能。

1、功能点抽取

当然，网上有很多关于朋友圈防折叠大教程，下面这个网友写得都很中肯。

我们可以这样问Claude。

遗憾的是，claude会零零碎碎回复你很多功能，如果你觉得冗余的话，可以继续提问他，能不能给我几个核心的功能。

直接告诉他，让他给你优化。

不管做任何产品，20% 的功能可以满足 80% 的需求。

前期我们就只需要完成一个核心的功能：文字优化，至于后面的文字转图片等功能，可以后续继续完善。

2、原型开发

了解完功能之后，我们就开始开发第一个mvp版本了。我们可以这样和claude对话。

当然除了用claude，大家也可以直接 cursor 以及 deepseek 对话，不过目前相对来讲还是 claude 会比较棒。提示词如下：

作为资深产品经理兼UX/UI设计专家，请为"朋友圈放折叠"小程序创建高保真原型设计。您需发挥专业设计能力，将概念转化为视觉化界面。

项目需求：
1. 具体实现细节
核心功能实现：一键将容易被折叠的文案转换为防折叠版本。
解决痛点：复制粘贴文案、敏感词使用、格式不当
功能描述：首页：输入文案，快速优化；输入内容→一键优化→结果对比->用户复制，4步完成.
        智能建议功能：发布时间、分组策略、配图建议。

2. 使用HTML在一个界面上生成所有的原型界面，每一行可以展示3个原型（此要求不可变更）

技术规范：
1. 集成FontAwesome以及iconfont或其他开源图标库，提升UI专业度
2. 设计符合当前移动应用设计标准，注重视觉层次与交互逻辑
3. 提供足够完善的界面细节与状态展示
4. 确保原型界面达到可直接用于开发的质量标准
5. 可以用tailwindcss风格来进行css页面的修改和管理。

请基于以上要求，设计出直观、美观且功能完整的小程序原型，使开发团队能够无缝对接实现。

等待片刻，claude 就会生成代码。

当然，这个是第一版本。我们发现：“界面很丑、底部栏目不清晰”等各种问题。没关系，直接对claude说，让他继续优化。

这个时候，我们突然发现 claude 给我们生成了很多多余的功能。

我们继续给 claude 这样说：所有的原型都要根据提示词生成，不能额外生成无关的内容。

总结：不满意就问就修改。

下面是最终的原型图。

3、技术架构选型

之前一直用微信开发者工具原生开发，但是效果比较丑。那么这一次我们用新的技术架构。

• • 前端选择我们还是选择uni-app来实现开发。
• • 大模型进行文字优化，可以选择 deepseekapi或者第三方的。 我们还是选择硅基流动的api，毕竟大瑜还有8000多元的API调用额度没有使用。
• • 后端我们选择 Python 来实现，当然对 nodejs 和 java 熟悉的人可以选择这个。
• • 数据库用 sqlite 数据库来存储必要的信息，譬如：用户的 code，历史搜索，便于我们对历史的记录回显。（选择理由：实在是太轻量了）
• • 服务器我们选择阿里云云服务器，1 年差不多要 99 元人民币搞定。
• • 域名，随便买一个，1 年也就是 20 元左右。

那么除了cursor，我们还需要下载工具hbuildx，专门开发uni-app小程序的软件。所以我们一共用到下面三个开发工具。

三、mvp版本开发

其实前面比较清晰了，到这里基本上就是自动让cursor生成代码并不断的budebug过程了，没有什么难度。

这里我就截取几个关键的地方。

1、小程序开发

第一步：生成小程序的基本框架。

这里我们选择github比较现成的开源框架，我比较钟意tailwindcss，因此我选择这个github地址。

git地址：https://github.com/sonofmagic/uni-app-vite-vue3-tailwind-vscode-template

下载下来，然后用hubildx打开，经过🧬之后，就可以自动打开小程序工具做预览了。

第二步：用cursor开发小程序。

其中html是我的原型图，refrence.md是第一步我们功能点抽取的参考文档。经过漫长的等待和机轮的对话，

当然，我们还是秉承一个原则，哪里有问题就去哪里调试，毕竟能动口的绝不动手自己亲自写代码。

2、后端开发

这里需要懂一些后端的知识，譬如conda进行python包管理设置。具体可以看大瑜之前的详细教程。

这个有一个技巧，在第一步骤我们生成前端代码的时候，顺便让他生成一个后端接口API操作文档。

因此，我们只需要根据额api文档来生成我们的后端代码即可。

可以看到我的提示词，根据api.md来生成代码，这样代码编写就完全和我们小程序端对应起来了，根本不需要额外的联调。

因为我们需要将用户的信息保存到数据库中，这里我们选择最简单的sqlite3数据库，好处就是一行命令，操作非常简单。（创建数据库的动作，自行百度）。

然后告诉cursor，我的数据库地址是XX，cursor就会自动明白要保存的数据库地址。

3、小程序的联调

到这里，前端也开发好了，那么小程序如何和后端联调呢？

首先要去小程序右上角->详情->本地设置，勾选下面的选项。

不然就是这样：

当然，我们也会遇到系统报错的情况，这个时候就多看微信开发者控制台错误，直接把错误丢给cursor即可。

那么基本到这里，你就可以在自己的手机进行预览与部署了。

但是小程序真的到了上线还差了很大一步骤。

四、小程序上线前准备

因为后端部署是一件比较麻烦的事情，需要服务器购买、域名选择、SSL证书等问题。

如果详细讲解下来，至少是好几节课程，这里主要是告诉大家小程序上线的整体流程。

1、购买阿里云服务器

我们这个小程序不算是复杂，因此买最便宜的阿里云服务已经差不多够用了。打开阿里云官方的首页，就能看到。

99元/年，绝对不吃亏。

2、域名购买、备案并映射服务器

但是购买了域名，我们还需要去备案。只有备案通过，我们的域名才真正可以生效和访问。那有的人说了，如何将域名和IP对应起来呢？回到域名解析就可以看到绑定域名的环节了。

3、部署SSL证书。

点击创建证书，可以免费创建3个月的免费证书。三个月之后可以重新续费。

4、小程序官方认证

小程序认证之后就可以进行一些高级功能的设置了，譬如支付和转发分享等操作。

小程序的认证分为个人和企业认证。其中个人认证只需要30元和身份证即可。企业认证需要企业营业执照和300元的认证费用。

在认证的时候，一般是腾讯外包第三方公司进行认证，可能需要一些认证信息的核对。因此要保证在认证期间的电话畅通。

5、小程序的备案

小程序的备案，可以参考下面的操作：https://developers.weixin.qq.com/minigame/product/record/record_guidelines.html#%EF%BC%88%E5%85%AD%EF%BC%89%E5%A4%87%E6%A1%88%E5%8F%B7%E6%82%AC%E6%8C%82

5、后端代码上传到服务器

因为我们后端用的python开发，所以直接将代码上传到服务器，并安装依赖运行即可。

6、小程序打包和上线。

我们回到hbuildx这个软件中，直接点击“发行”到小程序中。

操作都很方便。

tips：偶尔遇到打包失败的时候，也可以手动编译后，用微信小程序开发工具打开dist/build目录文件。打开后选择“上传”。

五、体验效果

当然，目前用的朋友都说可以，效果还是不错的。后续将继续优化提示词，生成更加个性化的功能。同时添加文案生成图片功能。

期待的朋友，可以蹲个后续，防止烂尾楼。

同时，看到开发一个小程序的整体功能环节很少在代码层面，更多的是对功能的理解以及整个环节的跑通方面的工作。

因此你想了解更多的AI编程知识，那么找大瑜吧。