官方文件必須首當其衝

1.微信jsAPI 錄音文件

2.獲取微信臨時素材文件

首先H5錄音功能的話 對於普通H5網上是有很多的方法 外掛 但是相容性很差 特別是對於ios 一開始想的是用H5 做個通用的 但是一圈下來 發現相容性就很難受

好在專案是基於微信公眾號 放棄使用普通H5的想法 轉戰使用微信提供的 JSAPI 錄音功能 一下子解決了相容的問題 微信已經幫忙處理完畢

接下來說一下 注意事項

在使用微信提供的錄音功能前

1.首先的是進入微信公眾號後臺 公眾號設定的功能設定裡填寫“JS介面安全域名” 一定要記得

2.先引入微信JS 簡單的

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> //（https://res.wx.qq.com/open/js/jweixin-1.6.0.js）

3.註冊微信配置 使用wx.config() 將要使用的api 填寫到jsApiList裡面 要記得

注意：簽名問題 一是服務端演算法問題 二是前端當前地址和請求的地址不同 也會出現簽名錯誤 關於簽名問題 其他文章也有說明產生的原因

錄音功能 不是立即使用 所以 只需檢測是否配置環境成功即可 wx.ready()..等回撥方法

.js 配置註冊微信環境程式碼示例

export async function wechatSharefund (columnInfo) {
  const data = await wechatConfig(location.href.split('#')[0]) //
 
 返回的微信資訊
  console.log(data)
  if (data.code === 0) {
    // 註冊
    wx.config({
      debug: false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
      appId: data.data.appId, // 必填，公眾號的唯一標識
      timestamp: data.data.timestamp, // 必填，生成簽名的時間戳
      nonceStr: data.data.nonceStr, //
 
 必填，生成簽名的隨機串
      signature: data.data.signature, // 必填，簽名
      jsApiList: [
        'updateAppMessageShareData',
        'updateTimelineShareData',
        'startRecord',
        'stopRecord',
        'playVoice',
        'onVoiceRecordEnd',
        'uploadVoice',
        'onVoicePlayEnd',
        'downloadVoice'
      ] // 必填，需要使用的JS介面列表
    })
    // 是否成功
    wx.ready(function(res) {
      console.log([res, 90])
      wx.updateAppMessageShareData({ 
        title: '我是自定義首頁！！！！！好友' + store.getters.doctorId,
        desc: '自定義描述', // 分享描述
        link: 'https://doctor.taiori.com/doctor/hospitalIndex?userParam=' + store.getters.doctorId,
        imgUrl: '', // 分享圖示
        success: function () {
          // 設定成功
        }
      })
      wx.updateTimelineShareData({
        title: "我是自定義首頁！！圈" + store.getters.doctorId,
        link: 'https://doctor.taiori.com/doctor/hospitalIndex?userParam=' + store.getters.doctorId,
        imgUrl: '',
        success: function() {
        }
      });
      
    });
    // 是否支援指定JS介面
    wx.checkJsApi({
      jsApiList: ['startRecord'], // 需要檢測的JS介面列表，所有JS介面列表見附錄2,
      success: function (res) {
      console.log([res, '114'])
      store.commit('jsApiList', res)
      // 以鍵值對的形式返回，可用的api值true，不可用為false
      // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
      }
    })
    wx.error(function(res){
      console.log(res)
    })
  }

在使用的地方 引入.j檔案

import { wechatSharefund } from '.js'
mounted () {
  wechatSharefund()
}

使用簡單的

   touchstart () {
      console.log('開始錄音')
      if (this.localId) {
        return
      }
      let that = this
      wx.startRecord({
        success: function(e){
            // 開始錄音的程式碼處理
        },
        cancel: function (e) {
            console.log(e)
        }
      })
    },
    touchend () {
      console.log('結束錄音')
      if (this.localId) {
        return
      }
      let that = this
      clearInterval(this.timer)
      wx.stopRecord({
        success: function (res) {
          // 結束後的程式碼處理
        }
      })
    }

最後 會涉及到 保存錄音 及 上傳到自己伺服器動作 簡單的 使用相對於的API

微信臨時素材返回的是speex檔案 需要解碼成想要的播放MAP3或者wav 前端可直接播放的連結 解碼微信有提供方法

uploadVoice() {
                let that = this
                // 上傳到微信為臨時素材
                wx.uploadVoice({
                    localId: this.localId, // 需要上傳的音訊的本地ID，由stopRecord介面獲得
                    isShowProgressTips: 1, // 預設為1，顯示進度提示
                    success: function (res) {
                        // 獲得微信服務端音訊ID
                        var serverId = res.serverId; // 返回音訊的伺服器端ID
                        console.log(res)
                         // 服務端提供介面 傳遞 音訊ID 由服務端處理從微信服務端下載臨時素材 存為自己的伺服器連結 
                        // http請求方式: GET,https呼叫 https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID 請求示例（示例為通過curl命令獲取多媒體檔案） 
                        // curl -I -G "https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID"
                        // $.ajax({
                        //     url: 'https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID', // 服務端提供的介面連結
                        //     type: 'GET',
                        //     dataType: "json",
                        //     success: function (data) {
                        //         alert('檔案已經儲存到自己的伺服器');
                        //     },
                        //     error: function (xhr, errorType, error) {
                        //         console.log(error);
                        //     }
                        // });

                    }
                });
            }