Cursor+Coze+微信小程序实战: AI春联生成器-EW帮帮网

引言

随着AI技术的普及，开发AI应用不再是程序员的专利。本文将介绍如何使用Cursor编辑器、Coze AI平台和微信开发者工具，在30分钟内零代码开发一款AI春联生成器微信小程序。这款应用能够根据用户输入的姓名，自动生成包含姓名的藏头春联和横批，非常适合春节期间使用。全程无需编写代码，只需简单配置和拖拽操作，即使没有编程基础的用户也能轻松完成。

一、准备工作

1.1 所需工具和平台

工具/平台	作用	官网地址
Cursor	AI辅助编程编辑器	https://www.cursor.so/
Coze	智能体开发平台	https://www.coze.cn/
微信开发者工具	小程序开发和调试	https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

1.2 账号注册

Coze平台账号：访问Coze官网注册账号，个人用户可免费使用基础功能
微信公众平台账号：用于小程序开发，访问https://mp.weixin.qq.com/注册
Cursor账号：下载安装后使用GitHub或邮箱注册

1.3 环境准备

安装Cursor编辑器并登录
安装微信开发者工具并登录
确保网络连接正常，能够访问Coze平台

二、Coze智能体搭建

2.1 创建新智能体

访问Coze平台并登录，点击首页的"创建智能体"按钮
填写基本信息：
- 智能体名称：春联生成器
- 描述：根据姓名生成藏头春联和横批
- 头像：可上传春节相关图片
点击"创建"按钮进入智能体编辑界面

2.2 配置智能体提示词(Prompt)

在"提示词"标签页中，输入以下内容：

你是一位专业的春联创作大师，擅长根据人名创作藏头春联。请根据用户提供的姓名，创作一幅符合以下要求的春联：

1. 如果名字是2个字：将两个字分别作为上下联的开头字
2. 如果名字是3个字：将姓作为横批的开头字，名字的两个字作为上下联的开头字
3. 如果姓不好组词：可以使用同音字替代，确保横批生动精彩
4. 春联内容：要符合春节喜庆氛围，寓意吉祥，对仗工整
5. 语言风格：典雅庄重，富有文采，符合传统春联格律

请输出格式：
上联：[内容]
下联：[内容]
横批：[内容]

2.3 测试智能体功能

在右侧测试窗口输入姓名，如"张三"
点击发送按钮，查看智能体生成的春联
根据测试结果调整提示词，优化生成效果

示例测试结果：

上联：张灯结彩迎新岁
下联：三阳开泰贺新春
横批：吉祥如意

三、配置API访问

3.1 发布智能体并启用API

点击智能体编辑界面右上角的"发布"按钮
在发布设置中，勾选"API"选项
点击"配置"按钮进入API设置页面

3.2 创建访问令牌

在API配置页面，点击"创建令牌"按钮
填写令牌名称：春联生成器小程序
设置权限范围：只勾选"调用智能体"权限
点击"创建"，系统将生成一个API令牌（请妥善保存，仅显示一次）

3.3 获取API调用信息

在API配置页面，记录以下信息：

API端点URL
智能体ID
刚刚创建的访问令牌

这些信息将用于小程序调用智能体API。

四、微信小程序开发

4.1 使用Cursor创建小程序项目

打开Cursor编辑器，点击"新建项目"
选择"微信小程序"模板
填写项目信息：
- 项目名称：ai-spring-festival-couplet
- 保存路径：选择本地文件夹
- AppID：使用微信公众平台注册的AppID，若无则选择测试号
点击"创建"按钮生成项目

4.2 设计小程序界面

在Cursor中打开pages/index/index.wxml文件
删除默认内容，输入以下代码：

<view class="container">
  <view class="title">AI春联生成器</view>
  
  <view class="input-area">
    <input 
      type="text" 
      placeholder="请输入姓名" 
      bindinput="inputName"
      value="{{name}}"
    />
    <button bindtap="generateCouplet">生成春联</button>
  </view>
  
  <view class="result-area" wx:if="{{coupletResult}}">
    <view class="couplet-item">{{coupletResult.top}}</view>
    <view class="couplet-item">{{coupletResult.bottom}}</view>
    <view class="横批">{{coupletResult.horizontal}}</view>
  </view>
  
  <view class="loading" wx:if="{{loading}}">生成中...</view>
</view>

打开pages/index/index.wxss文件，添加样式：

.container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #fff8e6;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  margin: 40rpx 0;
  color: #d4237a;
}

.input-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 40rpx;
}

input {
  padding: 20rpx;
  border: 2rpx solid #ddd;
  border-radius: 10rpx;
  font-size: 32rpx;
}

button {
  background-color: #d4237a;
  color: white;
  padding: 20rpx;
  border-radius: 10rpx;
  font-size: 32rpx;
}

.result-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
}

.couplet-item {
  font-size: 36rpx;
  font-family: "SimSun", serif;
  color: #333;
  padding: 10rpx;
  border-bottom: 2rpx solid #eee;
  width: 100%;
  text-align: center;
}

.横批 {
  font-size: 36rpx;
  font-family: "SimSun", serif;
  color: #d4237a;
  font-weight: bold;
  margin-top: 20rpx;
  padding: 10rpx 20rpx;
  border: 2rpx solid #d4237a;
  border-radius: 10rpx;
}

.loading {
  margin-top: 40rpx;
  font-size: 32rpx;
  color: #666;
}

4.3 实现API调用逻辑

打开pages/index/index.js文件
添加以下代码：

Page({
  data: {
    name: '',
    coupletResult: null,
    loading: false
  },

  inputName(e) {
    this.setData({
      name: e.detail.value
    })
  },

  async generateCouplet() {
    if (!this.data.name.trim()) {
      wx.showToast({
        title: '请输入姓名',
        icon: 'none'
      })
      return
    }

    this.setData({
      loading: true,
      coupletResult: null
    })

    try {
      // 调用Coze API
      const response = await wx.request({
        url: 'https://api.coze.cn/v3/agents/invoke',
        method: 'POST',
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer YOUR_API_TOKEN' // 替换为你的API令牌
        },
        data: {
          agent_id: 'YOUR_AGENT_ID', // 替换为你的智能体ID
          query: this.data.name,
          user_id: 'USER_UNIQUE_ID' // 可以使用wx.getStorageSync('openid')等唯一标识
        }
      })

      if (response.statusCode === 200 && response.data.code === 0) {
        // 解析API返回结果
        const content = response.data.data.content
        const lines = content.split('\n').filter(line => line.trim())
        
        // 提取春联内容
        const couplet = {
          top: lines[0].replace('上联：', '').trim(),
          bottom: lines[1].replace('下联：', '').trim(),
          horizontal: lines[2].replace('横批：', '').trim()
        }
        
        this.setData({
          coupletResult: couplet
        })
      } else {
        wx.showToast({
          title: '生成失败，请重试',
          icon: 'none'
        })
        console.error('API调用失败', response)
      }
    } catch (error) {
      wx.showToast({
        title: '网络错误，请重试',
        icon: 'none'
      })
      console.error('调用异常', error)
    } finally {
      this.setData({
        loading: false
      })
    }
  }
})

替换代码中的YOUR_API_TOKEN和YOUR_AGENT_ID为之前在Coze平台获取的实际值

4.4 配置小程序权限

打开app.json文件，添加网络请求权限：

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "AI春联生成器",
    "navigationBarTextStyle": "black"
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于生成个性化春联"
    }
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

打开project.config.json文件，添加Coze API域名白名单：

{
  "miniprogramRoot": "miniprogram/",
  "cloudfunctionRoot": "cloudfunctions/",
  "setting": {
    "urlCheck": true,
    "es6": true,
    "enhance": true,
    "postcss": true,
    "preloadBackgroundData": false,
    "minified": true,
    "newFeature": true,
    "coverView": true,
    "nodeModules": false,
    "autoAudits": false,
    "showShadowRootInWxmlPanel": true,
    "scopeDataCheck": false,
    "uglifyFileName": false,
    "checkInvalidKey": true,
    "checkSiteMap": true,
    "uploadWithSourceMap": true,
    "compileHotReLoad": false,
    "useMultiFrameRuntime": true,
    "useApiHook": true,
    "useApiHostProcess": true,
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    },
    "enableEngineNative": false,
    "bundle": false,
    "useIsolateContext": true,
    "useCompilerModule": true,
    "userConfirmedUseCompilerModuleSwitch": false,
    "userConfirmedBundleSwitch": false,
    "packNpmManually": false,
    "packNpmRelationList": [],
    "minifyWXSS": true
  },
  "appid": "wx1234567890abcdef", // 替换为你的AppID
  "projectname": "ai-spring-festival-couplet",
  "libVersion": "2.29.4",
  "simulatorType": "wechat",
  "simulatorPluginLibVersion": {},
  "condition": {},
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  },
  "setting": {
    "requestDomain": [
      "https://api.coze.cn"
    ]
  }
}

五、测试与调试

5.1 在Cursor中预览

保存所有文件
点击Cursor编辑器顶部的"预览"按钮
选择"微信小程序预览"
系统将自动打开微信开发者工具并加载项目

5.2 功能测试

在模拟器中输入姓名，如"李四"
点击"生成春联"按钮
等待API调用完成，查看生成结果

预期结果：

上联：李花初绽迎春到
下联：四海同春贺岁来
横批：吉祥如意

5.3 常见问题排查

API调用失败：
- 检查API令牌和智能体ID是否正确
- 确认网络连接正常
- 检查微信开发者工具中的控制台输出
界面显示异常：
- 检查WXML和WXSS代码是否有语法错误
- 确认数据绑定是否正确
生成结果不符合预期：
- 返回Coze平台优化智能体提示词
- 增加更多示例训练智能体

六、部署与发布

6.1 小程序预览

在微信开发者工具中，点击"预览"按钮
使用微信扫描生成的二维码，在手机上测试
检查在真实环境中的表现

6.2 提交审核

在微信开发者工具中，点击"上传"按钮
填写版本号和更新说明
点击"上传"，等待上传完成
登录微信公众平台，进入"版本管理"
将刚刚上传的版本提交审核

6.3 发布上线

等待审核通过（通常1-3个工作日）
审核通过后，在微信公众平台点击"发布"
小程序将在发布后几小时内对所有用户可见

七、功能扩展建议

多风格选择：增加春联风格选项（传统、现代、幽默等）
自定义字数：允许用户选择春联字数
保存与分享：添加春联保存到相册和分享功能
多语言支持：增加英文春联生成功能
语音输入：添加语音输入姓名功能

八、总结

通过本文的步骤，我们使用Cursor编辑器、Coze AI平台和微信开发者工具，零代码开发了一款AI春联生成器微信小程序。整个过程包括：

在Coze平台创建春联生成器智能体
配置API访问令牌
使用Cursor创建小程序界面和逻辑
测试并发布小程序

这种开发方式极大降低了AI应用的开发门槛，即使没有编程基础的用户也能快速创建自己的AI应用。随着AI技术的发展，类似的零代码开发方式将越来越普及，让更多人能够参与到AI应用的创作中来。

Cursor+Coze+微信小程序实战: AI春联生成器

引言