微信小程序语音聊天智能对话（源码分享） - 火山的博客 - CSDN博客
微信小程序语音聊天智能对话（源码分享）
自然语言处理
“智能聊”：微信小程序详解
这次是1.0版本的更新，整体设计请参考上一篇文章：
本次更新内容：
1.键盘输入框和语音输入的切换
2.语音输入图标
扫码体验（小程序名：智能聊）
本次更新之后的源码：
更新之后的界面：
废话不多说，直接上代码：
index.wxml
class="container"&
class="scrool-view" scroll-y="true" scroll-with-animation="true" scroll-into-view="{{scrolltop}} enable-back-to-top="true"&
class="chat-list"&
wx:for="{{chatList}} wx:key="time"&
id="roll{{index + 1}} class="chat-left" wx:if="{{item.orientation == 'l'}}&
class="avatar-img" src="/res/image/chat_logo.png"&&
&{{item.text}}&
class="avatar-img"&&
id="roll{{index + 1}} class="chat-right" wx:if="{{item.orientation == 'r'}}&
class="avatar-img"&&
&{{item.text}}{{item.url}}&
class="avatar-img" src="{{userLogoUrl}}&&
class="showAuthor weui-footer weui-footer__text"& id="rollend" class="olamicontent"&语义解析技术由OLAMI提供& class="author" bindtap="contactMe"&联系作者&&
bindsubmit="sendChat"&
class="ask-input-word"&
class="text-video-img" src="/res/image/speak.png" hidden="{{keyboard}} bindtap="switchInputType"&&
class="text-video-img" src="/res/image/keyboard.png" hidden="{{!keyboard}} bindtap="switchInputType"&&
class="input-big" hidden="{{keyboard}} focus="{{!keyboard}} placeholder="" confirm-type="send" name="ask_word" type="text" bindconfirm="sendChat" bindinput="Typing" value="{{askWord}} /&
hidden="{{!keyboard}} bindtouchstart="touchdown" bindtouchend="touchup"&按住 说话&
class="speaker" hidden="{{!isSpeaking}} src="{{speakerUrl}}&&
使用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.tempFileP
that.data.filePath = tempFileP
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.slikToCharU
var voiceFilePath = that.data.fileP
if(voiceFilePath == null){
console.log("[Console log]:File path do not exist!");
wx.showModal({
title: '录音文件不存在',
content: '我也不知道哪错了，反正你就再试一次吧！',
showCancel: false,
confirmText: '确定',
confirmColor: '#09BB07',
var appkey = app.globalData.NLPA
var appsecret = app.globalData.NLPAppS
var NLPCusid = app.globalData.NLPC
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).
console.log("[Console log]:Voice to char:" + seg);
if(seg == null || seg.length == 0){
wx.showModal({
title: '录音识别失败',
content: "我什么都没听到，你再说一遍！",
showCancel: false,
success: function (res) {
that.addChat(seg, 'r');
console.log("[Console log]:Add user voice input to chat list");
that.sendRequest(seg);
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){
that.sendRequest("");
wx.showModal({
title: '提示',
content: '你都点过了，还点干嘛！！',
showCancel:false,
that.data.contactFlag = false;
speaking:function() {
var i = 0;
that.speakerInterval = setInterval(function () {
i = i % 7;
that.setData({
speakerUrl: that.data.speakerUrlPrefix + i + that.data.speakerUrlSuffix,
console.log("[Console log]:Speaker image changing...");
......(省略部分代码)
本次更新的语音识别的功能由搭建的服务器提供的，具体的搭建过程可以参考博客
如有任何问题可以联系博主。
我的热门文章微信小程序中input标签详解及简单实例
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了微信小程序中input标签详解及简单实例的相关资料,需要的朋友可以参考下
微信小程序中input标签详解及简单实例
使用input标签，我们都会，在微信小程序中使用，必定也是可以一下子就会的，但是却有些常用的属性无法按照习惯去使用：
我就用我最常用的来做例子：
一个一个来解读：
首先，我是定义了他的id，这是我们最常用的，所以就配了一个id，毕竟不操作他，又为什么设成输入框呢，
第二，设置他的样式，
第三，设置他的输入类别，以上都是很简单的
第四。使用正则l；哎限定输入为纯数字。这点可能有点不理解，这是对他的keyup事件监听，将不是纯数字的list无视掉。注意，是对整个，不是经行筛选。
第五，限制他的输入最多6位数
第六输入事件监听。这是微信专属的，他的事件下面会给出
第七，设置当输入框为空的时候他的‘提示语'；
bindinput事件：
bind，顾名思义是绑定，绑定input输入
事件如下：
tapevent:function(e){
// 减少的时候
if (e.target.id =="increase"){
this.data.tickets++;
this.setData(this.data);
this.data.tickets--;
this.setData(this.data);
// 在这里修改总额
这是节选，所以先不要好奇怎么运行到这一段的，看得出来。tapevent被定义为一个function。并且在这经行操作，感觉微信跟Android差不多。都是靠刷新页面来的。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具微信小程序
modal详解及实例代码
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了微信小程序
modal详解及实例代码的相关资料,需要的朋友可以参考下
微信小程序 开发文档，相关文章：
微信小程序 modal
是否隐藏整个弹窗
是否隐藏cancel按钮
confirm-text
confirm按钮文字
cancel-text
cancel按钮文字
bindconfirm
EventHandle
点击确认触发的回调
bindcancel
EventHandle
点击取消以及蒙层触发的回调
&modal title="标题" confirm-text="confirm" cancel-text="cancel" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange"&
这是对话框的内容。
&modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2"&
&view& 没有标题没有蒙层没有确定的modal &/view&
&view& 内容可以插入节点 &/view&
&view class="btn-area"&
&button type="default" bindtap="modalTap"&点击弹出modal&/button&
&button type="default" bindtap="modalTap2"&点击弹出modal2&/button&
modalHidden: true,
modalHidden2: true
modalTap: function(e) {
this.setData({
modalHidden: false
modalChange: function(e) {
this.setData({
modalHidden: true
modalTap2: function(e) {
this.setData({
modalHidden2: false
modalChange2: function(e) {
this.setData({
modalHidden2: true
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具