小程序系列（二）——受權相關及實例（語音識別）

時間 2019-11-25

標籤程序系列受權相關實例語音識別简体版

原文原文鏈接

受權的重要API及相關說明

受權

部分接口須要通過用戶受權贊成才能調用。咱們把這些接口按使用範圍分紅多個 scope ，用戶選擇對 scope 來進行受權，當受權給一個 scope 以後，其對應的全部接口均可以直接使用。json

此類接口調用時：小程序

若是用戶未接受或拒絕過此權限，會彈窗詢問用戶，用戶點擊贊成後方可調用接口；

若是用戶已受權，能夠直接調用接口；

若是用戶已拒絕受權，則不會出現彈窗，而是直接進入接口 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

獲取用戶的當前設置。返回值中只會出現小程序已經向用戶請求過的權限。api

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

調起客戶端小程序設置界面，返回用戶設置的操做結果。設置界面只會出現小程序已經向用戶請求過的權限。bash

注意：2.3.0 版本開始，用戶發生點擊行爲後，才能夠跳轉打開設置頁，管理受權信息。詳情微信

此api也作了相關調整，以下：

在原來的 wx.openSetting 接口中，咱們容許開發者直接調用此接口，但目前咱們發現有很多開發者濫用此接口，使用戶在無任何操做時，不斷地強行跳轉至設置頁，致使用戶沒法正常使用甚至沒法退出小程序。爲保證用戶得到更順暢的小程序使用體驗，避免此類濫用狀況，咱們對該接口進行了調整。app

調整後「打開小程序設置頁」將支持如下兩種實現方式：

經過<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時有兩種狀況：
        // 一、用戶以前拒絕過，這個時候wx.authorize將再也不進入success,而是直接進入fail；
        // 二、用戶第一次進入發佈合單頁；
        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>
複製代碼