微信小程序+云函数+腾讯云对话机器人API(ChatBot)

news/2024/11/17 5:59:51/

文章目录

前言

一、小程序云开发是什么?

二、步骤

1. 在app.js中绑定好云环境id,并且选好当前环境以及选好云文件夹

2. 去到腾讯云API Explorer中选好Region地区和Query这个必填参数,然后进行代码生成

 3. 在上面的API Explorer网站点击前往获取密钥,也就是要得到自己的SecretId和SecretKey

4. 接着就可以去到编写云函数并上传部署了,直接看下面的图片吧

 5. 小程序端的代码写法

6. 效果


前言

可能前言会写的比较长,因为有我遇到困难的记录。
在个人项目中有个与用户闲聊机器人的功能,但是貌似的QQ AI用不了了,所以又去研究了一阵腾讯云的闲聊机器人API,但是我对前端是没有系统的学习的,一路“碰壁”。
首先是贼傻的直接把这段实例代码直接放到了小程序前端js代码中,结果就报错了,如下:

看样子是SDK缺失?接着貌似可以通过Npm安装Node.js SDK,但是构建Npm总是失败,原因我大概也可能知道,但是想省点事,直接用方法二去下载了源码包

Node.js-SDK 中心-腾讯云


但是首先是源码包放到小程序项目中都不知道放哪,索性全部位置都放放,结果还是不行。后面看到了tencencloud-sdk-nodejs如何导入? | 微信开放社区

和小程序使用腾讯云sdk,不懂如何安转sdk,截图如下? - 问答 - 腾讯云开发者社区-腾讯云 

才知道原来是放到云函数里去用的!有了云开发环境,使用云函数来完成这个API接口调用其实是比较简单的事情了,因为不仅有本地调试而且也有云端调试,更有自动处理安装依赖这个问题。

随便说一句,可能是官方技术文档对我这种基础弱的菜鸡来说不太友好,感觉都看不太懂...大多都是靠网上的大佬们的前车之鉴了。

以下就进入本篇文章正文内容,下面我的例子可供参考


一、小程序云开发是什么?

云开发官方文档
微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务。
开发者可以使用云开发快速开发小程序、小游戏、公众号网页等,并且原生打通微信开放能力。
开发者无需搭建服务器,能方便的使用API进行业务开发。

二、步骤

1. 在app.js中绑定好云环境id,并且选好当前环境以及选好云文件夹

让它识别出这是云文件夹当时一直识别不到,后面研究了一阵子才支支吾吾明白一点,反正直接把云文件夹扔到和小程序同级的地位,然后安装上面的代码写好应该就行吧

2. 去到腾讯云API Explorer中选好Region地区和Query这个必填参数,然后进行代码生成

API Explorer网址

 3. 在上面的API Explorer网站点击前往获取密钥,也就是要得到自己的SecretId和SecretKey

 

4. 接着就可以去到编写云函数并上传部署了,直接看下面的图片吧

新建Node.js函数

把依赖项在package.json中加上

//chatbot下的index.js代码如下// 云函数入口文件
const cloud = require('wx-server-sdk')cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境// Depends on tencentcloud-sdk-nodejs version 4.0.3 or higher
const tencentcloud = require("tencentcloud-sdk-nodejs");
const NlpClient = tencentcloud.nlp.v20190408.Client;// 实例化一个认证对象,入参需要传入腾讯云账户 SecretId 和 SecretKey,此处还需注意密钥对的保密
// 代码泄露可能会导致 SecretId 和 SecretKey 泄露,并威胁账号下所有资源的安全性。以下代码示例仅供参考,建议采用更安全的方式来使用密钥,请参见:https://cloud.tencent.com/document/product/1278/85305
// 密钥可前往官网控制台 https://console.cloud.tencent.com/cam/capi 进行获取
//下面的secretId和secretKey填自己的
const clientConfig = {credential: {secretId: "自己的secretId",secretKey: "自己的secretKey",},region: "ap-guangzhou",profile: {httpProfile: {endpoint: "nlp.tencentcloudapi.com",},},
};// 云函数入口函数
exports.main = async (event, context) => {// 实例化要请求产品的client对象,clientProfile是可选的const client = new NlpClient(clientConfig);const params = {"Query": event.sentence};return await client.ChatBot(params)
}

稍微解释下上面我的代码↓

"Query"是官方要求必填的传入参数,给它赋值的是等会从小程序端调用时给入的sentence这个参数

因为套了官方的模板后,怎么写返回值都是null,所以对return这行代码进行了修改。返回的方式参考了这篇文章↓请问一下各位大佬,我在云函数中使用腾讯云的智能闲聊接口,云函数中报错,请问一下怎么办? | 微信开放社区

接着直接云端安装依赖,上传并部署
后面还可以自己进行调试看看这个API写的正不正确

 5. 小程序端的代码写法

因为代码量有点多,所以只挑最关键

//wxml
//<view class="cu-bar foot input cur"><input class="solid-bottom" bindfocus="InputFocus" bindblur="InputBlur" adjust-position="{{false}}" bindinput="inputContent" focus="{{false}}" maxlength="300" cursor-spacing="10" value="{{inputvalue}}"></input><button class="cu-btn bg-green shadow" bindtap="onSend">发送</button>
</view>

//jsPage({/*** 页面的初始数据*/data: {content: "",chats: [],StatusBar:0,scrollTop:0,inputvalue:""},requestData: {text: ''},submitContent: function (content) {this.requestData.text = contentconsole.log("this.requestData.text", this.requestData.text)if (this.requestData.text == '' || this.requestData.text == null) {wx.showToast({title: '请输入内容',})return}wx.showLoading({title: '正在加载中....',})var that = thisconsole.log(that.requestData.text)wx.cloud.callFunction({//云函数名称name: 'chatbot',//传递给云函数的参数data: {sentence:that.requestData.text},success: res => {wx.hideLoading()//console.log(res)console.log("chatbot"+JSON.stringify(res))//console.log(res.result.Reply)var content = { content: res.result.Reply, type: 0 }that.data.chats.push(content)var height = that.data.chats.length * 100that.setData({chats: that.data.chats,scrollTop: height,})},fail: err => {wx.showToast({icon: 'none',title: 'chatbot调用失败',})console.error('[云函数] [sum] 调用失败:', err)}})},inputContent:function(e){this.setData({content: e.detail.value})},onSend:function() {if (this.data.chats.length>100) {this.data.chats=[]}if (this.data.content==""){wx.showToast({title: '请输入内容...',icon:"none"})return}var meContent={content:this.data.content,type:1}this.data.chats.push(meContent)var height = this.data.chats.length * 100 var lajiContent=this.data.contentthis.submitContent(lajiContent)this.setData({chats:this.data.chats,scrollTop: height,inputvalue:""})this.data.content=""}
})

6. 效果

 

 当时有个超时错误发生了——腾讯云函数报错 Invoking task timed out after 3 seconds,

 解决方法:

直接把超时时间拉长


http://www.ppmy.cn/news/19610.html

相关文章

Linux 命令(248)—— type 命令(builtin)

文章目录1.命令简介2.返回值3.命令格式4.选项说明5.常用示例参考文献1.命令简介 type 用来显示命令的类型。 一个命令的类型可以是&#xff1a; alias&#xff1a;别名keyword&#xff1a;Shell 保留关键字function&#xff1a;Shell 函数builtin&#xff1a;Shell 内建命令…

【owt-server】webrtc agent

owt server 5.0 代码。m88版本。首选关注js层,作为owner对内部模块的调用 分为三大模块:rtc conn ,rtc framejs 服务以及js 服务都有的微服务框架代码 : addon中初始化全部底层组件 // Copyright (C) <2019> Intel Corporation // // SPDX-License-Identifier: Apach…

四、新图片、新视频预测(Datawhale组队学习)

文章目录配置环境预测新图像载入图像并进行预处理导入训练好的模型前向预测将分类结果写入原图中预测新视频导入训练好的模型视频预测单帧图像分类预测可视化方案一&#xff1a;原始图像预测结果文字可视化方案二&#xff1a;原始图像预测结果文字各类别置信度柱状图预测摄像头…

【初识数据库】进入数据库的大门+数据库基本操作

前言&#xff1a; 大家好&#xff0c;我是良辰丫&#x1f353;&#x1f353;&#x1f353;&#xff0c;这个专栏我将带领大家去探索数据库的汪洋大海&#xff0c;我主要使用的数据库软件是MySQL&#xff0c;数据库软件大同小异&#xff0c;嘿嘿嘿&#xff0c;废话不多说&#x…

好客租房-09_学习MongoDB并完善通讯系统

9. 学习MongoDB 并完善租房的通讯系统后端本章目的为MongoDB快速入门, 并完善上一节编写的通讯系统后台, 将DAO层从HashMap迁移到MongoDB中.思考如下问题:MongoDB属于关系型还是非关系型数据库为什么在我们的通讯系统中选择MongoDB作为数据库?9.1 mongoDB概念简介MongoDB是一个…

PAT 1015 德才论(C++实现)

宋代史学家司马光在《资治通鉴》中有一段著名的“德才论”&#xff1a;“是故才德全尽谓之圣人&#xff0c;才德兼亡谓之愚人&#xff0c;德胜才谓之君子&#xff0c;才胜德谓之小人。凡取人之术&#xff0c;苟不得圣人&#xff0c;君子而与之&#xff0c;与其得小人&#xff0…

CE训练教程进阶,步骤 9: 注入++

目录 一、找出存放四个玩家健康值的地址 二、找出修改数据的代码 三、找出是谁调用了修改指令 四、分析玩家的内存数据 五、注入修改代码 六、C语言代码注入 相对于前面8个步骤&#xff0c;步骤9稍微要难一点&#xff0c;所以单独写。 步骤9是在步骤7的基础上&#xff0c…

返回值的理解

前言 我们写的函数是怎么返回的&#xff0c;该如何返回一个临时变量&#xff0c;临时变量不是出栈就销毁了吗&#xff0c;为什么可以传递给调用方&#xff1f;返回对象的大小对使用的方式有影响吗&#xff1f;本文将带你探究这些问题&#xff0c;阅读本文需要对函数栈帧有一定…