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


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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
Nov 30 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
Vue前后端不同端口的实现方法
Sep 19 Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 Javascript
JavaScript实现轮播图特效
Apr 10 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
python使用pil生成图片验证码的方法
2015/05/08 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
python实现俄罗斯方块游戏
2020/03/25 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
python 字符串常用函数详解
2019/09/11 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
python实现视频压缩功能
2020/12/18 Python
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
怎样客观的做好自我评价
2013/12/28 职场文书
食品质检员岗位职责
2015/04/08 职场文书
责任书范本大全
2015/05/11 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书