小程序重構,采用 uniapp 框架嘁圈。記錄一下踩過的坑省骂。關于用戶拒絕再次調起授權,及如何識別語音識別最住、微信地址钞澳、附近地址的處理。
語音識別 組件
- 語音識別涨缚,小程序只有錄音功能轧粟,若要識別錄音文件,常規(guī)做法是把錄音文件傳遞給后端脓魏,然后由后端調用百度或訊飛語音識別接口兰吟,然后返回結果。
- 但是微信小程序官方提供了“同聲傳譯”插件茂翔,支持前端直接識別混蔼×柰#可參考:插件介紹罩句、插件使用文檔
- uniapp 插件配置,在 manifest.json 文件中,源碼模式粱快,加入:
...
"mp-weixin": {
...
"plugins" : {
// 語音識別 - 同聲傳譯
"WechatSI" : {
"version" : "0.3.1",
"provider" : "wx069ba97219f66d99"
}
}
}
- 調用
<template>
<view @click="asrStart">語音識別</view>
<view>{{arsRes}}</view>
<!-- 語音識別 -->
<wechat-asr ref="weixinAsr" @callback="asrResult"/>
</template>
<script>
import WechatAsr from '@/components/wechatASR.vue';
export default {
components: {WechatAsr},
data () {
return {
arsRes: ''
}
},
methods: {
// 語音識別
asrStart () {
this.$refs.weixinAsr.show();
},
asrResult (res) {
this.arsRes = res;
}
}
}
</script>
- 編寫組件,其中關于授權劫侧,用戶若拒絕了萌踱,再次點擊,本來是會一直進入失敗的回調中槽地,導致沒法再次打開授權界面迁沫。所以先獲取授權信息,針對沒有授權闷盔、授權拒絕弯洗、授權成功,分別再次處理逢勾。若授權拒絕牡整,需要打開授權設置界面,讓用戶再次授權處理溺拱。
<template>
<!-- 微信語音識別 -->
<view class="mask" v-show="isShow">
<view class="weixin-asr">
<view class="title">語音識別</view>
<!-- 動畫 -->
<view class="spinner">
<view class="rect rect1"></view>
<view class="rect rect2"></view>
<view class="rect rect3"></view>
<view class="rect rect4"></view>
<view class="rect rect5"></view>
</view>
<view class="tip">說出姓名逃贝、電話和詳細地址</view>
<button class="btn" type="default" @click="recordStop">說完了</button>
</view>
</view>
</template>
<script>
const WechatSI = requirePlugin("WechatSI");
const ASRManager = WechatSI.getRecordRecognitionManager();
export default {
data () {
return {
isShow: false
}
},
onReady () {
// 錄音開啟成功回調
ASRManager.onStart = function (res) {
_this.isShow = true;
}
const _this = this;
// 識別錯誤事件
ASRManager.onError = (res) => {
_this.isShow = false;
console.log(res.msg);
}
// 錄音停止回調
ASRManager.onStop = function (res) {
if (res && res.result) {
_this.$emit('callback', res.result);
} else {
uni.showToast({
icon: 'none',
title: '抱歉,沒聽到您的聲音哦'
})
}
}
},
methods: {
data () {
return {
isShow: false,
}
},
show () {
const _this = this;
// 獲取是否授權信息
uni.getSetting({
success(res) {
if (res && res.authSetting && res.authSetting.hasOwnProperty('scope.record')) {
if (res.authSetting['scope.record']) {
start();
} else { // 拒絕授權迫摔,打開授權設置
uni.openSetting({
success() {
start();
}
})
}
} else {
start();
}
}
})
function start () {
ASRManager.start({
lang: "zh_CN"
});
}
},
// 錄音停止
recordStop () {
this.isShow = false;
ASRManager.stop();
}
}
}
</script>
<style lang="scss" scoped>
.mask {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .54);
}
.weixin-asr {
position: absolute;
top: calc(50% - #{477upx / 2});
left: 0;
right: 0;
margin: 0 auto;
width: 560upx;
height: 477upx;
background: #fff;
text-align: center;
transform: .5s ease-out .5s;
.title {
margin-top: 42upx;
color: #000;
font-size: 34upx;
font-weight: 500;
}
.spinner {
margin: 50upx;
height: 100upx;
}
.tip {
color: #787878;
}
.btn {
margin-top: 28upx;
width: 225upx;
height: 82upx;
background: $theme1;
color: #fff;
font-size: 34upx;
line-height: 82upx;
border-radius: 82upx;
}
}
.spinner {
text-align: center;
}
.spinner > .rect {
background-color: #EDAA35;
height: 100%;
border-radius: 13upx;
width: 13upx;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
& + .rect {
margin-left: 15upx;
}
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
</style>
微信地址沐扳、附近地址
它們的處理,和上面邏輯一樣句占,只是調用的 api 不一樣沪摄。
邏輯也是先獲取授權信息,未授權纱烘、用戶拒絕授權杨拐、授權成功,在用戶拒絕授權時擂啥,打開授權設置頁面哄陶,沒授權由小程序主動調起授權彈窗。
主要處理邏輯如下:
- 微信地址
chooseAddress (type) {
const _this = this;
if (type === 'weixin') {
// 處理拒絕再次打開調用設置
uni.getSetting({
success (res) {
if (res && res.authSetting && res.authSetting.hasOwnProperty('scope.address')) {
if (res.authSetting['scope.address']) {
choose();
} else {
uni.openSetting({
success () {
choose();
}
})
}
} else {
choose();
}
}
});
function choose () {
uni.chooseAddress({
success(res) {
if (res) {
// 調用接口將省市區(qū)轉換成項目需要的哺壶,帶id的屋吨,然后進行后續(xù)處理
}
}
})
}
}
}
- 附近地址
nearAddress () {
const _this = this;
// 處理拒絕再次打開調用設置
uni.getSetting({
success (res) {
if (res && res.authSetting && res.authSetting.hasOwnProperty('scope.userLocation')) {
if (res.authSetting['scope.userLocation']) {
chooseLocation();
} else {
uni.openSetting({
success () {
chooseLocation();
}
})
}
} else {
chooseLocation();
}
}
})
function chooseLocation () {
uni.chooseLocation({
success: function (res) {
if (res) {
// 調用接口將省市區(qū)轉換成項目需要的,帶id的山宾,然后進行后續(xù)處理
}
}
});
}
}