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

发布于:2025-07-10 ⋅ 阅读:(13) ⋅ 点赞:(0)

引言

随着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 账号注册

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

1.3 环境准备

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

二、Coze智能体搭建

2.1 创建新智能体

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

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

在"提示词"标签页中,输入以下内容:

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

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

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

2.3 测试智能体功能

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

示例测试结果:

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

三、配置API访问

3.1 发布智能体并启用API

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

3.2 创建访问令牌

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

3.3 获取API调用信息

在API配置页面,记录以下信息:

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

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

四、微信小程序开发

4.1 使用Cursor创建小程序项目

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

4.2 设计小程序界面

  1. 在Cursor中打开pages/index/index.wxml文件
  2. 删除默认内容,输入以下代码:
<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>
  1. 打开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调用逻辑

  1. 打开pages/index/index.js文件
  2. 添加以下代码:
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
      })
    }
  }
})
  1. 替换代码中的YOUR_API_TOKENYOUR_AGENT_ID为之前在Coze平台获取的实际值

4.4 配置小程序权限

  1. 打开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
}
  1. 打开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中预览

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

5.2 功能测试

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

预期结果:

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

5.3 常见问题排查

  1. API调用失败

    • 检查API令牌和智能体ID是否正确
    • 确认网络连接正常
    • 检查微信开发者工具中的控制台输出
  2. 界面显示异常

    • 检查WXML和WXSS代码是否有语法错误
    • 确认数据绑定是否正确
  3. 生成结果不符合预期

    • 返回Coze平台优化智能体提示词
    • 增加更多示例训练智能体

六、部署与发布

6.1 小程序预览

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

6.2 提交审核

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

6.3 发布上线

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

七、功能扩展建议

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

八、总结

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

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

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


网站公告

今日签到

点亮在社区的每一天
去签到