“智能聊”：微信小程序详解

这次是1.0版本的更新，整体设计请参考上一篇文章：
手把手教你做自然语言理解智能对话的微信小程序【核心源码】

本次更新内容：
1.键盘输入框和语音输入的切换
2.语音输入图标

扫码体验（小程序名：智能聊）

更新之后的界面：

录音中

废话不多说，直接上代码：

index.wxml

<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 class="showAuthor weui-footer weui-footer__text"><view id="rollend" class="olamicontent">语义解析技术由OLAMI提供</view><view class="author" bindtap="contactMe">联系作者</view></view><form bindsubmit="sendChat"><view class="ask-input-word"><image class="text-video-img" src="/res/image/speak.png" hidden="{{keyboard}}" bindtap="switchInputType"></image><image class="text-video-img" src="/res/image/keyboard.png" hidden="{{!keyboard}}" bindtap="switchInputType"></image><input class="input-big" hidden="{{keyboard}}" focus="{{!keyboard}}" placeholder="" confirm-type="send" name="ask_word" type="text" bindconfirm="sendChat" bindinput="Typing" value="{{askWord}}" /><button hidden="{{!keyboard}}" bindtouchstart="touchdown" bindtouchend="touchup">按住 说话</button></view></form>
</view>
<image class="speaker" hidden="{{!isSpeaking}}" src="{{speakerUrl}}"></image>

使用keyboard来控制文本框和语音输入的切换，最后的image是语音输入时的图标。

JS控制代码

index.js（部分代码）

......(省略部分代码)// 切换语音输入和文字输入switchInputType:function(){this.setData({keyboard: !(this.data.keyboard),})},// 按钮按下touchdown:function(){this.setData({isSpeaking : true,})that.speaking.call();console.log("[Console log]:Touch down!Start recording!");// 开始录音wx.startRecord({'success':function(res){var tempFilePath = res.tempFilePath;that.data.filePath = tempFilePath;console.log("[Console log]:Record success!File path:" + tempFilePath);that.voiceToChar();},'fail':function(){console.log("[Console log]:Record failed!");wx.showModal({title: '录音失败',content:'换根手指再试一次！',showCancel: false,confirmText: '确定',confirmColor: '#09BB07',})},});},// 按钮松开touchup:function(){wx.stopRecord();console.log("[Console log]:Touch up!Stop recording!");this.setData({isSpeaking: false,speakerUrl: '/res/image/speaker0.png',})clearInterval(that.speakerInterval);},// 语音转文字voiceToChar:function(){var urls = app.globalData.slikToCharUrl;var voiceFilePath = that.data.filePath;if(voiceFilePath == null){console.log("[Console log]:File path do not exist!");wx.showModal({title: '录音文件不存在',content: '我也不知道哪错了，反正你就再试一次吧！',showCancel: false,confirmText: '确定',confirmColor: '#09BB07',})return;}var appkey = app.globalData.NLPAppkey;var appsecret = app.globalData.NLPAppSecret;var NLPCusid = app.globalData.NLPCusid;wx.showLoading({title: '语音识别中...',})// 语音识别wx.uploadFile({url: urls,filePath: voiceFilePath,name: 'file',formData: { "appKey": appkey, "appSecret": appsecret, "userId": NLPCusid },header: { 'content-type': 'multipart/form-data' },success: function (res) {wx.hideLoading();var data = JSON.parse(res.data);var seg = JSON.parse(data.result).seg;console.log("[Console log]:Voice to char:" + seg);if(seg == null || seg.length == 0){wx.showModal({title: '录音识别失败',content: "我什么都没听到，你再说一遍！",showCancel: false,success: function (res) {}});return;}that.addChat(seg, 'r');console.log("[Console log]:Add user voice input to chat list");that.sendRequest(seg);return;},fail: function (res) {console.log("[Console log]:Voice upload failed:" + res.errMsg);wx.hideLoading();wx.showModal({title: '录音识别失败',content: "请你离WIFI近一点再试一次！",showCancel: false,success: function (res) {}});}});},// 联系作者contactMe:function(){if(that.data.contactFlag){// 语义平台自定义回复，有问题可以联系博主// 此处也可以调用addChat直接添加回复。that.sendRequest("");}else{wx.showModal({title: '提示',content: '你都点过了，还点干嘛！！',showCancel:false,});}that.data.contactFlag = false;},// 麦克风帧动画 speaking:function() {// 话筒帧动画 var i = 0;that.speakerInterval = setInterval(function () {i++;i = i % 7;that.setData({speakerUrl: that.data.speakerUrlPrefix + i + that.data.speakerUrlSuffix,});console.log("[Console log]:Speaker image changing...");}, 300);}
......(省略部分代码)

上面代码略有更改，最近更新到了微信官方的语音插件，因为逻辑都是一致的，只是语音识别调用的接口不一样，所以博客中的代码也就没有更新。

如有任何问题可以联系博主。