小程序系列（二）——授权相关及实例（语音识别）_res.authsetting['scope.record']

版权声明：本文为博主原创文章，转载请附上博文链接！

相关文档

小程序授权：微信小程序授权文档

对接科大讯飞：科大讯飞语音识别接口文档

授权的重要API及相关说明

授权

部分接口需要经过用户授权同意才能调用。我们把这些接口按使用范围分成多个 scope ，用户选择对 scope 来进行授权，当授权给一个 scope 之后，其对应的所有接口都可以直接使用。

此类接口调用时：

• 如果用户未接受或拒绝过此权限，会弹窗询问用户，用户点击同意后方可调用接口；
• 如果用户已授权，可以直接调用接口；
• 如果用户已拒绝授权，则不会出现弹窗，而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景。

scope 列表

wx.authorize

提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。更多用法详见 用户授权。

开发者可以使用 wx.authorize 在调用需授权 API 之前，提前向用户发起授权请求。

•  按照上面的逻辑，所有的授权弹窗我们都能用wx.authorize来唤起，注意两点细节，官方说明如下：

1. 使用wx.authorize({scope: "scope.userInfo"})，不会弹出授权窗口，请使用 <button open-type="getUserInfo">授权按钮</button>；
2. 需要授权 scope.userLocation 时必须配置地理位置用途说明，如下：

// 在app.json文件中配置如下代码，才能使用位置授权
{
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}

wx.getSetting

获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。

wx.getSetting({
  success (res) {
    console.log(res.authSetting)
  }
})

 

• 这里可以通过wx.getSetting({})来得知用户授权过哪些权限;
• 我们以wx.getUserInfo为例，wx.getUserInfo文档调整后是这样描述的：在用户未授权过的情况下调用此接口，将不再出现授权弹窗会直接进入 fail 回调；在用户已授权的情况下调用此接口，可成功获取用户信息。
• 举例说明（我们什么时候可以直接调用wx.getUserInfo?），当res.authSetting['scope.userInfo']为true时，我们可以放心的调用wx.getUserInfo，如下：

wx.getSetting({
  success (res) {
    if (res.authSetting['scope.userInfo']) {
      wx.getUserInfo({
        success (res) {
          console.log(res)
        }
      })
    }
  }
})

 wx.openSetting

调起客户端小程序设置界面，返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限。

注意：2.3.0 版本开始，用户发生点击行为后，才可以跳转打开设置页，管理授权信息。详情

• 此api也做了相关调整，如下：

在原来的 wx.openSetting 接口中，我们允许开发者直接调用此接口，但目前我们发现有不少开发者滥用此接口，使用户在无任何操作时，不断地强行跳转至设置页，导致用户无法正常使用甚至无法退出小程序。为保证用户获得更顺畅的小程序使用体验，避免此类滥用情况，我们对该接口进行了调整。

调整后“打开小程序设置页”将支持以下两种实现方式：

1. 通过<button open-type="openSetting" bindopensetting="callback">打开设置页</button>打开设置页；
2. 由点击行为触发wx.openSetting接口的调用，说明一下：使用wx.showModal弹窗也能触发打开授权页

 语音识别

相关UI界面

• 图①、首页界面

• 图②、新用户进入小程序首页会出现如下界面：（获取用户地理位置）

• 图③、新用户点击图①红框区域的发布合单加号，出现如下界面：（点击发布合单会调起微信自带的用户授权弹窗）

• 图④、点击图③允许，进入发布合单页，此时弹框提示用户是否授权录音权限，界面如下：（进入发布合单页提前调起录音功能授权）

• 图⑤、如果用户点击允许后，进入下图：

• 图⑥、当用户按住上图红框的录音icon后，开始录音：

• 图⑦、当用户手指从录音icon离开时，开始上传音频并转为识别后的文字，最终把文字赋值到输入框：

•  图⑧、当用户在图④拒绝录音授权时，这时如果用户点击录音icon后则显示弹框引导用户进入设置页：

• 图⑨、当用户点击前往授权，即调用wx.openSetting进入设置页：

简化后的代码

所有说明均写在代码注释内 

<!-- 简化后的代码 -->
<template>
  <div class="release-order">
    <!-- 这是录音icon -->
    <image :src="iconRecord" @touchstart="startRecord" @touchend="endRecord" />
  </div>
</template>
 
<script>
import tool from '@/utils/tool' // 工具方法
const recorder = wx.getRecorderManager() // 初始化录音实例
export default {
  data () {
    return {
      iconRecord: require('@static/icon/icon_voice.png')
    }
  },
  onLoad () {
    // 进入发布合单页开始获取用户的当前设置，这里主要看用户是否操作过录音授权
    wx.getSetting({
      success (res) {
        // res.authSetting['scope.record']为false时有两种情况：
        // 1、用户之前拒绝过，这个时候wx.authorize将不再进入success,而是直接进入fail；
        // 2、用户第一次进入发布合单页；
        if (!res.authSetting['scope.record']) {
          wx.authorize({
            scope: 'scope.record',
            success () {
              // 用户已经同意小程序使用录音功能
            },
            fail () {
             // 用户之前拒绝过该授权
            }
          })
        }
      }
    })
  },
  methods: {
    startRecord () {
      const that = this
      // 当用户点击录音icon时，获取用户是否开启了录音权限
      wx.getSetting({
        success (res) {
          if (!res.authSetting['scope.record']) {
            // 未开启
            wx.authorize({
              scope: 'scope.record',
              fail () {
                // 用户之前拒绝过该授权
                // 此时使用wx.showModal引导用户点击前往授权按钮进入设置页
                that.failSetting()
              }
            })
          } else {
            // 已开启
            tool.showRecordLoading('语音输入中...')
            recorder.start({
              duration: 15000, // 录音最长时间为15秒
              format: 'mp3' // 音频格式为mp3
            })
          }
        }
      })
	},
    failSetting () {
      wx.showModal({
        title: '提示',
        content: '您未授权录音，功能将无法使用',
        showCancel: false,
        confirmText: '前往授权',
        confirmColor: '#5bb53c',
        success: function (res) {
          wx.openSetting({
            success (res) {
              // console.log(res)
            }
          })
        }
      })
    },
    endRecord () {
      const that = this
      // 也要获取用户是否开启了录音权限，防止未开启授权手指移开录音icon也会执行停止录音的回调
      wx.getSetting({
        success (res) {
          if (res.authSetting['scope.record']) {
            wx.hideLoading()
            tool.showRecordLoading('语音识别中...')
            recorder.stop()
            // 监听录音停止回调
            recorder.onStop(res => {
			  const { tempFilePath } = res
              // 使用微信上传文件的api
              wx.uploadFile({
                url: '接口地址', // 接口地址
                header: {
                  // 请求头相关设置
                  'Content-Type': 'application/x-www-form-urlencoded'
                },
				name: 'voice', // 上传文件名
                filePath: tempFilePath, // 临时文件
                success (res) {
                  // 成功则把从后台拿到的文字赋值到输入框
                  wx.hideLoading() // 隐藏菊花加载
                  const temp = JSON.parse(res.data)
                  if (temp.code === 1) {
                    // 赋值相关操作在这里进行
                  }
                },
                fail () {
                  // 失败则提示用户语音识别失败
                  wx.hideLoading() // 隐藏菊花加载
                  tool.showToast('语音识别失败')
                }
              })
            })
          } else {
            // 未授权则停止菊花加载
            wx.hideLoading()
          }
        }
      })
    }
  }
}
</script>
 
<style lang='stylus' scoped>
 
</style>

 语音识别实现

最开始我一直在研究能否不借助后台直接实现语音转文字，搜了很多方法，对比后还是觉得后台实现简单很多，参考科大讯飞语音转写java实现的demo

• 后端实现注意事项：（具体让后台人员来实现）

1. 配置IP白名单 ；
2. 请求头参数配置；
3. 请求体audio文件转成base64编码。