程序基础实战 1

CodeBuddyAsk/Craft模式TraeCNChat/Builder提示词PromptAI伦理第12章AI辅助编程课堂讲解《微信小程序开发实战教程（Node.js+MySQL）（AI协同）（微课版）（第2版）》学习目标第12章AI辅助编程AI辅助编程工具很多，常见的有Trae、CodeBuddy、通义灵码、文心快码、Cursor、MarsCode等。随着多模态与大模型技术的进步，AI辅助编程将进一步重塑软件开发模式。在AI技术和工具飞速发展的时代，人们对高效智能编程工具的需求和关注也达到前所未有的高度。无论是经验丰富的开发人员还是初学编程知识的大学生，使用这些AI辅助编程工具都可以提高生产力、创造力和准确性，快速、高效地进行开发。本章使用腾讯云AI代码助手CodeBuddy和TraeCN开发微信小程序，帮助读者掌握利用AI辅助编程工具提高编程效率和质量的方法。掌握如何使用AI辅助编程后，便能从众多AI工具及模型中选择质量更高、更满足实际需求的产品，并能灵活结合使用不同的AI工具和模型。在使用AI的过程中，要确保合法合规，既遵守道德和社会的底线，又符合创新的要求。1能熟练使用腾讯云AI代码助手CodeBuddy开发微信小程序。2能熟练使用TraeCN开发微信小程序。212.1

AI辅助编程简介第12章AI辅助编程AI辅助编程是利用AI模型（如大语言模型、代码生成模型等）来辅助完成代码编写的过程，旨在提升编程效率、降低开发门槛，并提高代码质量。1．AI辅助编程的核心功能代码生成与补全：基于自然语言描述或部分代码，AI可自动生成完整函数、API调用代码或程序的完整逻辑代码。智能问答与优化：通过交互，AI工具可提供代码解释、错误排查、性能优化建议等功能。多模态交互：部分工具可识别UI设计图并生成对应前端代码，或通过交互式对话完成需求分析至部署的全流程操作。自动化测试与调试：AI能自动生成测试用例，以检测程序漏洞并推荐修复方案。2．AI辅助编程的技术优势提升工作效率：减少重复性编程工作，加快原型开发速度。降低开发门槛：非专业开发者可通过自然语言描述快速实现所需功能。【注意】AI只能作为辅助工具，无法完全替代开发者，开发者应聚焦复杂逻辑设计，让AI处理标准化任务。312.2

使用CodeBuddy开发微信小程序第12章AI辅助编程CodeBuddy是腾讯自研的一款AI辅助编程工具，它能够为开发者提供AI技术问答、Craft软件开发智能体、智能代码补全等智能体（Agent）拓展能力，辅助开发者提升编程效率和质量。【演练12.1】安装腾讯云代码助手CodeBuddy。1新建一个基于“JS-基础模板”的微信小程序项目。2如图12-1所示，在微信开发者工具中单击工具栏中的图标，搜索“腾讯云”，在搜索结果中找到“腾讯云代码助手”，单击“安装”按钮。3安装完毕后，如图12-2所示，单击工具栏中的图标，即可使用CodeBuddy。412.2

使用CodeBuddy开发微信小程序（续）第12章AI辅助编程【演练12.1】安装腾讯云代码助手CodeBuddy。4如图12-3所示，单击相应图标可在项目资源管理器和CodeBuddy之间切换，单击下方的下拉框可在模式之间切换。图12-1

安装腾讯云代码助手CodeBuddy图12-2

使用CodeBuddy图12-3

CodeBuddy界面512.2

使用CodeBuddy开发微信小程序（续）第12章AI辅助编程CodeBuddy提供了Ask和Craft模式。①Ask模式即对话模式，开发者可通过自然语言与AI进行交互。②Craft模式是一种全新的软件开发智能体。它能够通过自然语言指令实现多文件代码生成和重构，显著提升开发效率。Craft模式能够深度理解开发者的需求，并将复杂的需求拆解为可执行的任务。这使得开发者可以更高效地进行项目开发，而不必手动处理每个细节。其具体功能如下。多文件代码生成：开发者只需输入自然语言描述，Craft模式便能自动生成相应的代码，支持多文件的创建和修改。智能优化与重构：Craft模式不仅能生成代码，还能对现有代码进行优化和重构，提升代码质量和可维护性。跨平台任务调度：兼容模型上下文协议（ModelContextProtocol，MCP），Craft模式能够无缝连接腾讯云生态服务，实现跨平台的任务调度。612.2

使用CodeBuddy开发微信小程序（续）第12章AI辅助编程【演练12.2】使用CodeBuddy的Ask模式编写一个商品展示微信小程序。1如图12-4所示，输入提示词“编写一个微信小程序，语言为JavaScript，只有两个页面。首页是商品列表，在首页中单击某个商品能跳转到该商品对应的商品详情页面。使用本地模拟数据，示例数据图片使用网络图片占位即可。”，然后单击按钮。图12-4

提出具体需求712.2

使用CodeBuddy开发微信小程序（续）第12章AI辅助编程CodeBuddy会给出一系列建议，按照提示进行操作即可。具体步骤如下。【演练12.2】使用CodeBuddy的Ask模式编写一个商品展示微信小程序。2在app.json的pages数组中添加新页面路径。修改后的内容如下。{"pages":["pages/index/index","pages/product-detail/product-detail","pages/logs/logs"],"window":{"navigationBarTextStyle":"black","navigationBarTitleText":"Weixin","navigationBarBackgroundColor":"#ffffff"},"style":"v2","componentFramework":"glass-easel","sitemapLocation":"sitemap.json","lazyCodeLoading":"requiredComponents"}812.2

使用CodeBuddy开发微信小程序（续）第12章AI辅助编程【演练12.2】使用CodeBuddy的Ask模式编写一个商品展示微信小程序。3按照提示编写index.js文件，代码如下。Page({data:{products:[{id:1,name:'产品1',image:'/150',price:99},{id:2,name:'产品2',image:'/150',price:199},{id:3,name:'产品3',image:'/150',price:299}]},onLoad(){//页面加载},goToDetail(e){constid=e.currentTarget.dataset.id;wx.navigateTo({url:`/pages/product-detail/product-detail?id=${id}`});}});912.2

使用CodeBuddy开发微信小程序（续）第12章AI辅助编程【演练12.2】使用CodeBuddy的Ask模式编写一个商品展示微信小程序。4按照提示编写index.wxml文件，代码如下。<!--pages/index/index.wxml--><viewclass="container"><viewwx:for="{{products}}"wx:key="id"class="product-item"bindtap="goToDetail"data-id="{{item.id}}"><imagesrc="{{item.image}}"class="product-image"></image><textclass="product-name">{{}}</text><textclass="product-price">¥{{item.price}}</text></view></view>1012.2

使用CodeBuddy开发微信小程序（续）第12章AI辅助编程【演练12.2】使用CodeBuddy的Ask模式编写一个商品展示微信小程序。5按照提示编写index.wxss文件，代码如下。/*pages/index/index.wxss*/.product-item{display:flex;flex-direction:column;align-items:center;padding:20px;border-bottom:1pxsolid#eee;}.product-image{width:150px;height:150px;}.product-name,.product-price{margin:5px0;}1112.2

使用CodeBuddy开发微信小程序（续）第12章AI辅助编程【演练12.2】使用CodeBuddy的Ask模式编写一个商品展示微信小程序。6按照提示编写product-detail.js文件，代码如下。//pages/product-detail/product-detail.jsPage({data:{product:null,products:[{id:1,name:'产品1',image:'/300',price:99,desc:'这是产品1的描述'},{id:2,name:'产品2',image:'/300',price:199,desc:'这是产品2的描述'},{id:3,name:'产品3',image:'/300',price:299,desc:'这是产品3的描述'}]},onLoad(options){constid=parseInt(options.id);constproduct=ducts.find(p=>p.id===id);this.setData({product});}});1212.2

使用CodeBuddy开发微信小程序（续）第12章AI辅助编程【演练12.2】使用CodeBuddy的Ask模式编写一个商品展示微信小程序。7按照提示编写product-detail.wxml文件，代码如下。<!--pages/product-detail/product-detail.wxml--><viewclass="container"wx:if="{{product}}"><imagesrc="{{product.image}}"class="detail-image"></image><textclass="detail-name">{{}}</text><textclass="detail-price">¥{{product.price}}</text><textclass="detail-desc">{{product.desc}}</text></view><viewwx:else><text>产品未找到</text></view>1312.2

使用CodeBuddy开发微信小程序（续）第12章AI辅助编程【演练12.2】使用CodeBuddy的Ask模式编写一个商品展示微信小程序。8按照提示编写product-detail.wxss文件，代码如下。/*pages/product-detail/product-detail.wxss*/.container{padding:20px;text-align:center;}.detail-image{width:300px;height:300px;}.detail-name,.detail-price,.detail-desc{display:block;margin:10px0;}1412.2

使用CodeBuddy开发微信小程序（续）第12章AI辅助编程【演练12.2】使用CodeBuddy的Ask模式编写一个商品展示微信小程序。9运行程序，结果如图12-5所示，展示了商品列表页面（即首页），现在有3条示例数据。10单击某个商品后，展示该商品的详细信息，如图12-6所示。图12-5

首页图12-6

商品详情页面【说明】因为图片占位的网络地址无法访问，所以现在图片没有显示出来。1512.2

使用CodeBuddy开发微信小程序（续）第12章AI辅助编程【演练12.2】使用CodeBuddy的Ask模式编写一个商品展示微信小程序。11下面用自己的图片替换网络图片，复制“配套资源\12\12-2\images”文件夹到项目的根目录下，该文件夹中的图片如图12-7所示。12回到CodeBuddy，如图12-8所示，输入提示词“将图片占位符替换为images文件夹中的图片”，单击“发送”按钮。图12-7

images文件夹中的图片图12-8

将图片占位符替换为images文件夹中的图片1612.2

使用CodeBuddy开发微信小程序（续）第12章AI辅助编程CodeBuddy会给出建议，按照提示进行操作即可，具体步骤如下。【演练12.2】使用CodeBuddy的Ask模式编写一个商品展示微信小程序。13按照提示修改index.js文件，修改部分的代码如图12-9所示。14按照提示修改product-detail.js文件，修改部分的代码如图12-10所示。图12-9

修改index.js文件图12-10

修改product-detail.js文件1712.2

使用CodeBuddy开发微信小程序（续）第12章AI辅助编程【演练12.2】使用CodeBuddy的Ask模式编写一个商品展示微信小程序。15运行结果如图12-11所示，商品列表中正常显示了替换的图片。16单击某个商品后，展示该商品的详细信息，如图12-12所示。图12-11

商品列表图12-12

商品详情页面1812.2

使用CodeBuddy开发微信小程序（续）第12章AI辅助编程【演练12.3】使用CodeBuddy的Craft模式编写一个商品展示微信小程序。1新建一个基于“JS-基础模板”的微信小程序项目。2如图12-13所示，输入提示词“操作系统为Windows，编写一个微信小程序，语言为JavaScript，只有两个页面，首页是商品列表，在首页中单击某个商品能跳转到该商品对应的商品详情页面，使用本地模拟数据，示例数据图片使用网络图片占位即可。”，单击“发送”按钮。图12-13

使用Craft模式编写一个商品展示微信小程序1912.2

使用CodeBuddy开发微信小程序（续）第12章AI辅助编程【说明】这里强调操作系统为Windows，是因为Craft模式会执行创建目录、文件等命令，而这些命令和具体的操作系统有关。【演练12.3】使用CodeBuddy的Craft模式编写一个商品展示微信小程序。3如图12-14所示，单击“保留”按钮。图12-14

单击“保留”按钮2012.2

使用CodeBuddy开发微信小程序（续）第12章AI辅助编程【演练12.3】使用CodeBuddy的Craft模式编写一个商品展示微信小程序。4编译运行，结果如图12-15所示，左侧展示了商品列表页面（即首页）。由于图片占位使用的网络地址已无法访问，因此当前图片无法正常显示，并出现报错信息。这里明确问题原因即可，不再修改。在实际项目中，图片数据通常来自自建后台系统，因此不会出现类似情况。图12-15

运行结果可以看到，不需要手动编写代码即可得到大致的运行结果。2112.2

使用CodeBuddy开发微信小程序（续）第12章AI辅助编程【演练12.3】使用CodeBuddy的Craft模式编写一个商品展示微信小程序。5单击某个商品后，展示该商品的详细信息，如图12-16所示。图12-16

商品详情页面2212.3

使用TraeCN开发微信小程序第12章AI辅助编程TraeCN是字节跳动推出的国内首个AI原生集成开发环境，面向中文开发者，于2025年3月正式上线。它将大型AI模型的能力深度嵌入集成开发环境中，显著降低了开发门槛，并提升了开发效率。在AI辅助编程方面，TraeCN支持根据自然语言描述生成代码、跨文件补全代码、错误定位与修复，并能提供实时续写与优化建议。TraeCN具有以下两种工作模式。1Chat模式：围绕现有代码与项目进行对话式协作（如解释、重构、单元测试建议等）。2Builder模式：从零开始自动生成完整项目或完成多文件任务，可自动搭建项目目录、进行依赖配置，类似于CodeBuddy的Craft模式。2312.3

使用TraeCN开发微信小程序（续）第12章AI辅助编程TraeCN的主要特点（1）上下文与多模态生成能力：可引用代码片段、单文件、文件夹、工作区，支持上传截图/设计稿，可根据图片生成代码和可运行界面。（2）工程化能力：内置WebView以实现实时预览、Git集成、调试工具与终端；与VSCode插件生态高度兼容，支持导入配置与插件。（3）中文友好：支持中英文界面，错误提示与注释更贴合中文语境，降低了开发者的理解成本。（4）模型矩阵：内置豆包1.5Pro模型，可切换DeepSeekR1/V3等模型，覆盖推理、对话与代码生成等场景。其主要适用人群及场景（1）编程新手与入门学习者：通过中文对话快速搭建小项目，完成练习示例和作业。（2）全栈/前端开发者：快速完成原型验证、页面与组件生成、接口联调及性能优化。（3）中小团队与产品原型团队：快速实现从需求到可运行示例的演示，缩短迭代周期。（4）教育与培训场景：直观地展示代码生成与重构过程，提升教学效率。2412.3

使用TraeCN开发微信小程序（续）第12章AI辅助编程【演练12.4】安装TraeCN。1如图12-17所示，进入Trae中文版官网，单击“下载IDE”按钮。2下载完成后，运行安装文件，启动安装向导，如图12-18所示，选中“我同意此协议”单选按钮，单击“下一步”按钮。图12-17

下载TraeCN图12-18

同意协议2512.3

使用TraeCN开发微信小程序（续）第12章AI辅助编程【演练12.4】安装TraeCN。3如图12-19所示，保持默认设置，单击“下一步”按钮。4如图12-20所示，保持默认设置，单击“安装”按钮。图12-19

保持默认设置图12-20

开始安装2612.3

使用TraeCN开发微信小程序（续）第12章AI辅助编程【演练12.4】安装TraeCN。5如图12-21所示，单击“完成”按钮并运行TraeCN。6首次运行需要注册并登录，请自行完成。TraeCN运行界面如图12-22所示。图12-21

安装完成图12-22

TraeCN运行界面2712.3

使用TraeCN开发微信小程序（续）第12章AI辅助编程【演练12.5】使用TraeCN的Builder模式编写一个商品展示的微信小程序。1如图12-23所示，单击“@”图标，选择“Builder”模式。2如图12-24所示，输入提示词“操作系统为Windows，编写一个微信小程序，语言为JavaScript，只有两个页面，首页是商品列表，在首页中单击某个商品能跳转到该商品对应的商品详情页面，使用本地模拟数据，示例数据图片使用网络图片占位即可”，单击“发送”按钮。图12-23

选择“Builder”模式图12-24

提出需求2812.3

使用TraeCN开发微信小程序（续）第12章AI辅助编程【演练12.5】使用TraeCN的Builder模式编写一个商品展示的微信小程序。3如图12-25所示，系统检测到当前没有打开任何项目，此时单击“新建项目”按钮。4如图12-26所示，选择目录并输入项目名称，单击“确认”按钮。图12-25

新建项目图12-26

选择目录并输入项目名称2912.3

使用TraeCN开发微信小程序（续）第12章AI辅助编程【演练12.5】使用TraeCN的Builder模式编写一个商品展示的微信小程序。5如图12-27所示，TraeCN开始执行任务，在执行过程中若需确认单个文件的修改，可单击“接受Ctrl+Enter”按钮；若需确认当前所有待审查的文件，可单击图中右下方框中的勾号图标。在此过程中，也可选择不进行干预。6如图12-28所示，执行完毕后显示“任务完成”，单击图中右下方框中的勾号图标，确认所有待审查的文件。图12-27

执行中途的一些选项图12-28

确认所有待审查的文件3012.3

使用TraeCN开发微信小程序（续）第12章AI辅助编程【演练12.5】使用TraeCN的Builder模式编写一个商品展示的微信小程序。7TraeCN已生成代码，需要在微信开发者工具中运行。如图12-29所示，在微信开发者工具中导入TraeCN创建的项目，并输入自己的AppID。8导入成功后运行项目，结果如图12-30所示，首页展示了商品列表。图12-29

在微信开发者工具中导入项目并输入A