小程序系列（二）——授权相关及实例（语音识别）

最新推荐文章于 2022-10-11 13:57:33 发布

宝贝QY

最新推荐文章于 2022-10-11 13:57:33 发布

阅读量1.5k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_36070288/article/details/94396537

版权

微信小程序专栏收录该内容

13 篇文章 0 订阅

订阅专栏

授权的重要API及相关说明

授权

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

此类接口调用时：

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

scope 列表

scope	对应接口	描述
scope.userInfo	wx.getUserInfo	用户信息
scope.userLocation	wx.getLocation, wx.chooseLocation	地理位置
scope.address	wx.chooseAddress	通讯地址
scope.invoiceTitle	wx.chooseInvoiceTitle	发票抬头
scope.invoice	wx.chooseInvoice	获取发票
scope.werun	wx.getWeRunData	微信运动步数
scope.record	wx.startRecord	录音功能
scope.writePhotosAlbum	wx.saveImageToPhotosAlbum, wx.saveVideoToPhotosAlbum	保存到相册
scope.camera	camera 组件	摄像头

wx.authorize

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

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

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

使用wx.authorize({scope: "scope.userInfo"})，不会弹出授权窗口，请使用 <button open-type="getUserInfo">授权按钮</button>；
需要授权 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 接口中，我们允许开发者直接调用此接口，但目前我们发现有不少开发者滥用此接口，使用户在无任何操作时，不断地强行跳转至设置页，导致用户无法正常使用甚至无法退出小程序。为保证用户获得更顺畅的小程序使用体验，避免此类滥用情况，我们对该接口进行了调整。

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

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

语音识别

简化后的代码

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

<!-- 简化后的代码 -->
<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>