✨《教程》微信对话开放平台完美实践，手把手教你搭建自己的小程序机器人客服
今天给大家讲一讲微信的新功能，微信对话开放平台的小程序对接及使用拓展方法！相当于有了一个手机版某爱同学了，功能真的不可谓不强大！还自带游戏功能，之后甚至可以根据游戏最后得分获得某奖励，无限YY中~ PS：不过现在的对话平台BUG一堆。。。。顶着左一个坑右一个坑向前艰难挺进。。。真和魔兽副本开荒一样。。。写这个太不容易了，您要感觉有点用处，请举起您珍贵的小手，点个赞吧😚 下面是我的示例图，及示例小程序 [图片] 步骤一，开通对话平台服务： 官网：https://openai.weixin.qq.com/ 注册流程就不多说了，注册成功后我们新建一个机器人 [图片] 勾选内置对话库 [图片]n 就这么简单的开启后，你就相当于有了一个网页版的某爱同学了，功能真的不可谓不强大，听歌，FM，相声，百科，答题等等一堆发功能，就回答问题这个 ，你就可以做到你问他白日依山尽的下一句，都可以回答，基本上可以满足各个网络游戏的自动答题器了，因为支持同声传译，回答问题超快。做个网游答题器小程序基本就可以上线发布了（算个歪的思路，有兴趣的可以搞一搞） 点击机器人设置，可以设置机器人的名字，就是你在机器人里问他他是谁的时候，他就可以回答你自定义名字。还有未找到技能的默认回答设置。 到此，机器人开通成功 步骤二，小程序接入机器人： 对话平台不仅仅是小程序对接，其他媒体的先不说，暂时只介绍小程序的对接，不过其他的机器人端的业务逻辑基本一样 这里的功能比较多，可能会发多个文章连载，可以关注作者的后续文章哦 服务接入：机器人-> 设置-> 服务接入在这里我们可以申请小程序，公众号，开放接口，企业微信的对接入口这里的APPID 就是我们这个机器人的APPID，没错我们可以根据程序不同的页面使用不同的机器人协同工作哦，就是初始化的时候填写不同的APPID。插件申请：小程序端官方出版了一个对话机器人插件，继承了同声传译，这个真的是良心工程，同声传译的速度,和翻译的准确度用的时候让我惊讶到了。对比某爱某精灵只好不坏,就是不支持叫个小微同学,语音启动,哈哈插件地址：https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx8c631f7e9f2465e1我们登录后点击使用插件就可以了插件部署及机器人初始化：在我们的小程序app.json中声明插件： [代码]"plugins": {[代码][代码] "chatbot": {[代码][代码] "version": "1.1.6",[代码][代码] "provider": "wx8c631f7e9f2465e1"[代码][代码] },[代码][代码] "WechatSI": {[代码][代码] "version": "0.3.3",[代码][代码] "provider": "wx069ba97219f66d99"[代码][代码] }[代码][代码]},[代码] plugins为机器人插件，wechatsi这个是同声传译插件，因为机器人插件中要调用同声传译拆建，所以要使用2个插件 版本号可能您看到文章的时候不是最新的，这个不用担心，如果不是最新，开发者工具会给你提示最新版本号的 初始化及机器人： 这个主要是默认加载一些我们自定义的设置，比如自定义提示语，欢迎语，聊天背景，是否开启语音播报等，写在APP.JS文件中，代码如下： [代码]//app.js[代码] [代码]var[代码] [代码]plugin = requirePlugin("chatbot");[代码] [代码]App({[代码] [代码] globalData: {[代码] [代码] },[代码] [代码] onLaunch: function[代码] [代码]() {[代码] [代码] plugin.init({[代码] [代码] appid: "你的机器人APPID", [代码] [代码] //openid:"", [代码] [代码] success: () => {[代码] [代码] //获取初始数据[代码] [代码] var[代码] [代码]that = this;[代码] [代码] wx.request({[代码] [代码] url: getApp().globalData.url + '获取设置接口',[代码] [代码] method: 'post',[代码] [代码] header: {// 设置请求的 header [代码] [代码] 'content-type': 'application/x-www-form-urlencoded'[代码] [代码] },[代码] [代码] data: {[代码] [代码] },[代码] [代码] success: function[代码] [代码](res) {[代码] [代码] if[代码] [代码](res.data.isclear) {[代码] [代码] plugin.clearChatRecord()//清除聊天记录[代码] [代码] }[代码] [代码] plugin.setGuideList(res.data.guideList)//获取快捷语句[代码] [代码] plugin.setWelcome(res.data.welcome)[代码] [代码] plugin.setBackground(res.data.background)[代码] [代码] }[代码] [代码] })[代码] [代码] }, //非必填[代码] [代码] fail: error => { }, //非必填[代码] [代码] welcome: "填写你的欢迎语",[代码] [代码] background: "url('网络图片地址') no-repeat 50% 50%"[代码] [代码] });[代码] [代码] }[代码] [代码]});[代码] 这里的初始化设置项只是一部分，全部设置项可以在插件接口地址文档中查找 这里作一些初始化时的问题说明： 1.由于app.js里的onlaunch方法是加载小程序必须经过的第一个方法，可以前置加载一些内容，不然直接接入页面再初始化，会让用户看到插件本身的默认项，第一次使用后才会变为你的设置项，用户体验不好。 2.对于openid说明一下，这个官方建议是填上。哎。。这个是个槽点啊。。。。我是不习惯在这个地方就调用接口获取OPENID，会使用户进入首页变慢，根据不同可是不填openid,之后的高级接口，和获取用户的机器人使用记录就没法完成，这就是问什么要在使用的页面再次初始化一次的原因了，1个是可以页面变换不同设置，还有一个就是在其他页面方便有了openid的是时候加上 3.这里的setwelcome方法和setbackground方法我用的IOS测试的，提示没有此方法。。。所以后面才会加上welcome和background设置项，应该是个BUG吧。这里的background相当于CSS里的background，所以可以设置图片当背景，不过100% 100% 的时候背景图片那偏移了，可能是插件设置背景图片原点不对与本身页面不一致，这个应该也是个BUG，所以把100%设置为50%了，凑合能看 4.页面中的使用： 我是新建了一个页面，全屏放置机器人，就像是客服按钮一样，然后程序其他页面点击后，进入该界面，代码如下： wxml: [代码]<view style="height: 100vh">[代码] [代码] <chat bind:backHome="goBackHome"[代码] [代码]bind:queryCallback="getQueryCallback"/>[代码] [代码]</view>[代码] [代码]<!-- 开启关闭声音 -->[代码] [代码]<image bindtap="setsound"[代码] [代码]class="soundimg"[代码] [代码]src="{{sound?soundon:soundoff}}"></image>[代码] [代码]<!-- 开启关闭声音 -->[代码] [代码]<!-- 转人工客服对话框 -->[代码] [代码]<view wx:if='{{kefu}}'[代码] [代码]catchtouchmove>[代码] [代码] <view class="blackbg"[代码] [代码]bindtap='hiddenkefu'></view>[代码] [代码] <view class="inputbg">[代码] [代码] <view class="inputspan">对话框</view>[代码] [代码] <button class="submit"[代码] [代码]open-type='contact'>跳转人工客服</button>[代码] [代码] <view class="cannel"[代码] [代码]bindtap='hiddenkefu'>取消</view>[代码] [代码] </view>[代码] [代码]</view>[代码] [代码]<!-- 转人工客服对话框 -->[代码] json:引用插件 [代码]{[代码] [代码] "navigationBarTitleText": "智能客服小晒",[代码] [代码] "usingComponents": {[代码] [代码] "chat": "plugin://chatbot/chat"[代码] [代码] }[代码] [代码]}[代码] JS： [代码]// pages/chatbot/chatbot.js[代码] [代码]var[代码] [代码]plugin = requirePlugin("chatbot");[代码] [代码]const[代码] [代码]chat = plugin.getChatComponent();[代码] [代码]Page({[代码] [代码] /**[代码] [代码] * 页面的初始数据[代码] [代码] */[代码] [代码] data: {[代码] [代码] },[代码] [代码] // goBackHome回调 返回上一级页面[代码] [代码] goBackHome: function[代码] [代码]() {[代码] [代码] wx.navigateBack({[代码] [代码] delta: 1[代码] [代码] })[代码] [代码] },[代码] [代码] // getQueryCallback回调, 返回数据[代码] [代码] getQueryCallback: function[代码] [代码](e) {[代码] [代码] this.insertchatbotlog(e)[代码] [代码] if[代码] [代码](e.detail.query=='清除记录'){[代码] [代码] plugin.clearChatRecord()[代码] [代码] }[代码] [代码] //跳转人工[代码] [代码] if(e.detail.data.answer=='正在为您转接人工服务...'){[代码] [代码] this.showkefu()[代码] [代码] }[代码] [代码] },[代码] [代码] //转人工客服方法[代码] [代码] showkefu:function(){[代码] [代码] this.setData({[代码] [代码] kefu:true,[代码] [代码] })[代码] [代码] },[代码] [代码] //隐藏人工方法[代码] [代码] hiddenkefu:function(){[代码] [代码] this.setData({[代码] [代码] kefu: false,[代码] [代码] })[代码] [代码] },[代码] [代码] //上报回答记录[代码] [代码] insertchatbotlog:function(e){[代码] [代码] var[代码] [代码]that = this;[代码] [代码] wx.request({[代码] [代码] url: getApp().globalData.url + '上报接口',[代码] [代码] method: 'post',[代码] [代码] header: {// 设置请求的 header [代码] [代码] 'content-type': 'application/x-www-form-urlencoded'[代码] [代码] },[代码] [代码] data: {[代码] [代码] 提问: e.detail.query,[代码] [代码] 用户: e.detail.data.from_user_name,[代码] [代码] 机器人APPID:e.detail.data.to_user_name,[代码] [代码] 回答: e.detail.data.answer,[代码] [代码] 回答状态码: e.detail.data.status,[代码] [代码] },[代码] [代码] })[代码] [代码] },[代码] [代码] //开启/关闭声音方法[代码] [代码] setsound:function(){[代码] [代码] this.setData({[代码] [代码] sound: !this.data.sound[代码] [代码] })[代码] [代码] plugin.setTextToSpeech(!this.data.sound)[代码] [代码] },[代码] [代码] /**[代码] [代码] * 生命周期函数--监听页面加载[代码] [代码] */[代码] [代码] onLoad: function[代码] [代码](options) {[代码] [代码] if[代码] [代码](!getApp().globalData.openid) {[代码] [代码] var[代码] [代码]openid = ''[代码] [代码] } else[代码] [代码]{[代码] [代码] var[代码] [代码]openid = getApp().globalData.openid[代码] [代码] }[代码] [代码] plugin.init({[代码] [代码] appid: "你的小程序码", //小程序示例账户，仅供学习和参考[代码] [代码] openid: openid,[代码] [代码] success: () => {[代码] [代码] //获取初始数据[代码] [代码] var[代码] [代码]that = this;[代码] [代码] wx.request({[代码] [代码] url: getApp().globalData.url + '获取设置接口',[代码] [代码] method: 'post',[代码] [代码] header: {// 设置请求的 header [代码] [代码] 'content-type': 'application/x-www-form-urlencoded'[代码] [代码] },[代码] [代码] data: {[代码] [代码] },[代码] [代码] success: function[代码] [代码](res) {[代码] [代码] //默认打开声音[代码] [代码] that.setData({[代码] [代码] sound: true[代码] [代码] })[代码] [代码] plugin.setTextToSpeech(true)[代码] [代码] if[代码] [代码](res.data.isclear) {[代码] [代码] plugin.clearChatRecord()//清除聊天记录[代码] [代码] }[代码] [代码] that.setData({[代码] [代码] soundon: res.data.soundonimg,[代码] [代码] soundoff: res.data.soundoffimg,[代码] [代码] })[代码] [代码] plugin.setGuideList(res.data.guideList)//获取快捷语句[代码] [代码] plugin.setWelcome(res.data.welcome)[代码] [代码] plugin.setBackground(res.data.background)[代码] [代码] }[代码] [代码] })[代码] [代码] }, //非必填[代码] [代码] fail: error => { }, //非必填[代码] [代码] welcome: "欢迎语",[代码] [代码] background: "url('背景图片') no-repeat 50% 50%"[代码] [代码] });[代码] [代码] },[代码] [代码]})[代码] 说明： 1.引用插件界面外必须设置height,如果全屏就写height：100vh, 2.机器人的z-index属性是没设置的 ，所以这个就来了很多可以拓展的东西了，我们可以在机器人上面根据回答或者提问的问题弹出一些对话框，这里加入了语音播报开关，感觉这个插件应该自己就带一个的，这个感觉很实用的，没办法，插件没有就自己弄了一个。我们可以在回答回调函数中做自己的业务处理，比如跳转什么的，这里做了一个跳转人工客服的弹框，这个可以无限拓展哦，比如程序页面导航，根据回答语句后跳转页面，或做一些其他的事情 3.数据上报，这里就体现出填写OPENID的一些好处了，填写之后，回调函数会将openid返回，我们就可以根据OPENID，获取用户数据，分析用户的行为等等，这里只是做一些数据分析，看看用户提的那些问题多，然后增加相应功能，不要做非法用途哦！！ 步骤三，自定义问答（普通技能），核心功能 1.自定义文本图片回答 这个就不详细说了,玩过某爱或者某精灵的,基本会使 2.H5,小程序回答 这是个槽点,也许是还没有兼容把,写文章的时候还专门再测试了下,小程序中的机器人可以返回你给的H5卡片,和小程序卡片,就是打不看...哈哈,想着如果这个真能打开的话就有点变态了.....要知道小程序中打开网页可以是要往网站根目录放验证文件的,打开别的小程序更扯,必须提前注册,写死在代码里,非要同主体且还不能超过10个....这个要是真能打开就真的是,哈哈 不说了 估计是不可能了.其他像公众号或者企业微信的没有测试,如果您知道的话,希望可以留言回复一下,前人种树后人乘凉么 3.重点!!重点!!,函数回调, 这个算是我觉得这个功能是和其他某爱,某精灵竞争最大的卖点了,可以自定义接口,这个自定义可不是简简单单的3个字,没错是不用把他写在小程序合法域名里的,不用HTTPS的接口.....然后以返回值做逻辑运算........打住,你们要拿这个做坏事别说我告诉的.....没准哪天腾讯一个不高兴给这么好用的东西给封了......... 对于这个功能的自己的设想用途: 1.语音控制,执行复杂的逻辑运算,比如清理缓存,调取程序运行日志,或者給私人定制一些个性化的东西,只要的你服务器有的功能,都可以执行了,对于简化有重复操作的常用操作,都可以写成接口调用. 比如我像看看今天程序里有几个新用户注册,平常是不是还要打开网页登录密码.现在一条语音就够了,毕竟可以获取用户OPENID,也不怕信息泄露. 2.智能设备控制,不用再等着某爱某精灵退出的智能设备了,只要这个设备支持联网,我们自己写接口就能控制,而且是联网哦,最简单的设想,我们只要找一个可以网络控制的音响,然后说个某爱某精灵的启动语,远程控制不是梦...相信如果这个功能火了,以腾讯的以往行事作风,因该会出一些物联网的设备,这个可是没有品牌限制,可以网络操控的智能设备了,算是小程序转踏入物联网的一个里程碑般的功能了 3.实际应用: 这个其实也简单,就是填一个回调地址,就是你接口的地址,不过吐槽一下,这个技能的成功几率不敢恭维啊....我写了一下查新用户的接口,10次成功回调2次就已经不错了...这个没有返回或者回答为空,就是没有执行语句 也可以根据回答语句,在机器人回答回调函数中编写相应程序,用小程序本身的请求接口执行网络接口,这个是执行百百的成功率,就是失去了这个功能他本身的绝大多数意义了 PS:官方有一些内置的接口哦,比如实时汇率,快递查询,这些本是其他平台收费的接口,这个接口如果下功夫研究一下,其实就相当于免费调用了,嘿嘿,毕竟我们可以在回调接口里将接口回传到服务器.或者只调用插件的JS逻辑直接实现一些快递查询或实时汇率的程序判断了 步骤4:高级技能,带传参的多轮回调 到这里感觉篇幅有点长了,而且这个高级技能的教程就要好多,感觉需要连载了..如果感兴趣的同学可以关注一下连载的文章,下一篇会讲到多轮回答,追问回答,就是自带的成语接龙的开发模式,还有自助下单,自助购物,像官方的网上订票系统,我们可以客户语音下单购买商品并支付. 结束语: 新的功能么,BUG是很多,像官网上一个开发平台的使用文档和插件的文档好多都有冲突的地方,说是1.1.2版本之后都可以动态设置背景,欢迎语,欢迎图片,我用IOS的,不知道为什么不成功,官网上说需要 const chat = plugin.getChatComponent();
之后再调用,chat.send()方法和plugin.send()俩种方法都用过了,第一个不执行,第二个会执行,不过用户看不到,说是加个silence: false 这样前端就可以显示了,到现在没有调用成功,这个呢是解决一个问题,就是一次提问批量回答,比如我根据第一次的回答,静默发送一个提问,就会形成多次回答的效果了,用plugin.send()是调用成功了,可聊天记录了看不到.这个功能主要的目的是现在的回答就是单一的文字,图片,这样多次回答我可以文字图片一起回复.不知道为什么不行,或者是功能封禁了, 这是整理到的一些BUG,欢迎大家下方留言,说说你想用却又BUG的情况
