【行业认证·权威头衔】✔ 华为云天团核心成员特约编辑/云享专家/开发者专家/产品云测专家✔ 开发者社区全满贯CSDN博客商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金亚马逊51CTO顶级博主✔ 技术生态共建先锋横跨鸿蒙、云计算、AI等前沿领域的技术布道者【荣誉殿堂】 连续三年蝉联华为云十佳博主2022-2024 双冠加冕CSDN年度博客之星TOP220222023 十余个技术社区年度杰出贡献奖得主【知识宝库】覆盖全栈技术矩阵◾ 编程语言.NET/Java/Python/Go/Node…◾ 移动生态HarmonyOS/iOS/Android/小程序◾ 前沿领域物联网/网络安全/大数据/AI/元宇宙◾ 游戏开发Unity3D引擎深度解析文章目录项目实战使用 AI 编程工具辅助创建莫凡商城小程序项目1 使用通义灵码咨询创建流程2 创建莫凡商城小程序项目3 认识默认生成的小程序页面4 数据绑定index.js 与 index.wxml5 样式设置index.wxss6 AI 辅助开发的注意事项附AI 提示词模板与完整回答示例模板 1咨询创建微信小程序项目模板 2让 AI 解释数据绑定并修改 motto模板 3让 AI 修改样式模板 4让 AI 辅助排查默认模板问题项目实战使用 AI 编程工具辅助创建莫凡商城小程序项目莫凡商城小程序是贯穿全书的项目案例通过本书内容可以了解如何完整地开发一个企业级的小程序。前文介绍了如何使用微信开发者工具创建项目以及 AI 编程工具插件的安装与使用方法下面使用 AI 编程工具辅助创建莫凡商城小程序项目。1 使用通义灵码咨询创建流程在 VS Code 中打开之前已经安装好的通义灵码插件。输入提示词我是一位前端开发工程师现在我想要创建一个小程序项目应该怎么做发送后AI 编程工具会告诉你详细的创建流程如图 1.31 所示。AI 完整回答示例以下为根据微信小程序官方流程整理的 AI 回答示例。实际使用时通义灵码的回答可能略有不同但核心步骤一致。作为前端开发工程师创建微信小程序项目通常需要以下步骤 一、注册微信公众平台账号并获取 AppID 1. 打开微信公众平台官网。 2. 单击“立即注册”选择“小程序”类别。 3. 填写邮箱、密码等信息完成注册。 4. 登录后进入“开发管理”—“开发设置”。 5. 在“开发者ID”中复制 AppID。AppID 是创建项目、调试和上传代码时必须用到的唯一标识。 6. 如果没有正式 AppID也可以在微信开发者工具中选择“测试号”进行体验。 二、下载并安装微信开发者工具 1. 进入微信公众平台官网选择“小程序开发文档”。 2. 在文档页面选择“工具”—“下载”。 3. 根据操作系统下载对应版本Windows、macOS、Linux。 4. 运行安装程序按提示完成安装。 三、登录微信开发者工具 1. 启动微信开发者工具。 2. 使用绑定了微信公众平台的微信账号扫码登录。 3. 登录后进入项目选择界面。 四、创建小程序项目 1. 单击“新建项目”。 2. 填写项目名称例如“莫凡商城”。 3. 选择项目目录建议选择空文件夹。 4. 填写从微信公众平台获取的 AppID。 5. 后端服务可选择“不使用云服务”或“微信云开发”。如果项目暂时不使用云开发选择“不使用云服务”即可。 6. 选择模板通常选择“JavaScript - 基础模板”或“不使用模板”。 7. 单击“创建”按钮。 五、认识项目结构 创建完成后项目通常包含以下文件 - app.js小程序逻辑。 - app.json小程序全局配置。 - app.wxss小程序全局样式。 - project.config.json项目配置。 - sitemap.json小程序索引配置。 - pages/index/index.js首页逻辑。 - pages/index/index.json首页配置。 - pages/index/index.wxml首页结构。 - pages/index/index.wxss首页样式。 六、编写代码与调试 1. 在 pages/index/index.wxml 中编写页面结构。 2. 在 pages/index/index.wxss 中编写页面样式。 3. 在 pages/index/index.js 中编写页面逻辑。 4. 单击工具栏“编译”按钮或按 CtrlB 刷新模拟器。 5. 使用调试器的 Wxml、Console、Network、Storage 窗口排查问题。 七、预览、真机调试与上传 1. 单击“预览”生成二维码用手机微信扫码预览。 2. 单击“真机调试”在手机上调试。 3. 开发完成后单击“上传”将代码上传到腾讯服务器。 4. 登录微信公众平台在“版本管理”中提交审核。 5. 审核通过后发布上线。 注意事项 - AppID 必须与当前小程序账号匹配。 - AppSecret 属于敏感信息不要写入前端代码。 - 项目目录建议为空避免文件冲突。 - 开发过程中要经常编译和真机预览确保兼容性。 - 使用 AI 生成代码后需要人工审核业务逻辑和安全性。2 创建莫凡商城小程序项目根据 AI 编程工具的回答打开微信开发者工具创建莫凡商城小程序项目。具体操作如下打开微信开发者工具单击“新建项目”。项目名称填写“莫凡商城”或“miniprogram-68”。项目目录选择事先准备好的空文件夹。“AppID”使用自己在微信公众平台获取的“AppID”。“后端服务”选择“不使用云服务”如图 1.32 所示。其他设置保持默认单击“创建”按钮。注意事项如果没有 AppID可以选择“测试号”进行体验。项目目录建议为空避免旧文件干扰。后端服务如果选择“不使用云服务”后续仍可开通云开发。创建项目后微信开发者工具会自动生成默认页面和项目结构。3 认识默认生成的小程序页面单击“创建”按钮后进入微信开发者工具默认创建了一个小程序页面包括 3 部分内容显示“Hello World”页面中显示默认的“Hello World”文字如图 1.33 所示。该文字来自pages/index/index.js中的motto数据。点击默认头像可以获取微信头像默认模板中有一个按钮或头像区域点击后可以获取微信头像如图 1.34 所示。实际开发中通常使用open-typechooseAvatar或wx.getUserProfile等能力。点击“昵称”输入框可以填写昵称信息默认模板中提供昵称输入框点击后可以填写昵称信息如图 1.35 所示。实际开发中通常使用input组件或open-typenickname能力。补充说明默认模板是为了帮助开发者快速了解小程序基本结构。默认页面通常包含container、userinfo、usermotto等样式类。开发者可以根据项目需求修改默认页面不必保留默认内容。莫凡商城项目后续会把默认首页替换为轮播图、搜索框、图书列表等真实业务内容。4 数据绑定index.js 与 index.wxml在pages/index/index.js文件里Page()函数的data里提供了数据源motto如图 1.36 所示。data的数据可以动态地绑定到 WXML 页面。默认index.js示例Page({data:{motto:Hello World,userInfo:{},hasUserInfo:false,canIUse:wx.canIUse(button.open-type.getUserInfo),canIUseGetUserProfile:false,canIUseOpenData:wx.canIUse(open-data.type.userAvatarUrl)wx.canIUse(open-data.type.userNickName)},onLoad(){if(wx.getUserProfile){this.setData({canIUseGetUserProfile:true});}},getUserProfile(e){wx.getUserProfile({desc:用于完善会员资料,success:(res){this.setData({userInfo:res.userInfo,hasUserInfo:true});}});},getUserInfo(e){this.setData({userInfo:e.detail.userInfo,hasUserInfo:true});}});在pages/index/index.wxml文件里通过{{}}将motto绑定到页面如图 1.37 所示。默认index.wxml示例viewclasscontainerviewclassuserinfobuttonwx:if{{!hasUserInfo canIUse}}open-typegetUserInfobindgetuserinfogetUserInfo获取头像昵称/buttonblockwx:elseimageclassuserinfo-avatarsrc{{userInfo.avatarUrl}}modecover/imagetextclassuserinfo-nickname{{userInfo.nickName}}/text/block/viewviewclassusermottotextclassuser-motto{{motto}}/text/view/view如果改变index.js文件中的motto的值如图 1.38 所示重新运行小程序可以看到页面的值也发生了改变。例如将motto:Hello World修改为motto:欢迎来到莫凡商城重新编译后页面上的文字就会变成“欢迎来到莫凡商城”。数据绑定说明{{}}是 WXML 的数据绑定语法可以绑定字符串、数字、布尔值、对象、数组等。data中的数据发生变化时通过this.setData()更新页面会自动刷新。数据绑定是小程序开发的核心机制之一后续图书列表、购物车、订单等都会用到。直接修改this.data.motto不会触发页面更新必须使用this.setData()。5 样式设置index.wxss在pages/index/index.wxss文件里.usermotto是一个类选择器用于选择带有classusermotto的页面元素color: red;表示设置该元素的字体颜色为红色如图 1.39 所示。默认index.wxss示例.usermotto{margin-top:200px;color:red;}对应 WXMLviewclassusermottotextclassuser-motto{{motto}}/text/view样式说明.usermotto是类选择器前面有一个点。classusermotto的页面元素会应用该样式。color: red;设置字体颜色为红色。可以修改为其他颜色例如color: #333;、color: blue;。WXSS 支持rpx单位适合不同屏幕自适应。全局样式写在app.wxss中页面样式写在对应页面的.wxss文件中。页面样式默认只作用于当前页面避免样式冲突。6 AI 辅助开发的注意事项在实际开发过程中虽然 AI 编程工具能够提供代码生成和优化建议但开发者需要根据自己的具体需求和项目的实际情况来灵活调整和修改代码不能完全依赖 AI 编程工具的输出因为 AI 编程工具可能无法完全理解项目的业务逻辑和个性化需求。因此开发者需要具备一定的编程能力和业务理解能力以确保最终实现的功能能够满足用户需求并达到预期的效果。补充建议AI 适合做重复性工作如生成页面骨架、基础样式、常见逻辑、解释报错。AI 不擅长业务判断如订单状态流转、支付安全、库存扣减、权限控制。AI 生成代码必须审核重点关注登录、支付、隐私、接口安全、数据校验。AI 回答需要验证不同版本的小程序 API 可能有差异应以官方文档为准。提示词越具体越好说明角色、技术栈、功能、约束、输出格式。迭代使用 AI先让 AI 给出基础版本再逐步优化、重构、加注释、加测试。保护敏感信息不要向 AI 提交 AppSecret、用户手机号、身份证号、密钥等敏感数据。附AI 提示词模板与完整回答示例原文步骤1给出了用户提示词但未给出 AI 的完整回答。以下补充多个可直接使用的模板与完整回答覆盖创建项目、数据绑定、样式修改等场景。模板 1咨询创建微信小程序项目提示词模板我是一位前端开发工程师现在我想要创建一个小程序项目应该怎么做 请给出完整步骤包括注册账号、获取 AppID、下载微信开发者工具、创建项目、认识项目结构、编译预览、上传发布并说明注意事项。完整回答示例作为前端开发工程师创建微信小程序项目可以按以下步骤进行 一、注册微信公众平台账号并获取 AppID 1. 打开微信公众平台官网。 2. 单击“立即注册”选择“小程序”类别。 3. 填写邮箱、密码等信息完成注册。 4. 登录后进入“开发管理”—“开发设置”。 5. 复制 AppID。如果没有正式 AppID可以在微信开发者工具中使用测试号。 二、下载并安装微信开发者工具 1. 进入微信公众平台官网选择“小程序开发文档”。 2. 选择“工具”—“下载”。 3. 根据操作系统下载 Windows、macOS 或 Linux 版本。 4. 运行安装程序按提示完成安装。 三、登录微信开发者工具 1. 启动微信开发者工具。 2. 使用绑定微信公众平台的微信账号扫码登录。 四、创建小程序项目 1. 单击“新建项目”。 2. 填写项目名称例如“莫凡商城”。 3. 选择空的项目目录。 4. 填写 AppID。 5. 后端服务选择“不使用云服务”。 6. 选择“JavaScript - 基础模板”。 7. 单击“创建”。 五、认识项目结构 - app.js小程序逻辑。 - app.json全局配置。 - app.wxss全局样式。 - pages/index/index.js首页逻辑。 - pages/index/index.wxml首页结构。 - pages/index/index.wxss首页样式。 - project.config.json项目配置。 - sitemap.json索引配置。 六、编译与预览 1. 单击“编译”或按 CtrlB。 2. 在模拟器中查看页面效果。 3. 单击“预览”生成二维码用手机微信扫码预览。 4. 单击“真机调试”在手机上调试。 七、上传与发布 1. 开发完成后单击“上传”。 2. 登录微信公众平台进入“版本管理”。 3. 提交审核。 4. 审核通过后发布上线。 注意事项 - AppID 必须与当前小程序账号匹配。 - AppSecret 不要写入前端代码。 - 项目目录建议为空。 - 使用 AI 生成代码后需要人工审核。模板 2让 AI 解释数据绑定并修改 motto提示词模板请解释微信小程序中 pages/index/index.js 里的 data 和 pages/index/index.wxml 里的 {{}} 是如何实现数据绑定的。 请给出完整代码示例并说明如何把 motto 的值从“Hello World”修改为“欢迎来到莫凡商城”以及修改后页面为什么会自动更新。完整回答示例微信小程序使用数据绑定实现逻辑层与视图层的通信。index.js中的data是页面数据源index.wxml中的{{}}用于把数据绑定到页面。index.js示例Page({data:{motto:Hello World},changeMotto(){this.setData({motto:欢迎来到莫凡商城});}});index.wxml示例viewclassusermottotextclassuser-motto{{motto}}/text/viewbuttonbindtapchangeMotto修改文字/button当页面加载时{{motto}}会显示Hello World。点击按钮后changeMotto方法调用this.setData()把motto修改为“欢迎来到莫凡商城”。setData会通知视图层更新因此页面文字自动变化。关键点data中定义初始数据。WXML 使用{{}}绑定数据。使用this.setData()更新数据。直接修改this.data.motto不会触发页面更新。setData是异步的但页面会自动刷新。模板 3让 AI 修改样式提示词模板在微信小程序 pages/index/index.wxss 中.usermotto 是一个类选择器。 请解释它的作用并给出完整代码要求 1. 把字体颜色改为红色 2. 增加上边距 3. 把文字居中 4. 说明如何让样式只作用于当前页面。完整回答示例.usermotto是类选择器用于选择 WXML 中classusermotto的元素。index.wxss完整代码.usermotto{margin-top:200rpx;color:red;text-align:center;}.user-motto{font-size:36rpx;font-weight:bold;}对应 WXMLviewclassusermottotextclassuser-motto{{motto}}/text/view说明margin-top: 200rpx;设置上边距。color: red;设置字体颜色为红色。text-align: center;让文字居中。页面样式写在index.wxss中默认只作用于当前页面。如果需要全局样式可以写在app.wxss中。推荐使用rpx便于不同屏幕适配。模板 4让 AI 辅助排查默认模板问题提示词模板我在微信开发者工具中创建了一个默认小程序项目但页面没有显示“Hello World”点击头像也没有反应。 请帮我分析可能的原因并给出排查步骤和完整解决代码。 技术栈微信小程序原生框架JavaScript 基础模板。完整回答示例可能原因pages/index/index.js中没有定义motto。pages/index/index.wxml中没有使用{{motto}}。app.json中没有注册pages/index/index页面。编译模式不正确。默认模板被修改或删除。点击头像的按钮未绑定事件或使用了已废弃的getUserInfo。排查步骤检查app.json中pages第一项是否为pages/index/index。检查index.js中data.motto是否存在。检查index.wxml中是否写了{{motto}}。检查按钮是否绑定bindgetuserinfo或bindtap。单击“编译”重新运行。打开 Console 查看报错。完整解决代码index.jsPage({data:{motto:Hello World,userInfo:{},hasUserInfo:false},getUserProfile(){wx.getUserProfile({desc:用于完善会员资料,success:(res){this.setData({userInfo:res.userInfo,hasUserInfo:true});},fail:(){wx.showToast({title:获取失败,icon:none});}});}});index.wxmlviewclasscontainerviewclassuserinfobuttonwx:if{{!hasUserInfo}}bindtapgetUserProfile获取头像昵称/buttonblockwx:elseimageclassuserinfo-avatarsrc{{userInfo.avatarUrl}}modecover/imagetextclassuserinfo-nickname{{userInfo.nickName}}/text/block/viewviewclassusermottotextclassuser-motto{{motto}}/text/view/viewindex.wxss.usermotto{margin-top:200rpx;color:red;text-align:center;}注意事项wx.getUserProfile需要用户点击触发不能自动调用。不同基础库版本能力不同应以官方文档为准。真机效果可能与模拟器不同建议真机调试。AI 给出的代码需要结合项目实际调整。