从零到一：使用Cursor+Coze开发图像生成微信小程序的快速指南【超详细】

通过结合Cursor与Coze，开发者能够高效地开发出一个图像生成的微信小程序。借助Cursor的代码生成能力和Coze强大的图像生成API，整个开发流程大大缩短，且能够提供优质的图像生成功能。微信小程序的便捷性使得该功能能够迅速投入使用，极大地提升了用户体验。

m0_70814680

5543人浏览 · 2025-01-20 16:18:16

m0_70814680 · 2025-01-20 16:18:16 发布

1 引言

技术背景

在当今图像生成与AI技术飞速发展的时代，微信小程序作为一种便捷的开发平台，已经成为开发者的首选。通过结合Cursor与Coze技术，你可以轻松创建一个高效、动态且具有创意的图像生成小程序。本文将为你详细讲解如何通过这两款工具，快速开发出满足需求的图像生成微信小程序，助力你在创新的浪潮中占得先机。
使用Cursor+Coze的优势

Cursor是一个高效的AI驱动开发工具，能够帮助开发者快速生成所需代码，简化编码过程。而Coze是一个强大的图像生成API，能够根据用户输入的文本生成高质量的图像。将这两者结合起来，开发者能够在短时间内构建出一个功能强大的图像生成微信小程序。

使用Cursor+Coze的主要优势包括：

高效的开发流程：Cursor可以帮助开发者自动化代码生成，减少手动编写代码的时间。

强大的图像生成能力：Coze提供了多种图像风格和模板支持，能够满足不同需求的图像生成。

微信小程序的便捷性：微信小程序无需安装，用户可以直接访问，极大提升了用户体验。

2 环境准备与安装

安装Cursor
大家可以参考这个博主的教程安装Cursor安装教程
当大家安装并且配置好后，如果想使用中文方便自己使用，可使用快捷键在页面中ctrl+shift+p,点击配制显示语言Configure Display Language，一般刚下载好后不显示中文，大家稍等几十秒即可，点击中文简体，然后重启cursor即可

安装微信开发者工具
下载并安装微信开发者工具,大家可以参照这个链接进行安装与配置即可
新建小程序模板，输入appID,不使用云服务，不使用模板，点击创建

这里可以看到我们的模板文件夹已经生成

接下来，我们在Cursor中打开我们在微信小程序中创建的这个项目

3 Cursor中先首先模板功能

Cursor中，使用ctrl+i快捷键掉起我们的COMPOSER,选中模型claude-3.5-sonnet,输入我们的要求

1.你是一个经验丰富的微信小程序UI工程师，擅长简约明朗的设计风格，并熟悉微信小程序的UI设计规范。
2.你将负责该微信小程序的UI设计，确保界面简洁且用户友好。
3.你已经在微信小程序的项目中，且不需要再进行项目目录结构的生成。
4.页面功能需求：
页面包含一个输入框和一个按钮。
用户在输入框中输入内容并点击按钮后，系统将调用Coze的API。
API调用成功后，返回的图片URL将在页面上展示。
5.设计要求：所有UI设计调整和备注更新应及时记录并同步至 README.md 文件中。

打开微信小程序，可以看到我们的页面已经生成。

4 添加COZE API接口

首先我们注册好Coze之后,点击扣子API,找到授权，添加新令牌，记住

这里我将时间定为30天，权限全部勾选，选择所有团队空间，点击确定

记住我们的令牌，建议复制到某个文件中保留

接下来创建我们的工作流，找到工作空间>资源库>资源>工作流

这里根据自己命名也行，不影响

打开我们的工作流，添加节点，点击图像生成

参数配制：这一步非常关键，这里我将正向提示词设置为动态变量{{input}}，这样我们就可以根据我们的要求来生成图片了,因为我看其他博主，他们这里添加了提示词，比如生成小猫，结果我在使用图像生成功能的时候，不管我输入什么都显示为关于猫的图像

这个结束节点这里设置为data就行

最后我们点击试运行，随便输入一句话，这里我输入：生成一个会飞的狗，然后运行，可以看到如图的效果，然后点击发布

记住我们的工作流id：7461817035346149427,这样，我们微信小程序需要的工作流id和私人令牌就都有了

5 添加COZE API接口

在刚才Cursor中，我们在生成的代码下输入我们的要求

参考https://www.coze.cn/docs/developer_guides/workflow_run，配置api接口，api会返回图片URL地址。我的私人令牌是：pat_SlF8j1M0ENZaUDn1FkumBY2N1SDRZBpC1Njue1BAnkrhu9vmVTn3J64BDz5p1KR0，我的工作流id是：7461817035346149427

根据Cursor生成的代码，我们打开微信小程序来测试，因为当前处于测试阶段，这里必须勾选>不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书

如果大家生成的有问题，可以看一下我的代码,这里提供3个主要页面代码，大家修改这三个应该就可以
index.js - 图片生成页面

// index.js - 图片生成页面
Page({
  // 页面的初始数据
  data: {
    inputValue: '',  // 输入框的值
    imageUrl: ''     // 生成的图片URL
  },

  // 处理输入框输入事件
  handleInput(e) {
    this.setData({
      inputValue: e.detail.value  // 更新输入值到 data 中
    })
  },

  // 处理提交按钮点击事件
  handleSubmit() {
    // 验证输入内容是否为空
    if (!this.data.inputValue) {
      wx.showToast({
        title: '请输入内容',
        icon: 'none'
      })
      return
    }

    // 显示加载提示
    wx.showLoading({
      title: '生成中...',
    })

    // 调用 Coze API 生成图片
    wx.request({
      url: 'https://api.coze.cn/v1/workflow/run',
      method: 'POST',
      header: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer pat_SlF8j1M0ENZaUDn1FkumBY2N1SDRZBpC1Njue1BAnkrhu9vmVTn3J64BDz5p1KR0'
      },
      // 请求参数
      data: {
        workflow_id: '7461817035346149427',  // 工作流ID
        parameters: {
          input: this.data.inputValue  // 用户输入的内容
        }
      },
      // 请求成功回调
      success: (res) => {
        console.log('API响应:', res.data);
        if (res.data.code === 0) {  // 判断 API 是否调用成功
          try {
            // 尝试解析返回的 data 字段（JSON 字符串）
            const outputData = JSON.parse(res.data.data);
            console.log('解析后的数据:', outputData);
            
            // 检查并设置图片 URL
            if (outputData && outputData.data) {
              this.setData({
                imageUrl: outputData.data  // 更新图片 URL
              });
              console.log('设置的图片URL:', outputData.data);
            } else {
              // 未获取到图片地址时的错误提示
              wx.showToast({
                title: '未获取到图片地址',
                icon: 'none'
              });
            }
          } catch (e) {
            // JSON 解析失败时的错误处理
            console.error('解析响应数据失败:', e, '原始数据:', res.data.data);
            wx.showToast({
              title: '数据格式错误',
              icon: 'none'
            });
          }
        } else {
          // API 调用失败时的错误处理
          console.error('API错误:', res.data);
          wx.showToast({
            title: res.data.msg || '请求失败',
            icon: 'none'
          });
        }
      },
      // 请求失败回调
      fail: (error) => {
        console.error('API调用失败:', error);
        wx.showToast({
          title: error.errMsg || '生成失败，请重试',
          icon: 'none'
        });
      },
      // 请求完成回调（无论成功失败）
      complete: () => {
        wx.hideLoading();  // 隐藏加载提示
      }
    });
  }
})

index.wxml - 图片生成页面

<!--index.wxml - 图片生成页面的结构-->

<!-- 导航栏组件 -->
<navigation-bar 
  title="Weixin" 
  back="{{false}}" 
  color="black" 
  background="#FFF">
</navigation-bar>

<!-- 可滚动视图区域 -->
<scroll-view class="scrollarea" scroll-y type="list">
  <!-- 主容器 -->
  <view class="container">
    <!-- 输入区域 -->
    <view class="input-section">
      <!-- 文本输入框：用于接收用户输入的提示文本 -->
      <input 
        class="input" 
        placeholder="请输入内容" 
        bindinput="handleInput" 
        value="{{inputValue}}"
      />
      <!-- 提交按钮：触发图片生成 -->
      <button 
        class="submit-btn" 
        bindtap="handleSubmit">
        生成图片
      </button>
    </view>
    
    <!-- 图片显示区域：仅在有图片URL时显示 -->
    <view class="image-section" wx:if="{{imageUrl}}">
      <!-- 生成的图片：使用 widthFix 模式保持宽高比 -->
      <image 
        class="generated-image" 
        src="{{imageUrl}}" 
        mode="widthFix">
      </image>
    </view>
  </view>
</scroll-view>

index.wxss页面

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}

.container {
  padding: 20px;
}

.input-section {
  width: 100%;
  margin-bottom: 20px;
}

.input {
  width: 100%;
  height: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 0 12px;
  margin-bottom: 16px;
  box-sizing: border-box;
}

.submit-btn {
  width: 100%;
  background-color: #07c160;
  color: white;
}

.image-section {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.generated-image {
  width: 100%;
  max-width: 600rpx;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}