闲聊-智能对话：微信小程序详解

重要提醒：第三方私人语音接口已关闭，现已更新至官方语音接口，如有问题请联系博主

重要更新！！！！

现在“智能聊”小程序支持语音输入了！！！！！
完整代码请参考下面这篇文章！！
微信小程序语音聊天智能对话（核心源码）

======================
本文原地址：http://blog.csdn.net/u011211290/article/details/77247674

公用App Key：80ccf2fdeba243f49c014af42f571e25
公用App Secret：22cd5040b9d347f2b338eeb46f1770be
（把公用的Key和Secret放到app.js中的globalData中）
重要提醒：第三方私人语音接口已关闭，现已更新至官方语音接口，如有问题请联系博主

重要说明：如果需要自定义语法需要按照下面的提示去新建账号
源码请联系作者，小程序中有客服按钮哦

小程序名：智能聊

微信扫一扫就可以打开。

这段时间开发了一个智能对话的微信小程序，下面就把这个介绍一下。
0.介绍

界面：

对话：

功能：目前支持闲聊，问时间，问天气，算24点，单位换算，汇率查询，邮政编码，笑话，故事，算数功能。
说明：这些功能可以在语义后台单独添加，不需要更新微信小程序。

1.智能对话接口

首先是对话的接口，用的是OLAMI的接口，可以自己定义需要的对话，也有系统提供的对话模块。
对话模块定义好之后，查看API文档，将对话通过API发送之后就可以得到回答。

API调用代码：用来发送语义的API请求。

  NLIRequest:function(corpus,arg) { // corpus是要发送的对话；arg是回调方法var that = this;// appkeyvar appkey = that.globalData.NLPAppkey;// appsecretvar appSecret = that.globalData.NLPAppSecret;var api = "nli";var timestamp = new Date().getTime();// MD5签名var sign = MD5.md5(appSecret + "api=" + api + "appkey=" + appkey + "timestamp=" + timestamp + appSecret);var rqJson = { "data": { "input_type": 1, "text": corpus }, "data_type": "stt" };var rq = JSON.stringify(rqJson);var nliUrl = that.globalData.NLPUrl;// cusid是用来实现上下文的，可以自己随意定义内容，要够长够随机var cusid = that.globalData.NLPCusid;console.log("[Console log]:NLIRequest(),URL:" + nliUrl);wx.request({url: nliUrl,data: {appkey: appkey,api: api,timestamp: timestamp,sign: sign,rq: rq,cusid: cusid,},header: { 'content-type': 'application/x-www-form-urlencoded' },method: 'POST',success: function (res) {var resData = res.data;console.log("[Console log]:NLIRequest() success...");console.log("[Console log]:Result:");console.log(resData);var nli = JSON.stringify(resData);// 回调函数，解析数据typeof arg.success == "function" && arg.success(nli);},fail: function (res) {console.log("[Console log]:NLIRequest() failed...");console.error("[Console log]:Error Message:" + res.errMsg);typeof arg.fail == "function" && arg.fail();},complete: function () {console.log("[Console log]:NLIRequest() complete...");typeof arg.complete == "function" && arg.complete();}})}

随机生成设备识别码（识别码用来支持语义中的上下文，每个客户端需要不同的识别码用来识别设备，准确的说是区分客户端）

  // onLaunch()函数，小程序生存周期内只调用一次。onLaunch: function () {//调用API从本地缓存中获取数据var logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 如果cusid(设备识别码)不存在或者长度小于20,，则重新生成。var cusid = this.globalData.NLPCusid;if (cusid == null || cusid.length < 20){this.setCusid();}},// cusid生成函数setCusid:function(){// 大小写字母和数字var str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"// 生成30位随机字符串var cusidLength = 30,cusid = '';for(var i = 0; i < cusidLength; i++){var oneStr = str.charAt(Math.floor(Math.random() * str.length));cusid += oneStr;}this.globalData.NLPCusid = cusid;console.log("[Console log]:New cusid:" + cusid);}

2.对话内容显示

前端显示代码：用的是scroll-view的标签，里面循环输出对话列表，用位置信息标记是用户输入还是系统对话，使用scroll-into-view来滚动到最新的位置。

<view class="container"><scroll-view class="scrool-view" scroll-y="true" scroll-with-animation="true" scroll-into-view="{{scrolltop}}" enable-back-to-top="true"><view class="chat-list"><block wx:for="{{chatList}}" wx:key="time"><view id="roll{{index + 1}}" class="chat-left" wx:if="{{item.orientation == 'l'}}"><image class="avatar-img" src="/res/image/chat_logo.png"></image><text>{{item.text}}</text><image class="avatar-img"></image></view><view id="roll{{index + 1}}" class="chat-right" wx:if="{{item.orientation == 'r'}}"><image class="avatar-img"></image><text>{{item.text}}{{item.url}}</text><image class="avatar-img" src="{{userLogoUrl}}"></image></view></block></view></scroll-view><view id="rollend" class="weui-footer weui-footer__text">语义解析技术由OLAMI提供</view><form bindsubmit="sendChat"><view class="ask-input-word"><input class="input-big" placeholder="" name="ask_word" type="text" bindconfirm="sendChat" bindinput="Typing" value="{{askWord}}" /><button formType="submit" size="mini" disabled="{{sendButtDisable}}">发送</button></view></form>
</view>

【1】scroll-into-view="{{scrolltop}}"是将对话滚动到最新位置，在js中把最新的id赋给scrolltop，页面会自动滚动到指定位置。
【2】chatList存储对话内容，循环渲染对话框。orientation是左右位置，左边是答案，右边是用户输入。
【3】userLogoUrl是用户头像的url，如果用户不授权使用用户公开信息，则使用默认的用户头像。

其他控制代码

index.js：主要用来控制页面的动态显示和需要的网络请求发送。

var app = getApp();
var that;
var chatListData = [];Page({data: {// 自定义欢迎语的语料(界面加载时调用API，通过语义后台定义的回答，返回内容，后面会有语义平台的配置。)defaultCorpus:'你都会什么',// 用户输入askWord: '',// 发送按钮disablesendButtDisable:true,// 用户信息userInfo: {},// 对话信息chatList: [],// 对话滚动标志scrolltop:'',// 用户Logo，如果用户不授权，则使用默认图像userLogoUrl:'/res/image/user_default.png',},onLoad: function () {that = this;// 取得用户信息，把用户头像放入用户Logo中app.getUserInfo(function (userInfo) {var aUrl = userInfo.avatarUrl;if(aUrl != null){that.setData({userLogoUrl: aUrl});}});// 自定义欢迎语this.sendRequest(this.data.defaultCorpus);},onReady: function () {},// 监听用户输入Typing:function(e){var inputVal = e.detail.value;var buttDis = true;if(inputVal.length != 0){var buttDis = false;}that.setData({sendButtDisable: buttDis,})},// 调用语义接口sendChat: function (e) {let word = e.detail.value.ask_word ? e.detail.value.ask_word : e.detail.value;that.addChat(word, 'r');that.setData({askWord: '',sendButtDisable: true,});// 请求函数that.sendRequest(word);},// 发送网络请求sendRequest(corpus){app.NLIRequest(corpus, {'success': function (res) {if (res.status == "error") {wx.showToast({title: '返回数据有误！',})return;}that.NLIProcess(res);},'fail': function (res) {wx.showToast({title: '请求失败！',})return;}}); },// 处理语义（拿到回答）NLIProcess: function(res){var nlires = JSON.parse(res);var nliArray = nlires.data.nli;if(nliArray.length == 0){wx.showToast({title: '返回数据有误！',})return;}var answer = nliArray[0].desc_obj.result;if(answer == null){wx.showToast({title: '返回数据有误！',})return;}// 增加回答that.addChat(answer, 'l');var dataArray = nliArray[0].data_obj;// 对特殊信息处理，比如新闻中除了回答还有返回的新闻信息if(dataArray != null && dataArray.length > 0){var objType = nliArray[0].type;// 对选择数据进行显示if(objType == 'selection' && dataArray.length > 1){that.newsProcess(dataArray);return;}// 对新闻单独处理if (objType == 'news' && dataArray.length == 1) {var title = dataArray[0].title;var detail = dataArray[0].detail;var news = title + "\n" + detail; that.addChat(news, 'l');return;}// 如果有其他回答，也进行输出var content = dataArray[0].content;if (content != null && content != answer){that.addChat(content, 'l');}}return;},// 新闻选择数据显示newsProcess(selectionArray){for(var i = 0; i < selectionArray.length; i++){var title = selectionArray[i].title;var detail = selectionArray[i].detail;var selectiondetail = "[第" + (i+1) + "条]:" + title + "\n" + detail;that.addChatWithFlag(selectiondetail, 'l',false);}},// 显示回答，并滚动到最新位置addChat: function (word, orientation) {that.addChatWithFlag(word, orientation,true);},// 显示回答并选择是否滚动到最新位置(true为是，false为否)addChatWithFlag: function (word, orientation, scrolltopFlag){let ch = { 'text': word, 'time': new Date().getTime(), 'orientation': orientation };chatListData.push(ch);var charlenght = chatListData.length;if (scrolltopFlag){that.setData({chatList: chatListData,scrolltop: "roll" + charlenght,});}else{that.setData({chatList: chatListData,});}}
})

index.js中的代码是前端的显示逻辑，关于语义处理的部分，因为不同的类型可能返回的数据是不一致的，所以需要针对内容进行特殊处理，就比如“新闻”，因为新闻数据是一个数组，所以需要对其进行循环处理显示。

语义平台配置(index.js中自定义欢迎语)

a.注册并登陆首页，点击账号并进入 应用管理 。

b.新建模块并进入模块

c.新建grammar和定义回答

d.发布
在发布标签页中点击“发布”，使得编写的语法生效

e.配置
在应用管理中把新建的模块勾选，即可生效。（NLI模块为自定义，对话系统模块为系统提供）

完成配置之后，就可以更新语法配置来更新欢迎语，不需要更新代码。
最后

总体来说，页面比较简单，但是调整一些内容会比较繁琐。发送按钮的文字目前在开发工具中没有问题，但是在手机上显示会不居中。

公用App Key：80ccf2fdeba243f49c014af42f571e25
公用App Secret：22cd5040b9d347f2b338eeb46f1770be
重要说明：如果需要自定义语法需要按照上面的提示去新建账号
源码请联系作者，或者小程序中点击客服按钮也可联系到我

另：写文章不易，感谢打赏！
微信：支付宝：

其他博客：
自然语言处理-实际开发:用语义开放平台olami写一个翻译的应用

微信小程序IOS端showLoading之后showToast不显示

“欢快”的小程序开发之路

优秀自然语言理解博客文章推荐：

根据OLAMI平台开发的日历Demo

用olami开放语义平台做汇率换算应用

自然语言处理-实际开发:用语义开放平台olami写一个翻译的应用

自定义java.awt.Canvas—趣味聊天

微信小程序+OLAMI自然语言API接口制作智能查询工具–快递、聊天、日历等

热门自然语言理解和语音API开发平台对比

使用OLAMI SDK和讯飞语音合成制作一个语音回复的短信小助手

告诉你如何使用OLAMI自然语言理解开放平台API制作自己的智能对话助手

微信小程序——智能小秘“遥知之”源码分享（语义理解基于olami）

在unity游戏中使用olami实现语音控制

推荐自然语言理解爱好者博客：

http://blog.csdn.net/huangmeimao

http://blog.csdn.net/u011211290

http://blog.csdn.net/u011827504

http://blog.csdn.net/xinfinityx

http://blog.csdn.net/speeds3

http://blog.csdn.net/happycxz

手把手教你做自然语言理解智能对话的微信小程序【核心源码】相关推荐

手把手教你如何结合腾讯云开发微信小程序
目前,微信小程序越来越流行,而且功能越来越强大,在性能方面也越做越好.因为能够原生调用小程序提供的组件和 API ,小程序的开发快捷,使用方便,越来越多的产品会落地到微信小程序上.但传统的微信小程序开 ...
chatgpt智能问答微信小程序+后端源码+视频搭建教程
chatgpt智能问答微信小程序+后端源码+视频搭建教程,这是一套微信小程序,后端是thinkphp框架为接口的,后端是前后端分离用elmentUI的源码框架. 小狐狸GPT付费体验系统是一款基于Th ...
AI智能配音助手微信小程序源码支持多种声音场景选择
大家好今天给大家带来一款配音小程序这款小程序支持多种不同声音和场景的选择更人性化比如说支持各地区的方言,英文,童声呀等等另外也支持男声女声的选择,反正就是模板那些非常的多当然啦音量,语调,语速 ...
小程序源码：AI智能配音助手微信小程序源码支持多种声音场景选择
大家好今天给大家带来一款配音小程序这款小程序支持多种不同声音和场景的选择更人性化比如说支持各地区的方言,英文,童声呀等等另外也支持男声女声的选择,反正就是模板那些非常的多当然啦音量,语调,语速 ...
手把手教你Nodejs获取微信小程序二维码
[小程序二维码和普通二维码] 下图左为小程序码,右为普通二维码, 普通二维码的生成比较简单,只用jquery就可以生成,详见:https://blog.csdn.net/uikoo9/article/ ...
java反编译微信小程序_教你如何一键反编译获取任何微信小程序源代码（图形化界面，傻瓜式操作）...
一键获取微信小程序源代码 1 Tips:2 一键获取微信小程序源码, 使用了C#加nodejs制作直接解压在D盘根目录下后就可以使用将小程序文件放到 wxapkg目录下 3 这个目录下有一些dem ...
python arduino 微信_MicroPython动手做（27）——物联网之微信小程序
#MicroPython动手做(27)--物联网之微信小程序 #通过小程序控制小车进.退.左和右 [mw_shl_code=python,true]#MicroPython动手做(27)--物联网之微 ...
基于ESP32的智能家居控制系统-微信小程序
一. 课题研究意义.现状及应用分析 1.1课题研究意义及现状目前,科学技术发展十分迅速,其渗透到各行各业以及生活的方方面面,室内设计和高科技结合便出现了"智能家居".所谓智能家居 ...
微信小程序做店铺收费吗？【微信小程序店铺】
很多商家企业现在都已经有自己的微信小程序店铺了,还没有的微信小程序店铺的商家企业也是计划开通自己的微信小程序店铺,那么对于他们来说,除了要知道怎么做微信小程序店铺,还需要了解微信小程序做店铺收费吗这个 ...

手把手教你做自然语言理解智能对话的微信小程序【核心源码】

闲聊-智能对话：微信小程序详解

重要提醒：第三方私人语音接口已关闭，现已更新至官方语音接口，如有问题请联系博主

重要更新！！！！

这段时间开发了一个智能对话的微信小程序，下面就把这个介绍一下。
0.介绍

1.智能对话接口

2.对话内容显示

完成配置之后，就可以更新语法配置来更新欢迎语，不需要更新代码。
最后

手把手教你做自然语言理解智能对话的微信小程序【核心源码】相关推荐

最新文章

热门文章

手把手教你做自然语言理解智能对话的微信小程序【核心源码】

闲聊-智能对话：微信小程序详解

重要提醒：第三方私人语音接口已关闭，现已更新至官方语音接口，如有问题请联系博主

重要更新！！！！

这段时间开发了一个智能对话的微信小程序，下面就把这个介绍一下。 0.介绍

1.智能对话接口

2.对话内容显示

完成配置之后，就可以更新语法配置来更新欢迎语，不需要更新代码。 最后

手把手教你做自然语言理解智能对话的微信小程序【核心源码】相关推荐

最新文章

热门文章

这段时间开发了一个智能对话的微信小程序，下面就把这个介绍一下。
0.介绍

完成配置之后，就可以更新语法配置来更新欢迎语，不需要更新代码。
最后