微信小程序用户授权最佳实践指南


Posted in Javascript onMay 08, 2021

前言

开发微信小程序中,经常会用到获取一些用户权限的页面,比如你要登录,就要获取个人信息、你要做人脸识别,就要获取相机权限、你要做位置地图功能、就要获取用户的位置权限,你要将图片保存在用户的相册,需要获取相册权限等等

微信的 scope 流程:

微信小程序用户授权最佳实践指南

大多数功能都是没有授权不可用的,一般我会检测是否开启权限,然后如果开启了就继续使用,没开启就给出提示继续请求授权..如果还是拒绝 就给出提示 然后让用户手动去设置页打开...

#正常逻辑

但是这一套写下来可能就是这样的:

wx.getSetting({
    success(res)=>{
        if (!res.authSetting['scope']) {
          console.log('未授权')
              wx.authorize({
                scope: 'scope',
                success() {
                    console.log('授权成功')
                },
                fail() {
                    console.log('授权失败,让用户手动授权')
                    wx.showModal({
                        title: '温馨提示',
                        content: '未打开xxx权限',
                        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('已授权')
        }
    },
    fail(err)=>{}
})

现在都 1202 年了,这一套写下来,再掺杂着业务逻辑,那真的是惨不忍睹~

我是受不了,花了点时间封装了个函数,只需传入指定的权限名称,就能检测用户是否开启权限,没有开启,会提示,提示还不开就去设置页手动打开(总之必须打开)。

本来想写个代码片段,后来发现工具上在调用 openSetting 时有问题,只好放弃。

#代码细节

// utils/auth.js

/**
 * @param {
 * authType: 授权类型
 * }
 */

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("请输入正确的授权类型");
  }
  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);
  // 弹框提示去授权
  if (showModalMes) {
    // 去手动授权
    let openSet = await openSettingSync(scope);
    if (openSet) {
      return true;
    } else {
      return false;
    }
  } else {
    // 拒绝授权
    return false;
  }
};

// 判断用户是否开启该授权
function getSettingSync(scope) {
  return new Promise((resolve, reject) => {
    wx.getSetting({
      success(res) {
        if (!res.authSetting[scope]) {
          console.log("未授权");
          resolve(false);
        } else {
          console.log("已授权");
          resolve(true);
        }
      },
      fail(err) {
        reject();
        console.error("wx.getSetting Error", err);
      },
    });
  });
}
// 请求用户授权
function authorizeSync(scope) {
  return new Promise((resolve, reject) => {
    wx.authorize({
      scope: scope,
      success() {
        resolve(true);
        console.log("授权成功");
      },
      fail() {
        resolve(false);
        console.log("授权失败");
      },
    });
  });
}
// 弹框提示用户手动授权
function showModalSync(scope) {
  return new Promise((resolve, reject) => {
    wx.showModal({
      title: "提示",
      content: `为了更好的用户体验,请您授权 ${scope} 功能`,
      confirmText: "去授权",
      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");
      },
    });
  });
}
// 调起客户端小程序设置界面,返回用户设置的操作结果
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(){
         // 授权代码
    auth('camera').then(() => {
      console.log('授权成功')
      this.setData({
        isCameraAuth: true
      }
    }).catch((err) => {
      console.error('授权失败');
    })
   }
})

wxml 代码参考:

<!-- index.wxml -->
<view>是否授权:{{isCameraAuth}}</view>
<camera wx:if="{{isCameraAuth}}" style="width: 100%; height: 300px;"></camera>

#预览

为此,我制作了一个 Demo,点击Demo 预览 ,即可在开发工具中直接打开预览。

总结

到此这篇关于微信小程序用户授权最佳实践的文章就介绍到这了,更多相关微信小程序用户授权内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript中的异常捕捉介绍
Dec 31 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
AngularJS Module方法详解
Dec 08 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
Oct 25 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
vue完美实现el-table列宽自适应
详解JS WebSocket断开原因和心跳机制
May 07 #Javascript
如何用threejs实现实时多边形折射
详解JS ES6编码规范
May 07 #Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 #Javascript
详解如何使用Node.js实现热重载页面
May 06 #Javascript
关于Vue Router的10条高级技巧总结
May 06 #Vue.js
You might like
香妃
2021/03/03 冲泡冲煮
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
浅谈js闭包理解
2019/03/28 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
python sys.argv[]用法实例详解
2018/05/25 Python
python 爬取疫情数据的源码
2020/02/09 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
世界最大的票务市场:viagogo
2017/02/16 全球购物
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
运动会方阵口号
2014/06/07 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
借条格式范本
2015/05/25 职场文书
初中班主任教育随笔
2015/08/15 职场文书
中学教代会开幕词
2016/03/04 职场文书
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers