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

news2024/10/7 8:23:19

文章目录

前言

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

二、步骤

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>

//js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    content: "",
    chats: [],
    StatusBar:0,
    scrollTop:0,
    inputvalue:""
  },
  requestData: {
    text: ''
  },

  submitContent: function (content) {
    this.requestData.text = content
    console.log("this.requestData.text", this.requestData.text)
    if (this.requestData.text == '' || this.requestData.text == null) {
      wx.showToast({
        title: '请输入内容',
      })
      return
    }
    wx.showLoading({
      title: '正在加载中....',
    })

    var that = this
    console.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 * 100
        that.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.content
    this.submitContent(lajiContent)
    this.setData({
      chats:this.data.chats,
      scrollTop: height,
      inputvalue:""
    })
    this.data.content=""
  }
})

6. 效果

 

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

 解决方法:

直接把超时时间拉长

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/179420.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python局部函数及用法

Python 函数内部可以定义变量&#xff0c;这样就产生了局部变量&#xff0c;有读者可能会问&#xff0c;Python 函数内部能定义函数吗&#xff1f;答案是肯定的。Python 支持在函数内部定义函数&#xff0c;此类函数又称为局部函数。那么&#xff0c;局部函数有哪些特征&#x…

Redis实现好友关注 | 黑马点评

目录 一、关注和取关 二、共同关注 三、关注推送&#xff08;feed流&#xff09; 1、Timeline模式的方案 拉模式 推模式 推拉结合模式 总结 2、推模式实现关注推送 需求 feed流分页问题 feed流的滚动分页 实现推送到粉丝的收件箱 …

(学习笔记)opencv和dlib的基础操作

来源&#xff1a;投稿 作者&#xff1a;LSC 编辑&#xff1a;学姐 本篇文章将讲述作者对opencv和dlib基础操作的学习笔记。 首先来看opencv的11种基础操作 (1)imread 读取图片 (2)resize 图片缩放 (3)cvtColor 灰度化 (4)threshold 阈值化 (5)bitwise_not 图像取反 (6)a…

JavaEE-初识网络

目录一、局域网二、广域网三、网络通信基础3.1 IP地址3.2 端口号3.3 协议四、协议分层五、封装和分用一、局域网 局域网&#xff0c;网络种类&#xff0c;覆盖范围一般是方圆几千米之内&#xff0c;其具备的安装便捷、成本节约、扩展方便等特点使其在各类办公室内运用广泛。局…

有序列表标签与无序列表标签

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title></title> </head> <body bgcolor"bisque"> <!-- 在ol有序列表标签和ul无序列表标签…

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

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

分布式事务Seata学习笔记

目录 1.Seata 是什么 2. Seata快速开始 2.1 Seata Server&#xff08;TC&#xff09;环境搭建 db存储模式Nacos(注册&配置中心)部署 3. Seata Client快速开始 4.demo源码:springcloudAlibaba: Alibaba微服务学习demo 1.Seata 是什么 Seata 是一款开源的分布式事务…

神级程序员上网都在看什么?

同样都是上网&#xff0c;为什么大神总能在最短时间内汲取最有效的信息呢&#xff1f; 不怕大神不上网&#xff0c;就怕大神上网比你精&#xff01;其实&#xff0c;你与大神的区别都藏在细节中。 这些神级网站都是我偷看他们电脑抄来的&#xff08;误&#xff09;&#xff0c;…

超链接(还称热连接)标签

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>超链接(还称热连接)</title> </head> <body> <!-- 超链接的特点&#xff1a; 1、有…

Python内置函数

5.6 Python内置函数 Python自带的所有内置函数如下&#xff1a; Python函数 以上为Python3.10中所有的内置函数&#xff0c;其中绝大部分在前面的学习当中都已经接触过了。这里在补充介绍下没有提到或学习到的函数。 5.6.1 callable(object) 描述 如果参数 object 是可调…

Java面试题,mysql相关基础问题(全是自己的总结,如有不对,敬请斧正)

mysql相关基础问题一、mysql中int类型单引号问题二、静态SQL与动态SQL1. 静态SQL2. 动态SQL3. 动态SQL与静态SQL的区别与联系一、mysql中int类型单引号问题 今天写mysql的时候发现了一个问题&#xff0c;在查询的时候不小心把int类型的id加上引号查询了&#xff0c;但是也能查…

Day08 C++STL入门基础知识五——vector容器(下) 插入删除-数据存取-交换容器-预留空间【全面深度剖析+例题代码展示】

More haste, less speed. 欲速则不达 文章目录1. 承接上文2. 插入操作2.1 函数原型(总括)2.2 尾插尾删2.2.1 操作2.2.2 代码展示2.2.3 测试结果2.3 迭代器插入2.3.1 操作2.3.2 代码展示2.3.3 测试结果2.4 think小思考2.4.1 小疑问2.4.2 思路2.4.3 代码展示2.4.4 测试结果3. 删除…

数据结构---堆

堆 定义 基本操作 建堆 堆排序 优先队列 一、堆的定义&#xff1a; 堆必须是一个完全二叉树 还得满足堆序性 什么是完全二叉树呢&#xff1f; 完全二叉树只允许最后一行不为满 且最后一行必须从左到右排序 最后一行元素之间不可有间隔&#xff0c;中间不可有空缺 如下几棵树…

CSS基础学习

HTMLCSSJavaScript 结构表现交互 学习内容&#xff1a; CSS是什么CSS怎么用&#xff08;快速入门&#xff09;CSS选择器&#xff08;重点难点&#xff09;美化网页&#xff08;文字&#xff0c;阴影&#xff0c;超链接&#xff0c;列表&#xff0c;渐变…&#xff09;盒子模型…

基于电压型磁链观测器的异步电机矢量控制学习

导读&#xff1a;本期主要介绍电压型磁链观测器&#xff08;voltage flux observer&#xff09;在静止坐标系下的表现形式&#xff0c;应用在异步电机矢量控制系统中。如需要文中的仿真模型&#xff0c;关注微信公众号&#xff1a;浅谈电机控制&#xff0c;获取。一、引言磁链估…

万字长文--详解Node.js(快速入门)

Node.js基础与扩展Node.js1、初识Node.js与内置模块1.1 Node.js初识1.2 fs文件系统模块1.3 path路径模块1.4 http模块2、模块化2.1 模块化的基本概念2.2 Node.js中模块化2.3 npm与包2.4 模块的加载机制3、Express3.1 初识Express3.2 Express路由3.3 Express中间件3.4 使用Expre…

LeetCode刷题复盘笔记—一文搞懂贪心算法之45. 跳跃游戏 II问题(贪心算法系列第五篇)

今日主要总结一下可以使用贪心算法解决的一道题目&#xff0c;45. 跳跃游戏 II 题目&#xff1a;45. 跳跃游戏 II Leetcode题目地址 题目描述&#xff1a; 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度…

论文投稿指南——中文核心期刊推荐(铁路运输)

【前言】 &#x1f680; 想发论文怎么办&#xff1f;手把手教你论文如何投稿&#xff01;那么&#xff0c;首先要搞懂投稿目标——论文期刊 &#x1f384; 在期刊论文的分布中&#xff0c;存在一种普遍现象&#xff1a;即对于某一特定的学科或专业来说&#xff0c;少数期刊所含…

Windows卸载与清除工具“ Geek 与 CCleaner ” (带你快速了解)

&#x1f4dc; “作者 久绊A” 专注记录自己所整理的Java、web、sql等&#xff0c;IT技术干货、学习经验、面试资料、刷题记录&#xff0c;以及遇到的问题和解决方案&#xff0c;记录自己成长的点滴。 &#x1f341; 操作系统【带你快速了解】对于电脑来说&#xff0c;如果说…

什么是闭包,Python闭包

闭包&#xff0c;又称闭包函数或者闭合函数&#xff0c;其实和前面讲的嵌套函数类似&#xff0c;不同之处在于&#xff0c;闭包中外部函数返回的不是一个具体的值&#xff0c;而是一个函数。一般情况下&#xff0c;返回的函数会赋值给一个变量&#xff0c;这个变量可以在后面被…