第5章 用Trae实现微信小程序

第5章

用Trae实现微信小程序

微信是一款不可或缺的国民级手机应用。2025年5月14日腾讯发布的2025年第一季度财报显示，微信月活用户增长3%，突破14亿。微信小程序日活用户超过8亿，其

中电商类小程序用户占比达45%。在电商、金融和本地生活服务增长的推动下，企业对定制微信小程序的需求十分旺盛。

以往入门微信小程序开发需要先掌握前端开发知识，这是一个漫长的过程。而现在有了氛围编程，这个入门过程可以大大缩短。通过本章学习，即使你不具备HTML、

CSS和JavaScript的知识，也能掌握如何从零开始让Trae国际版生成一个极简版的 “减少AI幻觉”的微信小程序。你可以通过研究这些代码来进行高效学习——所有

这些只需半天时间就能完成。

5.1 需求分析

本章实战项目要实现的“减少AI幻觉”微信小程序与第2章中的扣子智能体功能相同——在用户的初始提示词后一键添加“减幻”提示词。具体来说，当用户输入并

提交初始提示词后，系统会自动添加两句辅助提示，将其转化为“减幻”提示词：

・“请为每个主要观点提供至少3个不同来源的出处的网页链接以便我查验”；

・“如果你不知道或查不到，就实说，不要编造”。

【避坑指南】如果提示词使用了口语、错别字或错误的标点符号会怎样？

简单来说，即使你在提示词中使用了带有缩略形式的口语、错别字或错误的标点符号，只要没出现二义性或把意思表达偏了，那么大模型一般还是能很好地理解你的

意图。例如，氛围编程者在让大模型使用上面两句辅助提示词生成微信小程序时，可能会在“出处的网页链接”的“出处”后面少写一个“的”；又例如第二句可能

完全不写逗号，或者在“如果”的“如”后面少写一个“果”，又或者把“实说”

错写成“直说”。有趣的是，当把这些有语病或错别字的提示词提交给大模型时，大模型仍能很好地理解。这启发我总结出氛围编程提示词不完美指导原则（参见

1.7节）。

用户可以复制优化后的提示词，并将其粘贴到其他AI聊天应用中使用。这样在收到 AI回复后，用户就能通过点击提供的网页链接来验证AI回答的准确性。

化”按钮清空当前提示词，开始新一轮优化。

传统的微信小程序开发需要使用微信开发者工具。然而，微信开发者工具尚未支持氛围编程功能，应该如何用氛围编程方式来开发微信小程序呢？

5.2 用氛围编程开发微信小程序

虽然微信开发者工具尚未支持氛围编程，但可以同时打开两个工具：微信开发者工具和氛围编程工具（如Trae国际版或免费的Trae国内版，因为这两款AI原生IDE在

国内比较火热），让它们打开同一个项目目录。只要在微信开发者工具左侧手机界面预览上方开启“热重载”开关，氛围编程工具对项目代码的修改就能实时反馈到

微信开发者工具中，从而实现微信小程序的氛围编程，如图5-1所示。

图5-1 用微信开发者工具（左）和Trae国际版（右）打开同一个项目目录进行氛围编程

【避坑指南】为何不用DeepSeek和Claude这些AI聊天应用氛围编程工具开发微信小程序？

主要原因是操作不够便捷。以后面将要介绍的微信开发者工具生成的Hello World （能够运行的最小版的小项目，一般用来检验开发环境搭建是否能满足程序的正常

成所有这些文件，但当文件较多时，你需要将它们全部复制并粘贴到本地文件里，或一个个下载AI聊天应用所提供的源文件并存储到本地计算机。如果这些文件在本

地运行时出错，你很难在提示词中准确向AI聊天应用描述出错代码的具体位置，还需要手动复制并粘贴错误消息到提示词窗口，这个过程相当烦琐。

相比之下，使用集成开发环境（IDE）形式的氛围编程工具更加高效。因为所有代码都存储在IDE中，通过IDE内置终端运行代码时产生的错误消息可以直接被氛围编

程工具获取，你可以轻松引用这些代码和错误消息来提问，使用体验更加流畅。

现在氛围编程的开发工具问题已经解决，但作为小程序开发新手，还不会编写小程序。该如何起步呢？是否应该直接用自然语言让Trae国际版生成小程序代码，然后

在微信开发者工具里查看？这种方法虽然可行，但并不推荐。原因是小程序开发新手通常不了解微信小程序当前流行的技术栈应该如何选择，也不清楚各种技术栈的

特点、优势、劣势和适用场景。因此，新手第一次写提示词往往不会涉及技术栈的选型。这样一来，AI生成的代码技术栈就会处于无序状态，如果技术栈选择不当，

后期维护项目代码时会带来诸多不便。此外，直接上手开发“减少AI幻觉”的微信小程序，难度可能过大，不如先从简单的Hello World小程序开始。

基于以上原因，我决定先用微信开发者工具创建一个可运行的Hello World小程序，然后再在此基础上添加“减少AI幻觉”的功能。

5.3 用微信开发者工具创建Hello World小程序

微信开发者工具是微信团队开发的一款IDE，可用于编辑、运行和调试代码，并通过预览界面实时查看小程序在手机上的运行效果。如果还未安装微信开发者工具，

可以参考附录A.4进行安装。

安装完成后，打开微信开发者工具，会首先看到一个扫码界面。使用手机微信扫码登录后，即可进入微信开发者工具的主页面，如图5-2所示。

图5-2 微信开发者工具的主页面

点击图5-2中央大大的“+”号图标，即可进入创建小程序的页面，如图5-3所示。

图5-3 创建小程序的页面

根据图5-3所示的创建小程序页面，需要填写以下内容。

・项目名称：promptyoo-1。

・目录：点击右侧的目录按钮（），选择计算机上合适的目录（如“ch05- trae- wechat”），创建空目录“promptyoo-1”并选择它。

・AppID：点击右侧的“测试号”链接，使用测试号（后续发布时可在别处更换为正式AppID）开发小程序。

・后端服务：选择“不使用云服务”（免费选项）。

・模板选择：选择“TS + Less-基础模版”。

最后，点击右下角的“创建”按钮即可创建Hello World小程序。

【避坑指南】面对“模板选择”中那么多技术栈模板，如何选择？

右侧的两个下拉菜单，依次选择“官方”和“基础”，这样就能看到6个基础技术栈供选择。为了选择合适的技术栈，我向Claude提交了这样的提示词：“你是微信

小程序开发专家。请你解释微信开发者工具中‘官方’和‘基础’模版中下面6个模版各自的特点、优势、劣势和适用场景，然后为我推荐2025年哪个模版更加主

流，并说明理由：（1）TS + Less-基础模版；（2）JS-基础模版；（3）JS- Skyline-基础模版；（4）TS + Sass-基础模版；（5）TS-基础模版；（6）TS-

Skyline-基础模版。”Claude的建议是：首选“TS-基础模版”（因为TypeScript 提供了JavaScript所不具备的类型安全特性，可以减少bug），其次是“TS +

Less-基础模版”（适合需要定制样式的项目，且Less框架的语法接近原生CSS，容易上手）。考虑到未来可能需要调整样式，我最终选择了后者。

新创建的Hello World小程序在页面底部显示了一行“Hello World”文本，如图5- 4所示。

图5-4 微信开发者工具生成的Hello World小程序

当在微信开发者工具的左侧预览框中看到小程序正常显示，且右下角“调试器”中没有错误消息时，就说明已经为下一步开发“减少AI幻觉”小程序打下了良好的基

5.4 用Trae国际版实现“减少AI幻觉”小程序

由于微信小程序通常包含几十个文件，因此使用AI原生IDE或传统IDE的AI插件来实现会更加合适。这些工具不仅能高效管理文件，还可以在与大模型对话时方便地引

用文件内容和运行错误消息。我尝试了3种工具来生成“减少AI幻觉”小程序：付费的Trae国际版Pro（搭配Claude Sonnet 4大模型）、免费的Visual Studio Code

中的腾讯云代码助手CodeBuddy插件（搭配混元大模型）以及免费的Trae国内版（搭配Doubao Seed 1.6大模型）。这3种方式都成功完成了开发。考虑到篇幅限

制，以及对微信小程序开发新手的友好性，根据1.7节中的氛围编程大模型升级指导原则，本章将重点介绍使用Trae国际版的过程。

用Trae国际版打开之前Hello World小程序所在的目录“ch05-traewechat/promptyoo-1-by-trae-with-claude-4-sonnet”。在Trae右侧的对话框

中，选择搭配Claude Sonnet 4大模型，并启用@Builder智能体模式（专门用于从头构建完整的项目代码）。随后，提交代码清单5-1所示的提示词。

代码清单5-1 listings/L5-1.md

请在#Workspace中基于微信开发者工具“TS + Less-基础模版”创建一个名为“减少AI幻觉”的小程序（需先删除原有Hello World页面的所有元素）。该小程序旨在帮助用户解决AI聊天应用产生幻觉的问

题。

小程序的核心功能是优化用户输入的提示词。当用户输入初始提示词后，系统会自动添加两句辅助提示，将其转化为“减幻”提示词：

• “请为每个主要观点提供至少3个不同来源的出处的网页链接以便我查验”
• “如果你不知道或查不到，就实说，不要编造”

用户可以复制优化后的提示词用于AI聊天，并可通过点击AI回复中的网页链接验证信息可靠性。

用户界面包含以下元素：

• 小程序名称
• 简介
• 用户初始提示词多行输入框

• 优化后的提示词结果框
• 复制按钮
• 界面顶端右侧的“分享”和“新优化”按钮

其中，“分享”按钮用于将小程序分享给其他微信好友，“新优化”按钮用于清空输入框和结果框的内容，方便用户进行下一次优化。

代码清单5-1中的“#Workspace”指的是Trae打开的完整项目代码，如图5-5所示。

图5-5 “#Workspace”表示Trae打开的完整项目代码

代码生成完毕后，点击提示词输入框右上角的“Accept All”按钮。切换到微信开发者工具查看时，我发现调试器右下方出现了两个红色叉号和两个黄色惊叹号图

标。点击这些图标后，右下方名为“Console”的面板显示出“渲染层错误”，如图5-6所示。

图5-6 微信开发者工具运行Trae首次生成的代码时出现渲染层错误

在图5-6左侧的预览区测试时，我发现输入初始提示词后，“优化提示词”按钮呈灰色无法点击。这种氛围编程工具生成的代码出现编译错误、运行错误或逻辑错误

是很常见的情况。解决方法很简单：只需将错误消息和问题描述完整地复制到氛围编程工具的提示词输入框，让它进行修复。于是我从微信开发者工具的

“Console”面板复制了错误消息，切换回Trae，关闭“@Builder”模式（因为不需要从头构建小程序），并提交了以下提示词：

我在微信开发者工具中运行，输入初始提示词后，“优化提示词”按钮还是灰色，无法点击。另外发现错误：（完整的错误消息，略）

Trae首先列出了我提出的两个问题，随后评审代码，找出了原因并提供解决方案，最后给出了index.ts和index.wxml两个文件的修正代码。由于我已关闭

“@Builder”模式，因此我需要手动接受这些修改。我点击了这两个文件修正代码区域右上方的“Apply”按钮，让Trae自动在相应文件中定位并修改代码，然后点

击提示词输入框右上方的“Accept All”按钮来保存修改。

接着，我返回微信开发者工具，点击图5-6右下方“Console”下的按钮来清空错误消息（即使代码已更新，之前的运行错误也不会自动消失）。在左侧预览区测

了。

尽管Trae生成的代码在微信开发者工具的预览区域运行正常，但它能在手机上正常运行吗？

5.5 预览小程序

要想在手机上预览并试用小程序，可以点击微信开发者工具上方工具栏中的预览按

钮（），之后会在下方出现一个二维码，同时界面底部的“代码质量”界面也会显示代码压缩是否通过的状态报告。如果发现报告中出现JS文件压缩“未通过”

的提示，如图5-7所示，那么只需点击微信开发者工具右上方的“详情”按钮，再点击“本地设置”选项卡，勾选“上传代码时自动压缩脚本文件”，然后再次点击

预览按钮，JS文件压缩“未通过”的提示就会消失。

为什么点击预览按钮后微信开发者工具会压缩源代码文件？这是为了提高小程序的运行性能。代码包的大小会直接影响下载时间，从而影响用户启动小程序的体验。

通过压缩，代码包能更快下载，让小程序启动更加迅速。

我扫描了图5-7中的二维码，在手机上试用小程序后，确认所有功能均运行正常。

接下来可以将这个小程序上传至微信小程序平台，进行发布前的体验测试了。

图5-7 点击预览按钮后用手机扫码预览并试用

5.6 体验小程序

要将小程序上传到微信小程序平台，需要将AppID从测试号更换为正式的AppID。如果继续使用测试号，微信开发者工具界面右上方的“上传”按钮会呈现灰色且无法

点击，同时会提示“测试号AppID无法使用当前功能，请使用正式的AppID”。

如果还没有正式的小程序AppID，可以通过浏览器访问微信公众平台官网。进入后不要扫描二维码，而是点击“账号分类”下方的“小程序”链接，按照页面提示免

费注册。注册过程中需要提供电子邮箱地址以接收验证码，用于激活微信小程序账号。

获得正式小程序账号后，就可以替换测试号并上传小程序了。首先用微信开发者工具打开小程序项目目录，点击界面右上方的“详情”按钮，选择“基本信息”选项

卡，找到AppID并点击右侧的“修改”按钮进行替换。

完成替换后，“上传”按钮将变为可点击状态。点击“上传”按钮后会弹出对话框，需要输入“版本号”和“项目备注”，如图5-8所示。作为首次发布，可以将

版本号设为1.0.0。在项目备注中可以描述此次发布的主要功能或修复的问题。

图5-8 点击“上传”按钮后填写“版本号”和“项目备注”

【避坑指南】版本号中的3个数字代表什么？如何确定版本号？

可以参考语义版本控制（semantic versioning）规则来定义版本号，版本号的格式为“MAJOR.MINOR.PATCH”，其中的MAJOR、MINOR和PATCH均为整数。从左往右，

第一个数字（MAJOR）增加1表示软件对外接口API发生了不兼容的更改。不过，对于这个小程序，由于没有对外接口API，可以变通为：当用户使用方式发生重大变

化时，将第一个数字增1。对于初始版本，这个数字一般是1（功能不稳定时可用 0）。第二个数字（MINOR）表示添加了新功能，且用户使用方式保持不变。第三个

数字（PATCH）表示修复了bug，且保持原有功能不变。

填写完“版本号”和“项目备注”后，点击“上传”按钮。上传成功后，会看到 “代码上传成功”的提示。接下来，在浏览器中访问微信公众平台官网，扫描二维

码并用小程序账号登录后台界面。在左侧菜单中，点击“管理”展开子菜单，选择 “版本管理”。在右侧的版本管理界面底部，会看到刚上传的1.0.0版本。点击

“提交审核”旁边的小箭头，从弹出菜单中选择“选为体验版本”，如图5-9所示。此时会出现一个包含“体验版已生效”提示和二维码的对话框。扫描这个二维

码即可开始体验测试。

图5-9 在微信公众号平台小程序后台“版本管理”界面点击“选为体验版本”

如果自己在手机上体验后，想将小程序分享给其他微信好友来体验并收集反馈，那么可以在小程序后台左侧边栏“管理”菜单下点击“成员管理”菜单项，然后在右

侧出现的“成员管理”界面底部的“体验成员”里添加微信好友的微信号，并勾选 “查看体验版”，如图5-10所示，这样好友就能点开分享链接试用了。

图5-10 在微信公众号平台小程序后台“成员管理”界面中添加“体验成员”

如果在手机上进行体验测试后，发现需要在正式发布前完善某些功能（例如让小程序界面更加简约大气，并将界面主题改为淡绿色），应该如何修改小程序呢？

5.7 修改小程序

要修改小程序，直接告诉Trae需要改动的地方看似最简单直接，但这种方法存在风

一个解决方案是将整个项目的氛围编程需求（包括实现技术栈描述）放入项目规则（project rule）文件中。项目规则是氛围编程工具常用的提示词复用方法，它以

自然语言形式存储在Markdown格式的文件中。通过在提示词中引用项目规则，可以让大模型保持对项目重要上下文的记忆，确保后续的代码生成始终遵循一致的规

则。

要创建项目规则，可以点击Trae界面右上角的设置按钮（），然后点击“规则”。在出现的页面中，点击“创建project_rules.md”按钮，这会打开

“.trae/rules/project_rules. md”文件。该Markdown格式的文件初始处于预览

状态且无法编辑。点击文件右上方的编辑图标（）即可进入编辑状态。然后，在其中填写本项目的氛围编程需求如下：

“减少AI幻觉”的微信小程序氛围编程需求

该程序旨在帮助用户避免AI聊天应用产生幻觉问题。

该微信小程序是基于TypeScript和Less框架进行开发。

（同代码清单5-1所示的提示词，略）

界面采用2025年流行的简约大气设计风格，主题色为淡绿色。

这个氛围编程需求的内容与代码清单5-1中的提示词基本相同，我只在其中添加了两处内容：一是在第3行指定“TypeScript和Less框架”作为技术栈，二是在最后

一行增加了用户界面的新要求。

接下来，关闭Trae提示词输入框上方的“@Builder”模式（因为这次不是从头生成代码），然后提交新的提示词。在新提示词中，我使用“#project_rules.md”引

用了项目规则，这个引用方式也可以在后续的提示词中继续使用。

请遵照#project_rules.md的要求将#Workspace中的微信小程序的界面改为2025年流行的简约大气设计风格，主题色为淡绿色。其他实现功能保持不变。

Trae修改了index.less和navigation-bar.less文件。点击“Apply”和“Accept All”按钮后，先在微信开发者工具左侧预览区进行测试，再通过预览按钮在手机

上试用，效果令人满意。随后，点击“上传”按钮，将版本号更新为“1.1.0”

（由于只改变了用户界面主题颜色，没有修改使用方式或修复bug，因此仅将第二个数字加1）。在“项目备注”中，我简述了此次更新对用户界面设计的调整。最

后在手机上再次测试，确认所有功能运行正常，可以准备发布上线了。

发布小程序的流程很简单。首先点击图5-9所示页面中“开发版本”右侧的“提交审核”按钮，然后按界面提示操作即可。在“提交审核”页面底部的“用户隐私保

护指引设置”处，由于本程序未采集用户隐私，所以点击“未采集用户隐私”选项。提交后等待1～7天即可收到审核结果。如需查看审核进度，可通过浏览器访问

微信公众平台官网，扫码登录小程序后台，在“管理”菜单下选择“版本管理”查看。审核通过后，小程序即完成上线，可供用户正常使用。

本章实现的小程序本质上是一个运行在微信平台上的Web应用。由于功能相对简单，代码清单5-1中的提示词并不长。但如果要开发一个功能更复杂的减少AI幻觉

Web应用（例如包含提示词优化历史管理和用户管理），提示词长度可能是代码清单5-1的10倍。那么，如何在氛围编程工具中，用这样一段较长的提示词仅在单次

对话中就生成一个可运行的Web应用呢？