Cursor+腾讯云开发小程序--AI画廊,速通云开发，期末课程设计or大作业

"setting": {
  "packNpmManually": true,
  "packNpmRelationList": [
    {
      "packageJsonPath": "./src_node_modules_1/package.json",
      "miniprogramNpmDistDir": "./miniprogram/"
    },
    {
      "packageJsonPath": "./src_node_modules_2/package.json",
      "miniprogramNpmDistDir": "./miniprogram/sub_package"
    }
  ]
}

大约就在中间位置

改成这样：

然后我们在终端中输入npm install即可，然后重新点击npm构建，如果还是失败就点击上方的“清除缓存”然后重新启动即可。

2.2修改配置

注意需要打开“将js编译成ES5”

2.3引入TDesign

进入网站TDesign查看说明文档

由于非常简单我就不多说了，给看一下成功的效果

出现蓝色按钮表示成功，如果中途出现报错，可以尝试重新构建npm环境。

3.AI开发

本章开始前，我需要说明的是：由于AI提示词太长并且对话记录过多，我就不在这里贴了，有需要的我最后的项目地址中有所有的对话记录以及完整的技术文档。

由于每个人跑出来的结果各有不同，因此我只讲一下大概的开发流程，具体的错误可能需要你们自己去尝试解决。

3.1初步界面开发

由于我们不能让cursor一下子生成一个完整的项目，因此我们只能分批次进行。

注意：这里的分批次进行指的并不是说我们先让他写首页，再让他写个人界面这样子，请看我接下来的操作。

我们想让他生成一个所有界面的原型

这边注意我们的需求

我们需要让他生成这四个界面同时嵌入到index界面中，然后平铺展开在界面上

可能的代码大概长这样：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 画廊小程序原型</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            background-color: #f5f5f5;
        }
        .device {
            width: 390px; /* iPhone 15 Pro 宽度 */
            height: 844px; /* iPhone 15 Pro 高度 */
            border-radius: 45px; /* 圆角 */
            overflow: hidden;
            border: 10px solid #333;
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
            background: #fff;
            position: relative;
        }
        .device-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body class="flex flex-wrap gap-8 justify-center items-start p-8">
    <div class="flex flex-col items-center">
        <h2 class="device-title">首页</h2>
        <div class="device">
            <iframe src="home.html"></iframe>
        </div>
    </div>
    
    <div class="flex flex-col items-center">
        <h2 class="device-title">我的</h2>
        <div class="device">
            <iframe src="profile.html"></iframe>
        </div>
    </div>
    
    <div class="flex flex-col items-center">
        <h2 class="device-title">创建图片</h2>
        <div class="device">
            <iframe src="create.html"></iframe>
        </div>
    </div>
    
    <div class="flex flex-col items-center">
        <h2 class="device-title">图片结果</h2>
        <div class="device">
            <iframe src="result.html"></iframe>
        </div>
    </div>
</body>
</html>

3.2开发整体小程序

上述效果出来之后，我们就可以告诉ai根据上面的界面为原型完成小程序的前端，这个时候ai会根据你的小程序结构来进行几个界面的创作

这边注意我们要指明他必须要构建在pages文件夹下，不然非常容易报错导致大改项目结构路径，这是博主尝试了多次之后得出来的结论。

3.3接入云开发

好了这里就到了我们的核心内容接入云开发。

我们首先先点击左上角的“云开发”

点击后进入此界面

这边是由于我们已经创建好了，大概长这样

这边需要注意：由于微信小程序开发的时候登录是用你的微信登陆的，因此腾讯云在申请云服务环境的时候我们也需要优先选择你的微信登录同时给小程序授权才能看到。这边它提示你需要创建环境也可以直接创建，这就是为什么我说可以跳过上面的步骤，也是首月免费的，一个月19.9。

大概在这里。

环境创建完成之后，我们就需要告诉cursor，请你用云开发的模式，为我们的小程序写一下用户登录登出功能，这样子就会生成对应的云函数，怎么调用的我们不用管，有兴趣可以自己看下，我们只管云函数上线。

生成出来大概就长这样，我们右键选中对应的云函数文件，就会看到“上传并部署，云端安装依赖”,点击上线即可然后去察看我们的云函数界面。

注：如果它的函数状态一直在转圈圈，按一下刷新即可。

全部完成之后我们重新编译小程序，发现还是会有报错。那是因为我们没有创建对应的数据库和存储。

如果说我们不知道AI生成的云函数中到底需要什么字段或者集合，我们可以回去问一下cursor

这边模式选择ask即可，这样子它就只会回答不会库库改代码。

系统设计了两个主要数据集合：
1. users集合：存储用户信息，包括openid、头像、昵称等
2. images集合：存储图像信息，包括图像URL、生成提示词、创建时间、权限设置等

这两个回答，我们回去创建一下

我们创建集合就好，其他的不要动，好了回去测试，过关即可。

这边有的同学可能会问：为什么我的云函数右键没有部署按钮？？

我根据我的情况做出回答：我们打开project.config.json,找到最下面这个云函数环境，如果没有下面这两条就加上，注意路径需要按照你自己的文件夹名字。当出现当前环境：cloud1的时候表示成功。如果还是不行回去问cursor吧。

3.4接入百炼大模型

好了这边来到的我们最后的部分了，接入AI绘画功能。这边我们采用了阿里云的百炼大模型。

我们先去百炼平台上获取我们的API

进入到首页后，我们点击左下角的API-KEY

进入之后就可以申请API啦。

之后我们依旧把接入的工作交给AI。

来到模型广场，选择一个你喜欢的文生图模型，然后点击API参考

进入之后发现有一堆的东西，看不懂怎么办？？

有没有更暴力一点的办法，有的兄弟有的。

我们直接复制前提条件和HTTP下的所有文案，全部丢给AI顺便告诉他我们得API-KEY即可，接下来就交给他。

接下来我们还需要回到云函数里去

找到AI给我们生成的文生图云函数，然后进行环境配置，在key中输入 DASHSCOPE_API_KEY，在value中输入我们的具体的api-key。

有的小伙伴不知道DASHSCOPE_API_KEY是怎么来的，这其实是我们自己创建的一个.env文件中的内容，这个也需要告诉AI一起生成。

接下来我们就可以测试功能了。

还是非常不错的。

4.收尾

到了这里大家是不是觉得，我跨过了千山万水终于完成了？？？nonono，还差最后一步。这边有个小问题，就是阿里云生成的图片只是给了你一个网址，然后你去访问，真实的图片并没有到你的数据库中去。我们真正的思路应该是：由云函数来下载并且上传图片至云存储中。

这边大家可能又会有一个疑问，为什么一定是云函数来完成？我直接写在前端里行不行？？哎这边其实大家可以拿我们前后端开发做一个对比，前端所有对api的直接请求都是不被允许的，因为保密性的问题。因此我们必须要把下载或者上传图片的需求放给后端，云函数的部署和调用实际上可以类比成我们的后端函数调用，这样子说大家是不是就一清二楚了，我们由后端直接请求阿里云生成图片然后下载图片到云存储中，我们正常开发理论上也是这么干的是吧。

好了我们把这个需求告诉cursor，基本上一次就能完成，因为到这里我们的主要功能其实都差不多了，还是比较难出错的。

看看成品效果：

肥肠不错。

好了这就是我们全部的步骤了，看上去很简单，实际上操作起来还是不简单的，主要是第一次接触都在摸索，前前后后小一天也就完成了。其实使用cursor大家都会，问问题嘛谁不会啊。主要是该怎么问，问的顺序应该是怎么样的，这个就值得我们去实践和探索了。

好了最后献上gitee仓库地址，里面有我的开发文档，说明文档。考虑到安全性的问题，我把里面的appid以及API-Key还有云开发环境ID都删去了，大家需要根据自己的信息填写即可。

### 环境ID配置

在部署应用前，需要将代码中的云开发环境ID更改为自己的环境ID。以下是需要修改环境ID的文件位置：

1. `miniprogram/pages/index/index.ts` 中的 `ENV_ID` 常量
   ```typescript
   // 云开发环境ID
   const ENV_ID = '';
   ```

2. `miniprogram/pages/profile/profile.ts` 中的 `wx.cloud.init` 方法参数
   ```typescript
   wx.cloud.init({
     env: '',
     traceUser: true,
   });
   ```

3. `miniprogram/app.ts` 中的云环境初始化配置
4. `miniprogram/pages/create/create.ts` 和 `miniprogram/pages/result/result.ts` 中的相关配置
5. `project.config.json` 文件中的云环境配置

### APPID与API密钥配置

除了环境ID外，还需要配置以下关键参数：

1. 微信小程序APPID
   - 在`project.config.json`文件中修改`appid`字段为您的微信小程序APPID
   ```json
   {
     "appid": "您的微信小程序APPID",
     ...
   }
   ```

2. AI服务API密钥
   - 在云函数`generateImage`中配置DASHSCOPE_API_KEY
   ```javascript
   // cloudfunctions/generateImage/index.js 或相应的文件
   const DASHSCOPE_API_KEY = ''; // 替换为您的API密钥
   ```
   - 注意：出于安全考虑，建议将API密钥配置为云开发环境变量，而不是直接硬编码在代码中

修改完所有环境ID后，确保重新编译项目并测试各项功能是否正常运行。

仓库地址

https://gitee.com/ye-haowei12/ai-gallery

如需要查看实际效果请移步至b站

Cursor+腾讯云开发小程序--AI画廊,速通云开发，期末课程设计or大作业_哔哩哔哩_bilibili