快捷導(dǎo)航

微信小程序用戶授權(quán)最佳實踐指南

更新時間：2021年05月08日 11:44:31 作者：九旬的博客

這篇文章主要給大家介紹了關(guān)于微信小程序用戶授權(quán)最佳實踐的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

開發(fā)微信小程序中，經(jīng)常會用到獲取一些用戶權(quán)限的頁面，比如你要登錄，就要獲取個人信息、你要做人臉識別，就要獲取相機權(quán)限、你要做位置地圖功能、就要獲取用戶的位置權(quán)限，你要將圖片保存在用戶的相冊，需要獲取相冊權(quán)限等等

微信的 scope 流程：

大多數(shù)功能都是沒有授權(quán)不可用的，一般我會檢測是否開啟權(quán)限，然后如果開啟了就繼續(xù)使用，沒開啟就給出提示繼續(xù)請求授權(quán)..如果還是拒絕就給出提示然后讓用戶手動去設(shè)置頁打開...

#正常邏輯

但是這一套寫下來可能就是這樣的：

wx.getSetting({
    success(res)=>{
        if (!res.authSetting['scope']) {
          console.log('未授權(quán)')
              wx.authorize({
                scope: 'scope',
                success() {
                    console.log('授權(quán)成功')
                },
                fail() {
                    console.log('授權(quán)失敗，讓用戶手動授權(quán)')
                    wx.showModal({
                        title: '溫馨提示',
                        content: '未打開xxx權(quán)限',
                        showCancel: false,
                        success(res) {
                        if (res.confirm) {
                            console.log('用戶點擊確定')
                            wx.openSetting({
                                success(res) {
                                    console.log(res.authSetting)
                                    res.authSetting = {
                                    "scope.camera": true,
                                    }
                                }
                            })
                        } else if (res.cancel) {
                            console.log('用戶點擊取消')
                        }
                        }
                  })
                }
             })
        } else {
          console.log('已授權(quán)')
        }
    },
    fail(err)=>{}
})

現(xiàn)在都 1202 年了，這一套寫下來，再摻雜著業(yè)務(wù)邏輯，那真的是慘不忍睹~

我是受不了，花了點時間封裝了個函數(shù)，只需傳入指定的權(quán)限名稱，就能檢測用戶是否開啟權(quán)限，沒有開啟，會提示，提示還不開就去設(shè)置頁手動打開（總之必須打開）。

本來想寫個代碼片段，后來發(fā)現(xiàn)工具上在調(diào)用 openSetting 時有問題，只好放棄。

#代碼細節(jié)

// utils/auth.js

/**
 * @param {
 * authType: 授權(quán)類型
 * }
 */

module.exports = async function wxAuth(authType) {
  // scopeArr ref: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html
  let scopeArr = [
    "userInfo",
    "userLocation",
    "userLocationBackground",
    "address",
    "invoiceTitle",
    "invoice",
    "werun",
    "record",
    "writePhotosAlbum",
    "camera",
  ];
  if (scopeArr.indexOf(authType) == -1) {
    return console.error("請輸入正確的授權(quán)類型");
  }
  let scope = "scope." + authType;
  let isUserSet = await getSettingSync(scope);
  if (isUserSet) return true;
  let isAuthorize = await authorizeSync(scope);
  if (isAuthorize) return true;
  let showModalMes = await showModalSync(scope);
  // 彈框提示去授權(quán)
  if (showModalMes) {
    // 去手動授權(quán)
    let openSet = await openSettingSync(scope);
    if (openSet) {
      return true;
    } else {
      return false;
    }
  } else {
    // 拒絕授權(quán)
    return false;
  }
};

// 判斷用戶是否開啟該授權(quán)
function getSettingSync(scope) {
  return new Promise((resolve, reject) => {
    wx.getSetting({
      success(res) {
        if (!res.authSetting[scope]) {
          console.log("未授權(quán)");
          resolve(false);
        } else {
          console.log("已授權(quán)");
          resolve(true);
        }
      },
      fail(err) {
        reject();
        console.error("wx.getSetting Error", err);
      },
    });
  });
}
// 請求用戶授權(quán)
function authorizeSync(scope) {
  return new Promise((resolve, reject) => {
    wx.authorize({
      scope: scope,
      success() {
        resolve(true);
        console.log("授權(quán)成功");
      },
      fail() {
        resolve(false);
        console.log("授權(quán)失敗");
      },
    });
  });
}
// 彈框提示用戶手動授權(quán)
function showModalSync(scope) {
  return new Promise((resolve, reject) => {
    wx.showModal({
      title: "提示",
      content: `為了更好的用戶體驗，請您授權(quán) ${scope} 功能`,
      confirmText: "去授權(quán)",
      showCancel: false,
      success(res) {
        if (res.confirm) {
          console.log("點擊確認");
          resolve(true);
        } else if (res.cancel) {
          resolve(false);
        }
      },
      fail(err) {
        reject();
        console.error(err, "wx.showModal Error");
      },
    });
  });
}
// 調(diào)起客戶端小程序設(shè)置界面，返回用戶設(shè)置的操作結(jié)果
function openSettingSync(scope) {
  return new Promise((resolve, reject) => {
    wx.openSetting({
      success(res) {
        console.log(res.authSetting);
        if (res.authSetting[scope]) {
          resolve(true);
        } else {
          resolve(false);
        }
      },
      fail(err) {
        reject();
        console.error(err, "wx.openSetting Error");
      },
    });
  });
}

#使用

JS 代碼參考：

import auth from './../../utils/auth'
Page({
   data:{
     isCameraAuth: false
   },
   onLoad(){
         // 授權(quán)代碼
    auth('camera').then(() => {
      console.log('授權(quán)成功')
      this.setData({
        isCameraAuth: true
      }
    }).catch((err) => {
      console.error('授權(quán)失敗');
    })
   }
})

wxml 代碼參考：

<!-- index.wxml -->
<view>是否授權(quán)：{{isCameraAuth}}</view>
<camera wx:if="{{isCameraAuth}}" style="width: 100%; height: 300px;"></camera>

#預(yù)覽

為此，我制作了一個 Demo，點擊Demo 預(yù)覽，即可在開發(fā)工具中直接打開預(yù)覽。

總結(jié)

到此這篇關(guān)于微信小程序用戶授權(quán)最佳實踐的文章就介紹到這了,更多相關(guān)微信小程序用戶授權(quán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序用戶授權(quán)最佳實踐指南

前言

#正常邏輯

#代碼細節(jié)

#使用

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具