Ai小程序入门03-项目初始化（小白入门：用AI一键生成小程序骨架，告别繁琐配置）

Ai小程序入门03-项目初始化小白入门用AI一键生成小程序骨架告别繁琐配置 文章简介环境搭好了账号也拿到了终于可以写出人生的第一行代码了传统的开发第一步需要建立复杂的文件夹、配置乱七八糟的 JSON 文件极度枯燥。但在 AI 时代这些全部可以交给机器代劳。本文将手把手带你使用第一篇获取的 AppID 创建真实的微信小程序项目并首次展示 Cursor 的强大魔力用一句大白话让 AI 自动为你生成小程序的基础全局配置和底部导航栏。见证奇迹的时刻到了️ 第一步在微信开发者工具中创建项目我们必须先用腾讯官方的工具创建一个标准的小程序“空壳子”才能让 AI 进去发挥。1. 启动并新建项目打开之前安装好的微信开发者工具。在弹出的启动界面上点击大大的➕ (加号) 图标选择新建一个小程序项目。2. 填写项目关键信息这一步非常关键请严格按照以下说明填写项目名称给你的小程序起个响亮的名字例如Ai助手入门Demo这个名字仅在你的电脑上显示以后随时可以改。目录点击文件夹图标在电脑上找一个专门放代码的地方建议在D盘或桌面上建一个纯英文路径的文件夹如D:\WechatProjects\ai_demo。AppID⭐重点来了拿出你在《第01篇账号准备》中保存的以wx开头的那串字符粘贴在这里。绝对不要选“测试号”否则后面很多高级功能用不了后端服务选择不使用云服务。云开发我们会在本专栏的后期高级部分讲解前期先用纯本地模式学习基础。模板选择选择JavaScript - 基础模板。千万别选乱七八糟的花哨模板我们需要一个干干净净的基础环境。填写完毕并核对无误后点击右下角的【确定】。3. 认识开发者工具的三大区域创建成功后页面会被划分为三大块左侧区模拟器这里显示一个虚拟手机你的小程序界面长什么样这里一目了然。默认会有个你微信头像的初始化页面。右上区编辑器这里是腾讯自带的写代码的地方由于太难用我们绝对不用它等下会用 Cursor 接管。右下区调试器这里会显示报错信息、日志输出。这个非常重要未来抓 Bug 离不开它。到这里官方工具的任务暂时完成。先不要关掉微信开发者工具我们把它挂在后台。‍♂️ 第二步用 Cursor 接管项目现在我们要请出我们的主力武器——最强 AI 编辑器 Cursor。1. 用 Cursor 打开项目文件夹打开Cursor软件。点击界面左上角的File-Open Folder(如果装了汉化包就是文件-打开文件夹)。找到你刚才在微信开发者工具里创建项目的那个文件夹路径比如D:\WechatProjects\ai_demo选中它并点击打开。2. 认识小程序的文件结构在 Cursor 的左侧资源管理器中你会看到一堆文件。不要慌作为小白你目前只需要记住这几个核心文件app.json全局配置文件管整个小程序的顶栏颜色、底部菜单、页面路由。app.wxss全局样式表这里的设定会影响所有页面。pages/文件夹你的所有页面都在这里一个页面通常包含.wxml长什么样、.wxss什么颜色/排版、.js点击会有什么反应三个核心文件。✨ 第三步初试牛刀让 AI 帮你写app.json配置传统教程教你学app.json会让你背诵各种花括号和英文单词错一个逗号程序就崩溃。但在 AI 编程里我们只讲人话。我们将利用 Cursor 超强的Composer (多文件全局编辑)功能让 AI 帮我们配置小程序的顶栏颜色并生成一个底部导航栏。1. 呼出 AI 魔法棒在 Cursor 中按下快捷键Ctrl IMac 系统是Cmd I。屏幕中央会弹出一个宽大的输入框这就是 Composer 模式它可以一次性修改项目中的多个文件。2. 编写你的第一段“提示词” (Prompt)在输入框中精准地输入你的需求。你可以直接复制以下这段话提示词请帮我修改小程序的全局配置app.json。需求如下将小程序顶部的导航栏背景颜色改为科技感的深蓝色#1E3A8A文字标题颜色改为白色white。小程序顶部标题文字修改为“AI编程实战”。帮我配置一个底部导航栏tabBar包含两个标签卡。第一个是“首页”页面路径使用默认的 pages/index/index图标可以暂时省略。第二个是“我的”请帮我在 pages 目录下新建一个 profile 页面目录并将其作为“我的”页面路径。底部导航栏选中的文字颜色为深蓝色#1E3A8A未选中的为灰色。3. 见证奇迹的时刻输入完成后按回车键 (Enter)。接下来睁大眼睛看着屏幕Cursor 的 AI 模型会自动读取你的需求。它会在右侧弹出一个修改计划Plan。你会看到代码像瀑布一样自动生成AI 自动帮你修改了app.json甚至主动在pages目录下为你创建了全新的profile页面所需的 4 个文件4. 接受 AI 的代码生成完毕后Cursor 会高亮显示新增和修改的代码。你可以审查一下看不懂也没关系然后点击弹窗右上角的Accept All(接受全部)或者按快捷键Ctrl Enter(Mac:Cmd Enter) 保存。 第四步回到微信工具看效果代码已经被 AI 写好了效果如何切回一直挂在后台的微信开发者工具。你会发现它已经自动刷新了看看左侧的模拟器手机屏幕原来的白底黑字顶栏现在变成了深蓝背景白字的“AI编程实战”手机屏幕最下方出现了一个标准的底部导航栏左边是“首页”右边是“我的”。点击“我的”页面瞬间切换过去**恭喜你你没有手写一行代码仅仅靠说话就完成了传统初学者要学一整天才能搞懂的全局配置和路由跳转逻辑**这就是 AI 编程降维打击的威力。️ 常见问题排查问题现象解决思路微信工具报错Cannot read property tabBar of undefined这是因为 JSON 格式错乱少逗号或大括号。在 Cursor 中打开app.json把报错信息复制进CmdL问 AI让 AI 帮你修复格式。AI 没有创建新页面就直接配置了tabBar导致页面找不到微信要求tabBar里的路径必须存在。重新按CmdI告诉 AI“你刚才忘了创建 pages/profile 目录请先帮我建好这个页面再配置 app.json”。手机模拟器没有任何变化检查 Cursor 中的文件是否都已经保存文件名旁边没有小圆点。按下CtrlS全部保存然后去微信工具点一下顶部的“编译”按钮强制刷新。✅ 本文总结项目创建必须用微信开发者工具记得填入真实的 AppID。编辑代码使用 Cursor通过File - Open Folder导入项目。Cursor 的Composer (Ctrl/Cmd I)极其强大可以理解业务逻辑并自动跨文件修改、创建文件。AI 编程的核心在于“清晰地描述需求Prompt”颜色、结构、需求说得越细生成的代码越准。工作流确认闭环Cursor 写需求 - 接受代码 - 保存 - 微信工具看效果。 下一篇预告Ai小程序入门04 - 页面布局骨架搭好了现在要开始装修虽然目前首页空空如也但下一篇我们将教你如何让 AI 发挥强大的 UI 设计能力自动为你画出漂亮的轮播图、金刚区导航和瀑布流卡片。你只需要负责提需求最痛苦的 WXML 排版难题AI 统统帮你秒杀