收藏
回答

语音识别后,怎么自动提交搜索框进行搜索?

在微信小程序中,我想做一个搜索功能,这个搜索功能支持语音输入,我想在语音输入后,直接调用输入框的提交函数,怎么操作?

(也就是按住语音,语音可以直接反馈到输入框,当前需要再去点击输入框的提交(或者软键盘)后,才能提交搜索。我想语音录入,反馈到输入框,立即自动搜索)

其中:

js代码:

const app = getApp()
//引入插件:微信同声传译
const plugin = requirePlugin('WechatSI');
//获取全局唯一的语音识别管理器recordRecoManager
const manager = plugin.getRecordRecognitionManager();
Page({
  data: {
    //语音
    recordStatefalse//录音状态
    content:'',//内容
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoadfunction (options{
    //识别语音
    this.initRecord();
  },
  //识别语音 -- 初始化
  initRecordfunction () {
    const that = this;
    // 有新的识别内容返回,则会调用此事件
    manager.onRecognize = function (res{
      console.log(res)
    }
    // 正常开始录音识别时会调用此事件
    manager.onStart = function (res{
      console.log("成功开始录音识别", res)
    }
    // 识别错误事件
    manager.onError = function (res{
      console.error("error msg", res)
    }
    //识别结束事件
    manager.onStop = function (res{
      console.log('..............结束录音')
      console.log('录音临时文件地址 -->' + res.tempFilePath); 
      console.log('录音总时长 -->' + res.duration + 'ms'); 
      console.log('文件大小 --> ' + res.fileSize + 'B');
      console.log('语音内容 --> ' + res.result);
      if (res.result == '') {
        wx.showModal({
          title'提示',
          content'听不清楚,请重新说一遍!',
          showCancelfalse,
          successfunction (res{}
        })
        return;
      }
      var text = res.result;
      text = text.replace(/\,|\。|\?|\,|\.|\?/g," ");
      that.setData({
        content: text
      })
      that.formSubmit();
    }
  },
  //语音  --按住说话
  touchStartfunction (e{
    this.setData({
      recordStatetrue,  //录音状态
      content:"正在聆听...",
    })
    // 语音开始识别
    manager.start({
      lang'zh_CN',// 识别的语言,目前支持zh_CN en_US zh_HK sichuanhua
    })
  },
  //语音  --松开结束
  touchEndfunction (e{
    this.setData({
      recordStatefalse
    })
    // 语音结束识别
    manager.stop();
  },





  //执行点击事件
  formSubmitfunction (e{
 
    //声明当天执行的
    var that = this;
    var formData = e.detail.value;


    //显示搜索中的提示
    wx.showLoading({
      title'搜索中',
      icon'loading'
    })
 
    //向搜索后端服务器发起请求
    wx.request({
 
      //URL
      url'https://XXX.com/search.php?keyword=' + formData,
 
      //发送的数据
      data: formData,
 
      //请求的数据时JSON格式
      header: {
        'Content-Type':'application/json'
      },
 
      //请求成功
      successfunction (res{
 
        //控制台打印(开发调试用)
        console.log(res.data)
 
        //把所有结果存进一个名为re的数组
        that.setData({
          re: res.data,
        })
 
        //搜索成功后,隐藏搜索中的提示
        wx.hideLoading();
      }
    })
  },
    // 获取滚动条当前位置
    onPageScrollfunction (e{
      console.log(e)
      if (e.scrollTop > 100) {
        this.setData({
          floorstatustrue
        });
      } else {
        this.setData({
          floorstatusfalse
        });
      }
    },
  
    //回到顶部
    goTopfunction (e{  // 一键回到顶部
      if (wx.pageScrollTo) {
        wx.pageScrollTo({
          scrollTop0
        })
      } else {
        wx.showModal({
          title'提示',
          content'当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
        })
      }
    },
  
})



wxml部分代码(部分)

<form bindsubmit="formSubmit">
    <input type="text" value="{{content}}" class="search_input" placeholder='你要找什么呢?' bindconfirm="formSubmit"/> 
  </form>
  <view class="button-z">
    <button class="btn1" bindtouchstart="touchStart" bindtouchend="touchEnd">
    <image src='../../images/icon/yys.png' class='btnImg'></image>
       <text wx:if="{{recordState == false}}"></text>
       <text wx:else></text>


    </button>
  </view>
  <cover-view class="startYuyinImage" wx:if="{{recordState == true}}">
    <cover-image src="../../images/icon/yyn.png"></cover-image>
    <cover-view>开始语音</cover-view>
  </cover-view>


</view>


js我是用 that.formSubmit();调用的提交函数,但是报错:



如果改成:

this.formSubmit();


则报错:

最后一次编辑于  2020-06-23
回答关注问题邀请回答
收藏

4 个回答

  • 团团呗
    团团呗
    2020-06-23
    that.formSubmit();
    调用这个函数并没有传值,
    函数中取的e.detail.value是哪里来的?
    


    2020-06-23
    有用
    回复 19
    • Jcl
      Jcl
      2020-06-23
      对!不知道怎么传递。
      2020-06-23
      回复
    • 团团呗
      团团呗
      2020-06-23回复Jcl
      改一下就行了,需要formData,就new FormData()生成传过去就好了
      2020-06-23
      回复
    • Jcl
      Jcl
      2020-06-23回复团团呗
      能说说怎么改吗?我是新手。。
      2020-06-23
      回复
    • 团团呗
      团团呗
      2020-06-23回复Jcl
      2020-06-23
      回复
    • 醉酒浓
      醉酒浓
      2020-06-23回复团团呗
      现在还没到那步,现在直接是formDtate    not a function,而且formData里也不一定要传值,你上面不是定义了content吗,that.data.content
      2020-06-23
      回复
    查看更多(14)
  • 醉酒浓
    醉酒浓
    2020-06-23

    2020-06-23
    有用
    回复 1
    • Jcl
      Jcl
      2020-06-23
      这个试过了,没用
      2020-06-23
      回复
  • 八九
    八九
    2020-06-23

    换成this试试

    2020-06-23
    有用
    回复 4
    • Jcl
      Jcl
      2020-06-23
      你好,这个试过了,无法使用。
      2020-06-23
      回复
    • 八九
      八九
      2020-06-24回复Jcl
      formSubmit 这个方法 你打印下E看下 没东西把
      2020-06-24
      1
      回复
    • Jcl
      Jcl
      2020-06-24回复八九
      对,但是这个上面回复已经解决了,谢谢您的关注。
      2020-06-24
      回复
    • 八九
      八九
      2020-06-24回复Jcl
      好呢
      2020-06-24
      回复
  • Jcl
    Jcl
    2020-06-23

    js代码中的这句:

      that.formSubmit();
    

    不知道错在哪里。

    2020-06-23
    有用
    回复 2
    • 陈
      2020-06-23
      之前那个声明的是局部变量,用this或再次声明一下
      2020-06-23
      回复
    • 团团呗
      团团呗
      2020-06-23
      你没有传值,e.detail.value取不到就报错了
      2020-06-23
      回复
登录 后发表内容
问题标签