我使用同聲傳譯語音識別功能是為了實現微信小程序首頁的語音搜索功能，如果你也是那么恭喜你，你可以ctrl+c、ctrl+v再改一改，如果你不是那么你也不要着急的走可以看完我的文章會對你有所幫助！
首先是在微信公眾平台（也就是小程序的后台），在左側菜單欄中的設置-->第三方設置下的插件管理-->添加-->搜索同聲傳譯-->點擊添加
接下來就是在代碼中進行添加一些設置。
如果你是使用微信開發者工具進行開發小程序的話，需要在app.json文件中添加一下代碼。
1 // app.json
2 {
3 ... 4 "plugins": { 5 ... 6 "WechatSI": { 7 "version": "0.3.4", // 這是同聲傳譯的版本（也可以在微信公眾平台添加的同聲傳譯查看最新版本） 8 "provider": "wx069ba97219f66d99" // 這是同聲傳譯的ID 9 } 10 } 11 }
如果你是使用 Hbuildex 進行開發小程序的話，需要在 manifest.json 文件的源碼視圖中進行添加修改。
在源碼視圖中找到 mp-weixin，然后按照以下代碼進行添加修改
1 // manifest.json
2 /* 小程序特有相關 */
3 "mp-weixin": {
4 "appid": "xxxxxxxxxx", // 這是你小程序的AppId
5 ... 6 "plugins": { 7 "WechatSI": { 8 "version": "0.3.4", // 這是同聲傳譯的版本（也可以在微信公眾平台添加的同聲傳譯查看最新版本） 9 "provider": "wx069ba97219f66d99" // 這是同聲傳譯的ID 10 } 11 } 12 }
做完以上步驟之后，就可以根據官方文檔進行開發了
下面就是我的功能實現代碼了
1 // index.vue 在這里我的頁面布局只寫了語音按鈕（簡化了）
2 <template>
3 <div @click="yuyin" class="yuyin-icon">
4 <img :src="baseUrlImg+'/yuyin.png'" alt="" class="img" />
5 </div>
6 </template>
7 <script>
8 export default {
9 data() { 10 return { 11 // 這是搜索框中的內容 12 search_word: '' 13 } 14 }, 15 methods: { 16 // 語音點擊事件 17 yuyin: function() { 18 var that = this 19 // 向用戶發起授權請求 20 uni.authorize({ 21 scope: 'scope.record', // 獲取錄音功能，也就是麥克風權限 22 success: (res) => { 23 // 用戶授權使用麥克風權限調用語音搜索事件函數 24 that.plugin() 25 }, 26 // 用戶沒有授權使用麥克風權限執行以下代碼 27 fail(res) { 28 // 顯示模態彈窗提示用戶沒有開啟麥克風權限 29 uni.showModal({ 30 content: '檢測到您未開啟麥克風權限，請保持麥克風權限為開啟狀態', 31 confirmText: '去開啟', 32 showCancel: false, 33 success: (res) => { 34 console.log(res) 35 if(res.confirm) { 36 // 調起客戶端小程序設置界面，返回用戶設置的操作結果 37 uni.openSetting({ 38 success: (res) => { 39 console.log(res) 40 if(res.authSetting['scope.record'] == false) { 41 that.plugin() 42 } 43 } 44 }) 45 } else { 46 uni.navigateBack({ 47 delta: 1 48 }) 49 } 50 } 51 }) 52 } 53 }) 54 } 55 // 語音搜索 56 plugin () { 57 var that = this 58 var plugin = requirePlugin('WechatSI') 59 var manager = plugin.getRecordRecognitionManager() 60 // 設置錄音的參數 61 manager.start({ 62 duration: 5000, // 時間 63 lang: "zh_CN" // 語言 64 }) 65 // 開始錄音 66 manager.onStart = function(res) { 67 console.log("成功開始錄音識別", res) 68 if(res.msg == 'Ok') { 69 // 提示用戶正在錄音 70 uni.showToast({ 71 title: '正在識別語音...', 72 duration: 5000, 73 icon: 'loading' 74 }) 75 } 76 } 77 // 錄音結束 78 manager.onStop = function(res) { 79 // 提示用戶正在跳轉到搜索頁面（因為我做的時候，在跳轉這塊會有1~2秒的時間，所以我設置了一個提示框） 80 uni.showToast({ 81 title: '正在跳轉...', 82 duration: 1500, 83 icon: 'success' 84 }) 85 // 將識別的語音翻譯成文本 86 plugin.translate({ 87 lfrom: 'en_US', 88 lto: 'zh_CN', 89 content: res.result, 90 success: function(res) { 91 if(res.retcode == 0) { 92 // (iphone是這樣,Android不清楚)語音識別有時會在末尾添加符號 93 if(res.result.charAt(res.result.length - 1) == '。' || res.result.charAt(res.result.length - 1) == '.') { 94 res.result = res.result.substr(0, res.result.length - 1); 95 } 96 // 將翻譯后的內容放到搜索框中 97 that.search_word = res.result 98 // 執行搜索功能的代碼 99 that.searchName() 100 } else { 101 console.log('翻譯失敗', res) 102 } 103 }, 104 fail: function(res) { 105 console.log('網絡失敗', res) 106 // 當用戶說話聲音小或者用戶沒有說話就會報這兩個錯誤 107 if(res.retcode == -10001 || res.retcode == -10002) { 108 uni.showToast({ 109 title: '沒有聽清您說什么', 110 duration: 1000, 111 icon: 'error' 112 }) 113 } 114 } 115 }) 116 } 117 // 打印錯誤信息 118 manager.onError = function(res) { 119 console.error('error msg', res.msg) 120 } 121 } 122 } 123 } 124 </script>
(歡迎評論區留言，大家一起討論學習)