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

文章目录

前言

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

二、步骤

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.rhkb.cn/news/41845.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

001,Python微信接龙脚本与腾讯会议定时挂网课脚本

目录 前言: 微信接龙: 腾讯会议: 前言: 这是我的第一篇博客,看到一个视频,推荐写写博客来验证所学,觉得很有道理,就来写一个. 这两个脚本是我的处女作,还有很多不完善的地方,但重点是能跑..... 系统是win11 微信接龙: 我使用的wxauto库,pip install wxauto就行,不过需要…

如何用网易邮箱大师登录QQ邮箱账号

非常无语&#xff0c;非常不理解为什么QQ邮箱整这么多幺蛾子&#xff1f; 问题描述&#xff1a; 登陆的时候&#xff0c;问你是否有授权码&#xff0c;如果有用授权码登录&#xff08;注意不是QQ密码&#xff09;&#xff1b;如果没有&#xff0c;就需要获取授权码。 获取授权…

利用masigpro包进行时间序列分析

这边文章的代码主要源于网上已有的精品推文&#xff0c;根据自身数据和作图时出现的报错“Error in plot.new() : figure margins too large”进行了个性化修改 值得注意的是&#xff1a;maSigPro软件包主要用于差异基因分析&#xff0c;因此其内置的函数和方法都是基于差异基…

文末赠书 | 基于python的《AI医学图像处理》

关注我们丨文末赠书 说到生成型人工智能ChatGPT&#xff0c;恐怕没人不知道吧&#xff1f; 毫无意外&#xff0c;它也对医疗界产生了不小震撼。不仅能够书写医疗论文、提供问诊服务&#xff0c;甚至连影像医生的饭碗都要抢—— 有网友把OpenAI的GPT3.0系统接入了自家服务器&…

GPT免费好用,国内手机用户人人可玩!

使用ChatGPT已经成为我生活中不可或缺的一部分&#xff0c;它太好用了&#xff01;无论是写作、编程还是日常咨询搜索&#xff0c;我都可以全部交给它处理。但是&#xff0c;很少有人知道如何在手机上使用GPT。对于大多数普通用户来说&#xff0c;想要在手机上使用GPT&#xff…

阿里发布免费的全新可变字体;Stability AI CEO:5年内,人类程序员将不复存在;Perl 5.38发布|极客头条...

「极客头条」—— 技术人员的新闻圈&#xff01; CSDN 的读者朋友们早上好哇&#xff0c;「极客头条」来啦&#xff0c;快来看今天都有哪些值得我们技术人关注的重要新闻吧。 整理 | 梦依丹 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 一分钟速览新闻点&#…

抖音多闪背后的AI和社交

https://www.toutiao.com/a6646710308825989636/ 2019-01-16 08:16:00 通过多闪发布会现场可知字节跳动创始人张一鸣并没有出场&#xff0c;而是给了95年颜值正义的小姑娘徐璐冉一个靠前的产品经理的位子。我们姑且不去猜这门安排的意义。 本文主要讨论抖音多闪产品背后都用到…

Python音视频开发:消除抖音短视频Logo的图形化工具实现

☞ ░ 前往老猿Python博文目录 ░ 一、引言 在《Python音视频开发&#xff1a;消除抖音短视频Logo和去电视台标的实现详解》节介绍了怎么通过PythonMoviepyOpenCV实现消除视频Logo的四种方法&#xff0c;并提供了详细的实现思路和实现代码&#xff0c;但这种原生态的应用不适…

元宇宙系列--用AI数字人物进行抖音直播

目前抖音无人直播比较普及&#xff0c;从起初的挤火车&#xff0c;云蹦迪&#xff0c;冲马桶&#xff0c;随后比较火的广场舞、过马路等等一系列的抖音互动游戏直播。 以上都是一个软件可以完成&#xff0c;非常容易被抖音禁播。近期已经有不少直播互动游戏被禁播了。 现在来介…

每秒最高1w+使用量,「AI绘画」成抖音年度爆款,背后技术秘籍现已公开

允中 发自 凹非寺来源 | 量子位 QbitAI 「AI绘画」是2022年抖音上最火的一款特效玩法&#xff0c;用户只要输入一张图片&#xff0c;AI就会根据图片生成一张动漫风格的图片。 由于生成的图片效果带有一定的“盲盒”属性 &#xff0c;画风精致唯美中又带着些许的蠢萌和无厘头&am…

用AI人脸识别技术实现抖音特效

♚ 李远君 &#xff0c;Web和云计算开发人员。Java&#xff0c;Python&#xff0c;Golang爱好者。 个人网址&#xff1a;https://tomoncle.com 本文作者已加入Python中文社区专栏作者计划 导言 为什么会写这个人脸例子&#xff1f; 浏览博客的过程&#xff0c;无意发现了一篇名…

Github 热度飙升,一键生成最近抖音超火的 AI 人物绘图

点击关注公众号&#xff0c;利用碎片时间学习 Paper2GUI 是一款面向普通人的 AI 桌面 APP 工具箱&#xff0c;免安装即开即用&#xff0c;已支持20AI 模型&#xff0c;内容涵盖语音合成、视频补帧、视频超分、目标检测、图片风格化、OCR 识别等领域。支持 Windows、Mac、Linux …

抖音一键生成的AI绘画火了,网友惊呼:有点东西

在各大AI绘画软件争奇斗艳的时候&#xff0c;近期最火的AI绘画莫过于抖音一键生成的AI绘画特效&#xff0c;网友惊呼&#xff1a;有点东西。 就连最近话题度超高的“汪小菲”&#xff0c;也用AI绘画来“秀”恩爱了。 AI绘画识别度还挺高&#xff0c;特别是关于大白志愿者的生成…

讯飞语音的中的bug用户校验失败

用户校验失败&#xff1a;原因是目录没有复制粘贴正确. 下面是刚刚下载的SDK目录: 下面的是自己Android工程中的目录&#xff1a;注意复制粘贴的文件路径要正确 转载于:https://www.cnblogs.com/Oldz/p/9620359.html

Android端科大讯飞语音应用开发

创建语音应用及sdk集成 讯飞开放平台网址 网址&#xff1a;http://www.xfyun.cn/ 1.注册讯飞账号,我以前注册过就直接登录了,创建应用(注:创建过的应用不能被删除)2.创建应用名称规范: 名称_平台类型3.这里显示你的APPID,应用的唯一标示4.创建完成之后现在并没什么卵用,还需要…

python3讯飞语音识别

#!/usr/bin/python # -*- coding: UTF-8 -*- import urllib.parse, urllib.request #这是python3&#xff0c;原先py2里的urllib2或者其他都包含在了py3的urllib里了&#xff0c; # py3里的urllib里的parse和request一定要这么导入&#xff0c;直接import urllib # 是不行的imp…

移动开发-语音识别-调用讯飞平台提供的API

1 登录讯飞平台&#xff0c;申请账号&#xff0c;创建一个应用 具体步骤可以百度查找 2 进入“我的应用”&#xff0c;下载相应的SDK文件 选择语音听写&#xff08;流式版&#xff09;-> Android MSC 3 打开安卓&#xff0c;新建项目 创建一个EditText和一个Button &…

UNIAPP调用讯飞语音评测API

1、历经千辛万苦&#xff0c;UNIAPP调用评测API终于完成&#xff0c;在此做下总结下&#xff1a;首先看效果&#xff01; 2、实现第1步&#xff0c;首先是鉴权&#xff0c;用到的CryptoJS等工具都可以从讯飞和uniapp官方获取 import * as base64 from "base-64" impo…

Android科大讯飞语音集成,非常详细的使用讲解

讯飞语音开发集成地址http://www.xfyun.cn/ 解压后的doc文件夹下的msc develop 文件中有详细集成步骤 AppId: 1.先要注册开发者账户, 添加我的应用 , 下载sdk 2.下载后将sdk解压, 把案例导入工程中运行看看效果 3.将libs下的两个jar包添加到libs目录下, 将同路径下的其它 …

Android 讯飞语音识别功能开发

以下代码主要参考博客&#xff1a; Android 科大讯飞语音识别 Android蓝牙串口开发部分请参照博客&#xff1a; Android蓝牙串口开发 讯飞语音官方开发文档&#xff1a; 语音听写 Android SDK 文档 文章目录 前言一、SDK的下载和导入1.SDK的下载2.新建工程3.配置项目a.导包b.权…