2021级山软项目实训(四)——前端设计(2)

目录

一、设计概述

二、图像

三、文字

四、语音

---

一、设计概述

        本blog将接续上篇，介绍我是如何编写 问答系统 数据交互部分代码的。

        这一部分将编写了 图像、文字、语音 三个部分的代码，所编写代码的效果如图1，这里都是“老生常谈”的代码，介绍起来没有太多意义，仅作展示。着重介绍我是如何编写交互部分的代码的。

图1 交互部分界面展示

二、图像

        若要上传图像，则需要调用相机，微信小程序提供了调用相机的代码，因此我们只需要在 “相机” 模块编写一个点击事件即可打开相机进行拍摄并上传图像数据，上传的图像数据后面会编写接口以便传递到后端作为数据交给大模型进行处理，这里暂没实现，不多赘述。代码如代码1所示。

  open_camera: function() {  
    wx.chooseImage({  
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['camera'], 
      success: function (res) {  
        const tempFilePaths = res.tempFilePaths;  
        console.log(tempFilePaths);  
      },  
      fail: function(err) {  
        console.error(err);  
      }  
    });  
  }, 

代码1 打开相机

三、文字

        点击“输入文字”组件会弹出交互窗口以便输入文字，很幸运，这一部分微信小程序又给提供了完整的模块，可以直接调用，我这里直接调用。输入的内容会判断是否为空，若不为空则会加上“flag”字段添加到上一篇blog中提到的dialogue数据中，并更新上方的对话框内容，代码如代码2所示，效果如图2和图3所示。

 /**弹窗输入文字 */
  enter_text(e) {
    wx.showModal({
      editable:true,//显示输入框
      placeholderText:'扣1夸小赵',//显示输入框提示信息
      success: res => {
        if (res.confirm && !res.content.replace(/\s+/g, '').length ==0) { //点击了确认
          console.log(res.content)//用户输入的值
          this.data.dialogue.push({"flag": 1, "content": res.content})
          this.setData({
            dialogue: this.data.dialogue
          })
        } else {
          console.log('用户点击了取消')
        }
      }
    })
  },

代码2 输入文字弹窗

图2 输入文字模块

图3 点击确认后更新对话框

四、语音

        调用语音进行录音并上传到微信服务器进行语音识别这一部分非常麻烦，首先需要完整注册一个微信小程序，并且申请语音识别模块，网上有很多教程，不过多赘述。

        我们需要编写多个函数，用以判断对语音组件的长按的开始和长按的结束，并在这中间进行录音，然后将录制的音频文件上传到微信服务器进行语音识别，将得到的语音识别字符串添加“flag”字段加入到dialogue数据中，并更新对话框。.wxml代码如代码3，.js文件如代码4。

  <view bindtouchstart="startLongPress" bindtouchmove="cancelLongPress" bindtouchend="endLongPress" class="voice">
    <image class="voice-image" src="/images/dialogue/voice.png"></image>
  </view>

代码3 语音识别模块

  startLongPress(e) {  
    console.log("start")
    if (this.data.isRecording) return; // 如果已经在录音，则不处理  
    this.setData({  
      isRecording: true,  
    });  
    this.longPressTimer = setTimeout(() => {  
      this.startRecord(); // 开始录音  
    }, 500); // 假设500毫秒后开始录音  
  },  
  // 取消长按（移动手指）  
  cancelLongPress(e) {  
    console.log("end")
    clearTimeout(this.longPressTimer);  
    this.setData({  
      isRecording: false,  
    });  
  },  
  // 结束长按  
  endLongPress(e) {  
    clearTimeout(this.longPressTimer);  
    if (!this.data.isRecording) return;  
    this.stopRecord(); // 停止录音并识别语音  
  },  
  // 开始录音  
  startRecord() {  
    console.log("start_record")
    const recorderManager = wx.getRecorderManager();  
    recorderManager.start({  
      success: res => {  
        console.log('开始录音');  
      },  
      fail: err => {  
        console.error('录音失败：', err);  
      }  
    });  
    recorderManager.onStop(this.recognizeVoice); // 监听录音结束事件  
  },  
  // 停止录音并识别语音  
  stopRecord() {  
    console.log("end_record")
    const recorderManager = wx.getRecorderManager();  
    recorderManager.stop();  
  },  
  // 识别语音  
  recognizeVoice(res) {  
    if (res.tempFilePath) {  
      // 这里使用微信小程序的语音识别API，注意需要用户授权  
      wx.translateVoice({
        localId: res.localId, 
        isShowProgressTips: 1, 
        success(res) {
          console.log('语音识别的结果'+res.translateResult);
          this.data.dialogue.push({"flag": 1, "content": res.translateResult})
          this.setData({
            dailogue: this.data.dialogue
          })
        },
        fail(err){
          console.log('识别失败',err)
        }
      })
    }  
  },  

代码4 语音识别函数