小程序重构，采用 uniapp 框架。记录一下踩过的坑。关于用户拒绝再次调起授权，及如何识别语音识别、微信地址、附近地址的处理。
语音识别 组件
- 语音识别，小程序只有录音功能，若要识别录音文件，常规做法是把录音文件传递给后端，然后由后端调用百度或讯飞语音识别接口，然后返回结果。
- 但是微信小程序官方提供了“同声传译”插件，支持前端直接识别。可参考：插件介绍、插件使用文档
- 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) { // 调用接口将省市区转换成项目需要的，带id的，然后进行后续处理 } } }) } }}- 附近地址
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) { // 调用接口将省市区转换成项目需要的，带id的，然后进行后续处理 } } }); }}