引言
随着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应用的创作中来。