607 lines
15 KiB
JavaScript
607 lines
15 KiB
JavaScript
// pages/exampleDetail/index.js
|
||
Page({
|
||
data: {
|
||
type: "",
|
||
envId: "",
|
||
showTip: false,
|
||
title: "",
|
||
content: "",
|
||
|
||
haveGetOpenId: false,
|
||
openId: "",
|
||
|
||
haveGetCodeSrc: false,
|
||
codeSrc: "",
|
||
|
||
haveGetRecord: false,
|
||
record: [],
|
||
|
||
haveGetImgSrc: false,
|
||
imgSrc: "",
|
||
|
||
// ai
|
||
modelConfig: {
|
||
modelProvider: "deepseek", // 大模型服务厂商
|
||
quickResponseModel: "deepseek-v3", // 快速响应模型 （混元 turbo, gpt4 turbo版，deepseek v3等）
|
||
logo: "https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/2339414f-2c0d-4537-9618-1812bd14f4af.svg", // model 头像
|
||
welcomeMsg: "我是deepseek-v3，很高兴见到你！", // model 欢迎语
|
||
},
|
||
callcbrCode: "",
|
||
initEnvCode: "",
|
||
callOpenIdCode: "",
|
||
callMiniProgramCode: "",
|
||
callFunctionCode: "",
|
||
callCreateCollectionCode: "",
|
||
callUploadFileCode: "",
|
||
|
||
showInsertModal: false,
|
||
insertRegion: "",
|
||
insertCity: "",
|
||
insertSales: "",
|
||
|
||
haveGetCallContainerRes: false,
|
||
callContainerResStr: "",
|
||
|
||
ai_page_config: `{
|
||
"usingComponents": {
|
||
"agent-ui":"/components/agent-ui/index"
|
||
},
|
||
}`,
|
||
ai_wxml_config: `<agent-ui agentConfig="{{agentConfig}}" showBotAvatar="{{showBotAvatar}}" chatMode="{{chatMode}}" modelConfig="{{modelConfig}}""></agent-ui>`,
|
||
ai_data_config: `data: {
|
||
chatMode: "bot", // bot 表示使用agent，model 表示使用大模型
|
||
showBotAvatar: true, // 是否在对话框左侧显示头像
|
||
agentConfig: {
|
||
botId: "your agent id", // agent id,
|
||
allowWebSearch: true, // 允许客户端选择展示联网搜索按钮
|
||
allowUploadFile: true, // 允许客户端展示上传文件按钮
|
||
allowPullRefresh: true, // 允许客户端展示下拉刷新
|
||
allowUploadImage: true, // 允许客户端展示上传图片按钮
|
||
allowMultiConversation: true, // 允许客户端展示查看会话列表/新建会话按钮
|
||
showToolCallDetail: true, // 是否展示 mcp server toolCall 细节
|
||
allowVoice: true, // 允许客户端展示语音按钮
|
||
showBotName: true, // 允许展示bot名称
|
||
},
|
||
modelConfig: {
|
||
modelProvider: "hunyuan-open", // 大模型服务厂商
|
||
quickResponseModel: "hunyuan-lite", // 大模型名称
|
||
logo: "", // model 头像
|
||
welcomeMsg: "欢迎语", // model 欢迎语
|
||
},
|
||
}`,
|
||
|
||
// AI 场景示例数据
|
||
aiScenarios: [
|
||
{
|
||
title: "💡 智能代码生成与补全",
|
||
examples: [
|
||
"帮我创建一个商品列表页面,包含图片、标题、价格和加入购物车按钮",
|
||
"帮我完善这个函数,实现商品搜索功能",
|
||
],
|
||
},
|
||
{
|
||
title: "🔧 代码优化与重构建议",
|
||
examples: [
|
||
"优化这段代码的性能,减少不必要的渲染",
|
||
"完善云函数调用的错误处理代码",
|
||
],
|
||
},
|
||
],
|
||
},
|
||
|
||
onLoad(options) {
|
||
if (
|
||
options.type === "cloudbaserunfunction" ||
|
||
options.type === "cloudbaserun"
|
||
) {
|
||
this.getCallcbrCode();
|
||
}
|
||
if (options.type === "getOpenId") {
|
||
this.getOpenIdCode();
|
||
}
|
||
if (options.type === "getMiniProgramCode") {
|
||
this.getMiniProgramCode();
|
||
}
|
||
|
||
if (options.type === "createCollection") {
|
||
this.getCreateCollectionCode();
|
||
}
|
||
|
||
if (options.type === "uploadFile") {
|
||
this.getUploadFileCode();
|
||
}
|
||
this.setData({ type: options?.type, envId: options?.envId });
|
||
},
|
||
|
||
copyUrl() {
|
||
wx.setClipboardData({
|
||
data: "https://gitee.com/TencentCloudBase/cloudbase-agent-ui/tree/main/apps/miniprogram-agent-ui/miniprogram/components/agent-ui",
|
||
success: function (res) {
|
||
wx.showToast({
|
||
title: "复制成功",
|
||
icon: "success",
|
||
});
|
||
},
|
||
});
|
||
},
|
||
|
||
copyPluginName() {
|
||
wx.setClipboardData({
|
||
data: "微信云开发 AI ToolKit",
|
||
success: function (res) {
|
||
wx.showToast({
|
||
title: "复制成功",
|
||
icon: "success",
|
||
});
|
||
},
|
||
});
|
||
},
|
||
|
||
copyPrompt(e) {
|
||
const prompt = e.currentTarget.dataset.prompt;
|
||
wx.setClipboardData({
|
||
data: prompt,
|
||
success: function (res) {
|
||
wx.showToast({
|
||
title: "复制成功",
|
||
icon: "success",
|
||
});
|
||
},
|
||
});
|
||
},
|
||
|
||
insertRecord() {
|
||
this.setData({
|
||
showInsertModal: true,
|
||
insertRegion: "",
|
||
insertCity: "",
|
||
insertSales: "",
|
||
});
|
||
},
|
||
|
||
deleteRecord(e) {
|
||
// 调用云函数删除记录
|
||
wx.showLoading({
|
||
title: "删除中...",
|
||
});
|
||
wx.cloud
|
||
.callFunction({
|
||
name: "quickstartFunctions",
|
||
data: {
|
||
type: "deleteRecord",
|
||
data: {
|
||
_id: e.currentTarget.dataset.id,
|
||
},
|
||
},
|
||
})
|
||
.then((resp) => {
|
||
wx.showToast({
|
||
title: "删除成功",
|
||
});
|
||
this.getRecord(); // 刷新列表
|
||
wx.hideLoading();
|
||
})
|
||
.catch((e) => {
|
||
wx.showToast({
|
||
title: "删除失败",
|
||
icon: "none",
|
||
});
|
||
wx.hideLoading();
|
||
});
|
||
},
|
||
|
||
// 输入框事件
|
||
onInsertRegionInput(e) {
|
||
this.setData({ insertRegion: e.detail.value });
|
||
},
|
||
onInsertCityInput(e) {
|
||
this.setData({ insertCity: e.detail.value });
|
||
},
|
||
onInsertSalesInput(e) {
|
||
this.setData({ insertSales: e.detail.value });
|
||
},
|
||
// 取消弹窗
|
||
onInsertCancel() {
|
||
this.setData({ showInsertModal: false });
|
||
},
|
||
|
||
// 确认插入
|
||
async onInsertConfirm() {
|
||
const { insertRegion, insertCity, insertSales } = this.data;
|
||
if (!insertRegion || !insertCity || !insertSales) {
|
||
wx.showToast({ title: "请填写完整信息", icon: "none" });
|
||
return;
|
||
}
|
||
wx.showLoading({ title: "插入中..." });
|
||
try {
|
||
await wx.cloud.callFunction({
|
||
name: "quickstartFunctions",
|
||
data: {
|
||
type: "insertRecord",
|
||
data: {
|
||
region: insertRegion,
|
||
city: insertCity,
|
||
sales: Number(insertSales),
|
||
},
|
||
},
|
||
});
|
||
wx.showToast({ title: "插入成功" });
|
||
this.setData({ showInsertModal: false });
|
||
this.getRecord(); // 刷新列表
|
||
} catch (e) {
|
||
wx.showToast({ title: "插入失败", icon: "none" });
|
||
console.error(e);
|
||
} finally {
|
||
wx.hideLoading();
|
||
}
|
||
},
|
||
|
||
getOpenId() {
|
||
wx.showLoading({
|
||
title: "",
|
||
});
|
||
wx.cloud
|
||
.callFunction({
|
||
name: "quickstartFunctions",
|
||
data: {
|
||
type: "getOpenId",
|
||
},
|
||
})
|
||
.then((resp) => {
|
||
this.setData({
|
||
haveGetOpenId: true,
|
||
openId: resp.result.openid,
|
||
});
|
||
wx.hideLoading();
|
||
})
|
||
.catch((e) => {
|
||
wx.hideLoading();
|
||
const { errCode, errMsg } = e;
|
||
if (errMsg.includes("Environment not found")) {
|
||
this.setData({
|
||
showTip: true,
|
||
title: "云开发环境未找到",
|
||
content:
|
||
"如果已经开通云开发，请检查环境ID与 `miniprogram/app.js` 中的 `env` 参数是否一致。",
|
||
});
|
||
return;
|
||
}
|
||
if (errMsg.includes("FunctionName parameter could not be found")) {
|
||
this.setData({
|
||
showTip: true,
|
||
title: "请上传云函数",
|
||
content:
|
||
"在'cloudfunctions/quickstartFunctions'目录右键，选择【上传并部署-云端安装依赖】，等待云函数上传完成后重试。",
|
||
});
|
||
return;
|
||
}
|
||
});
|
||
},
|
||
|
||
clearOpenId() {
|
||
this.setData({
|
||
haveGetOpenId: false,
|
||
openId: "",
|
||
});
|
||
},
|
||
|
||
clearCallContainerRes() {
|
||
this.setData({
|
||
haveGetCallContainerRes: false,
|
||
callContainerResStr: "",
|
||
});
|
||
},
|
||
|
||
getCodeSrc() {
|
||
wx.showLoading({
|
||
title: "",
|
||
});
|
||
wx.cloud
|
||
.callFunction({
|
||
name: "quickstartFunctions",
|
||
data: {
|
||
type: "getMiniProgramCode",
|
||
},
|
||
})
|
||
.then((resp) => {
|
||
this.setData({
|
||
haveGetCodeSrc: true,
|
||
codeSrc: resp.result,
|
||
});
|
||
wx.hideLoading();
|
||
})
|
||
.catch((e) => {
|
||
wx.hideLoading();
|
||
console.error(e);
|
||
const { errCode, errMsg } = e;
|
||
if (errMsg.includes("Environment not found")) {
|
||
this.setData({
|
||
showTip: true,
|
||
title: "云开发环境未找到",
|
||
content:
|
||
"如果已经开通云开发，请检查环境ID与 `miniprogram/app.js` 中的 `env` 参数是否一致。",
|
||
});
|
||
return;
|
||
}
|
||
if (errMsg.includes("FunctionName parameter could not be found")) {
|
||
this.setData({
|
||
showTip: true,
|
||
title: "请上传云函数",
|
||
content:
|
||
"在'cloudfunctions/quickstartFunctions'目录右键，选择【上传并部署-云端安装依赖】，等待云函数上传完成后重试。",
|
||
});
|
||
return;
|
||
}
|
||
});
|
||
},
|
||
|
||
clearCodeSrc() {
|
||
this.setData({
|
||
haveGetCodeSrc: false,
|
||
codeSrc: "",
|
||
});
|
||
},
|
||
|
||
bindInput(e) {
|
||
const index = e.currentTarget.dataset.index;
|
||
const record = this.data.record;
|
||
record[index].sales = Number(e.detail.value);
|
||
this.setData({
|
||
record,
|
||
});
|
||
},
|
||
|
||
getRecord() {
|
||
wx.showLoading({
|
||
title: "",
|
||
});
|
||
wx.cloud
|
||
.callFunction({
|
||
name: "quickstartFunctions",
|
||
data: {
|
||
type: "selectRecord",
|
||
},
|
||
})
|
||
.then((resp) => {
|
||
this.setData({
|
||
haveGetRecord: true,
|
||
record: resp.result.data,
|
||
});
|
||
wx.hideLoading();
|
||
})
|
||
.catch((e) => {
|
||
this.setData({
|
||
showTip: true,
|
||
});
|
||
wx.hideLoading();
|
||
console.error(e);
|
||
});
|
||
},
|
||
|
||
clearRecord() {
|
||
this.setData({
|
||
haveGetRecord: false,
|
||
record: [],
|
||
});
|
||
},
|
||
updateRecord() {
|
||
wx.showLoading({
|
||
title: "",
|
||
});
|
||
wx.cloud
|
||
.callFunction({
|
||
name: "quickstartFunctions",
|
||
data: {
|
||
type: "updateRecord",
|
||
data: this.data.record,
|
||
},
|
||
})
|
||
.then((resp) => {
|
||
wx.showToast({
|
||
title: "更新成功",
|
||
});
|
||
wx.hideLoading();
|
||
})
|
||
.catch((e) => {
|
||
console.log(e);
|
||
this.setData({
|
||
showUploadTip: true,
|
||
});
|
||
wx.hideLoading();
|
||
});
|
||
},
|
||
|
||
uploadImg() {
|
||
wx.showLoading({
|
||
title: "",
|
||
});
|
||
// 让用户选择一张图片
|
||
wx.chooseMedia({
|
||
count: 1,
|
||
success: (chooseResult) => {
|
||
// 将图片上传至云存储空间
|
||
wx.cloud
|
||
.uploadFile({
|
||
// 指定上传到的云路径
|
||
cloudPath: `my-photo-${new Date().getTime()}.png`,
|
||
// 指定要上传的文件的小程序临时文件路径
|
||
filePath: chooseResult.tempFiles[0].tempFilePath,
|
||
})
|
||
.then((res) => {
|
||
this.setData({
|
||
haveGetImgSrc: true,
|
||
imgSrc: res.fileID,
|
||
});
|
||
})
|
||
.catch((e) => {
|
||
console.log("e", e);
|
||
});
|
||
},
|
||
complete: () => {
|
||
wx.hideLoading();
|
||
},
|
||
});
|
||
},
|
||
|
||
clearImgSrc() {
|
||
this.setData({
|
||
haveGetImgSrc: false,
|
||
imgSrc: "",
|
||
});
|
||
},
|
||
|
||
goOfficialWebsite() {
|
||
const url = "https://docs.cloudbase.net/toolbox/quick-start";
|
||
wx.navigateTo({
|
||
url: `../web/index?url=${url}`,
|
||
});
|
||
},
|
||
runCallContainer: async function () {
|
||
const app = getApp();
|
||
console.log("globalData", app.globalData);
|
||
const c1 = new wx.cloud.Cloud({
|
||
resourceEnv: app.globalData.env,
|
||
});
|
||
await c1.init();
|
||
const r = await c1.callContainer({
|
||
path: "/api/users", // 填入业务自定义路径
|
||
header: {
|
||
"X-WX-SERVICE": "express-test", // 填入服务名称
|
||
},
|
||
// 其余参数同 wx.request
|
||
method: "GET",
|
||
});
|
||
console.log(r);
|
||
this.setData({
|
||
haveGetCallContainerRes: true,
|
||
callContainerResStr: `${JSON.stringify(r.data.items, null, 2)}`,
|
||
});
|
||
},
|
||
getCallcbrCode: function () {
|
||
const app = getApp();
|
||
this.setData({
|
||
callcbrCode: `const c1 = new wx.cloud.Cloud({
|
||
resourceEnv: ${app.globalData.env}
|
||
})
|
||
await c1.init()
|
||
const r = await c1.callContainer({
|
||
path: '/api/users', // 此处填入业务自定义路径， /api/users 为示例路径
|
||
header: {
|
||
'X-WX-SERVICE': 'express-test', // 填入业务服务名称，express-test 为示例服务
|
||
},
|
||
// 其余参数同 wx.request
|
||
method: 'GET',
|
||
})`,
|
||
});
|
||
},
|
||
getInitEnvCode: function () {
|
||
const app = getApp();
|
||
this.setData({
|
||
initEnvCode: `wx.cloud.init({
|
||
env: ${app.globalData.env},
|
||
traceUser: true,
|
||
});`,
|
||
});
|
||
},
|
||
getCreateCollectionCode: function () {
|
||
this.setData({
|
||
callCreateCollectionCode: `const cloud = require('wx-server-sdk');
|
||
cloud.init({
|
||
env: cloud.DYNAMIC_CURRENT_ENV
|
||
});
|
||
const db = cloud.database();
|
||
// 创建集合云函数入口函数
|
||
exports.main = async (event, context) => {
|
||
try {
|
||
// 创建集合
|
||
await db.createCollection('sales');
|
||
return {
|
||
success: true
|
||
};
|
||
} catch (e) {
|
||
return {
|
||
success: true,
|
||
data: 'create collection success'
|
||
};
|
||
}
|
||
};`,
|
||
});
|
||
},
|
||
getOpenIdCode: function () {
|
||
this.setData({
|
||
callOpenIdCode: `const cloud = require('wx-server-sdk');
|
||
cloud.init({
|
||
env: cloud.DYNAMIC_CURRENT_ENV
|
||
});
|
||
// 获取openId云函数入口函数
|
||
exports.main = async (event, context) => {
|
||
// 获取基础信息
|
||
const wxContext = cloud.getWXContext();
|
||
return {
|
||
openid: wxContext.OPENID,
|
||
appid: wxContext.APPID,
|
||
unionid: wxContext.UNIONID,
|
||
};
|
||
};`,
|
||
callFunctionCode: `wx.cloud.callFunction({
|
||
name: 'quickstartFunctions',
|
||
data: {
|
||
type: 'getOpenId'
|
||
}
|
||
}).then((resp) => console.log(resp))`,
|
||
});
|
||
},
|
||
getMiniProgramCode: function () {
|
||
this.setData({
|
||
callMiniProgramCode: `const cloud = require('wx-server-sdk');
|
||
cloud.init({
|
||
env: cloud.DYNAMIC_CURRENT_ENV
|
||
});
|
||
// 获取小程序二维码云函数入口函数
|
||
exports.main = async (event, context) => {
|
||
// 获取小程序二维码的buffer
|
||
const resp = await cloud.openapi.wxacode.get({
|
||
path: 'pages/index/index'
|
||
});
|
||
const { buffer } = resp;
|
||
// 将图片上传云存储空间
|
||
const upload = await cloud.uploadFile({
|
||
cloudPath: 'code.png',
|
||
fileContent: buffer
|
||
});
|
||
return upload.fileID;
|
||
};
|
||
`,
|
||
callFunctionCode: `wx.cloud.callFunction({
|
||
name: 'quickstartFunctions',
|
||
data: {
|
||
type: 'getMiniProgramCode'
|
||
}
|
||
}).then((resp) => console.log(resp))`,
|
||
});
|
||
},
|
||
getUploadFileCode: function () {
|
||
this.setData({
|
||
callUploadFileCode: `wx.chooseMedia({
|
||
count: 1,
|
||
success: (chooseResult) => {
|
||
// 将图片上传至云存储空间
|
||
wx.cloud
|
||
.uploadFile({
|
||
// 指定上传到的云路径
|
||
cloudPath: "my-photo.png",
|
||
// 指定要上传的文件的小程序临时文件路径
|
||
filePath: chooseResult.tempFiles[0].tempFilePath,
|
||
})
|
||
.then((res) => {
|
||
console.log(res)
|
||
})
|
||
.catch((e) => {
|
||
console.log('e', e)
|
||
});
|
||
}
|
||
});`,
|
||
});
|
||
},
|
||
});
|