微信小程序受权组件封装

时间  2019-11-08
标签 微信 程序 受权 组件 封装 栏目 软件设计 繁體版
原文   原文链接

作过、知道、了解微信小程序的都知道若是你的小程序应用须要获取微信的用户信息数据是须要经过用户赞成的，也就是须要用户受权，若是用户不受权那么你就拿不到用户的信息。不少人也都知道如今的人什么均可以不用带，但手机不准要带，由于手机就是咱们的所有，不管是钱包，证件等等。因此安全和隐私就是一个比较敏感的话题了。json

小程序这么作也是为了保护用户的隐私数据，早期开发小程序的都知道，小程序的受权在中途接口时大改了的，当时不少人吐槽，反正改和没改都是同样的，作任何事都会有人吐槽的。小程序

在我看来小程序的作法挺好，毕竟用户的隐私仍是又用户本身来作决定的，特别最近头条和腾讯开发数据之间由于头像等信息的事件，这种就更须要了。微信小程序

今天就来看看如何去作一个小程序的受权封装，这里封装主要针对小程序应用必需要微信用户数据的，因此也就是不受权就没办法用的。api

结构搭建

首先须要咱们在小程序组件目录中添加一个受权的组件，基本结构以下：安全

而后新建一个页面用于组件的测试，以下：

上面的代码json和wxml文件中没有具体展现，你们要记得引入组件以及在wxml中添加组件的标签，若是不是很清楚能够看看微信小程序组件的使用。bash

组件的基本结构

组件的界面主要是想模仿微信小程序自带受权弹窗的样式，因此就按照这个样式作一个，以下：微信

<view class='box' catchtouchmove='true'>
  <view class='pop'>
    <view class='top'>
      <view class='txt'></view>
      <view class='title'>微信受权</view>
      <view class='txt'>关闭</view>
    </view>
    <view class='center'>
      <view class='explain'><text>土家肸哥申请得到如下权限：</text></view>
      <view class='tip'>
        <view class='dian'></view>
        <text>赞成此应用访问你的相机功能</text>
      </view>
    </view>
     <button class='bottom' open-type="openSetting">容许</button>
  </view>
</view>
复制代码

上面的代码有一个地方要注意就是容许这个按钮，因为微信小程序后来接口调整必需要使用按钮才能打开设置界面受权，并且小程序的受权api只在用户第一次受权时才会弹窗询问，若是一旦拒绝受权，那么后来就不能再调起受权弹窗界面了，因此头疼的问题就在这里，明明官方有一个好的弹窗能够用，就是不给用，非要本身去写一个。没办法要用人家的东西，必须得遵照人家的规则，因此只能本身写了。异步

组件的样式
.box{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'PingFang SC';
  background-color: rgba(0, 0, 0, .4);
  
}
.box .pop{
  width: 621rpx;
  height: 522rpx;
  border-radius: 10rpx;
  background-color: rgb(248,247,249);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.box .pop .top{
  width: 100%;
  height: 94rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid rgb(233,237,245);
}
.box .pop .top .txt{
  font-size: 28rpx;
  color: rgb(136,136,136);
  width: 128rpx;
  height: 93rpx;
  line-height: 93rpx;
  text-align: center;
}
.box .pop .top .title{
  font-size: 36rpx;
  font-weight: bold;
}

.box .pop .center{
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.box .pop .center .duoduo{
  width: 71rpx;
  height: 71rpx;
  border-radius: 50%;
  margin-bottom: 32rpx;
}
.box .pop .center .duoduo image{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.box .pop .center .explain{
  font-size: 32rpx;
  width: 520rpx;
  text-align: center;
  border-bottom: 1rpx solid rgb(233,237,245);
  padding-bottom: 32rpx;
}
.box .pop .center .tip{
  width: 520rpx;
  font-size: 28rpx;
  color: rgb(136,136,136);
  display: flex;
  align-items: center;
  margin-top: 32rpx;
  
}
.box .pop .center .tip .dian{
  width: 9rpx;
  height: 9rpx;
  background-color: rgb(136,136,136);
  border-radius: 50%;
  margin-left: 10rpx;
  margin-right: 22rpx;
}
.box .pop .bottom {
  width: 100%;
  height: 89rpx;
  line-height: 89rpx;
  text-align: center;
  border-top: 1rpx solid rgb(233,237,245);
  font-size: 32rpx;
  color: rgb(66,169,31);
}
复制代码

有了样式就能够看到长什么样了，效果以下：函数

弹窗是写好了，咱们的逻辑怎么写呢，根据上面提到的规则首先须要使用微信小程序自带的受权api来让用户选择，若是用户拒绝才用本身写的弹窗来提示用户受权，其实这里会有一个问题就是当用户点击拒绝后有弹窗提示用户受权，这就是微信为何这样改的缘由，总是给用户弹窗，因此建议你们在作小程序的时候设计一个游客状态时微信最为提倡的。

组件逻辑

首先的用微信小程序本身的api来获取用户是否已经受权了，代码以下：学习

/**
     * 检测用户是否已经受权过某个权限，若是没有受权就调用小程序的受权，若是受权了就返回相应的状态给回调函数
     * scope为具体的某个权限
     * cb为回调
     */
    isAuthorize(scope, cb) {
      let self = this;
      wx.getSetting({
        success(res) {
          if (!res.authSetting['scope.' + scope]) {
            wx.authorize({
              scope: 'scope.' + scope,
              success() {
                return typeof cb == "function" && cb();
              },
              fail() {
                self.setAuthTxt(scope);
                self.callBack = cb;
                self.setData({
                  popShow: true
                })
              }
            })
          } else {
            return typeof cb == "function" && cb();
          }
        }
      })
    }
复制代码

在组件的methods中添加上面的方法，这里主要是用的回调函数来处理受权成功多须要执行的逻辑。上面的代码你们也能够看到若是受权失败则会调用setAuthTxt这个函数，这里主要功能就是设置弹窗的一些提示信息，设置好后将回调保存，最后显示弹窗授。设置页面提示信息很简单就是设置data的值，以下：

setAuthTxt(authType) {
      var authTxt = '';
      switch (authType) {
        case 'userInfo':
          authTxt = '用户信息';
          break;
        case 'userLocation':
          authTxt = '地理位置';
          break;
        case 'record':
          authTxt = '录音功能';
          break;
        case 'writePhotosAlbum':
          authTxt = '保存到相册';
          break;
        case 'camera':
          authTxt = '摄像头';
          break;
      }
      this.setData({
        authType: authType,
        authTxt: authTxt
      })
    }
复制代码

若是上面的内容没有你须要请求的权限的对应，请自行按照格式添加便可。

这里须要对页面的结构修改一下，主要添加一些事件来处理受权操做，以下：

+ <view class='box' catchtouchmove='true' wx:if='{{popShow}}'>
  <view class='pop'>
    <view class='top'>
      <view class='txt'></view>
      <view class='title'>微信受权</view>
+      <view class='txt' bindtap='popClose'>关闭</view>
    </view>
    <view class='center'>
      <view class='explain'><text>土家肸哥申请得到如下权限：</text></view>
      <view class='tip'>
        <view class='dian'></view>
+        <text>赞成此应用访问你的{{authTxt}}功能</text>
      </view>
    </view>
+     <button class='bottom' open-type="openSetting" bindopensetting="getAuthorizeTool">容许</button>
  </view>
</view>
复制代码

而后就是用户点击容许的逻辑了，以下：

getAuthorizeTool: function(res) {
      var scope = 'scope.' + this.data.authType;
      if (res.detail.authSetting[scope]) {
        this.setData({
          popShow: false
        })
        return typeof this.callBack == "function" && this.callBack();
      }
    }
复制代码

这里记得最后成功返回保存的回调告诉调用者受权成功了，最后记得添加上关闭弹窗的事件处理函数，以下：

popClose() {
      this.setData({
        popShow: false
      })
    }
复制代码

到这里这个组件算是封装好了，下面就看看如何使用这个封装好的组件了。

受权组件的使用

组件的使用这里就不作过多介绍，你们能够看看官方文档，主要介绍封装的组件的几种状况。首先须要在json文件中引入组件，而后在wxml中添加组件标签，这里须要注意给标签添加一个id方便后面调用事件，以下：

<!--pages/auth/auth.wxml-->
<text>pages/auth/auth.wxml</text>
<auth id='authorization'></auth>
复制代码

在调用的要么ready生命周期中获取组件实例，以下：

/**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.authorize = this.selectComponent("#authorization");
  },
复制代码

最后就是调用了，这里分几种状况调用。

页面级调用

这个其实就是若是某个页面须要某些权限的，固然啦，这个组件目前只是简单的功能因此这种状况即便用户不受权页面也已经加载了，因此适合有游客状态的使用，若是没有游客状态的要么添加一个页面要么本身加以改进。调用方法以下：

onReady: function () {
    this.authorize = this.selectComponent("#authorization");
    this.authorize.isAuthorize('record', () => {
      console.log('fffffffff')
    })
  },
复制代码

其实就是在获取到组件实例后调用便可

按钮级调用

这种主要针对点击某个按钮的操做须要获取某个权限才能进行的，如点击按钮录制语音的，方法和上面的同样，只是具体调用的函数在不一样地方而已，以下：

onReady: function () {
    this.authorize = this.selectComponent("#authorization");
  },
  /**
   * 处理录制按钮的点击事件
   */
  handleRecordButton(){
    this.authorize.isAuthorize('record', () => {
      console.log('fffffffff')
    })
  },
复制代码

主要的调用就这两种。

调用效果

调用组件后的效果风三种状况。

只触发小程序自带受权

这种状况就是用户在初次使用时调用的是微信小程序自带的受权弹窗，并且用户立刻就是受权了，这种状况的效果以下：

上面的动图中你们能够看到受权以后调试器就会打印出来了，说明受权成功了。

拒绝受权触发自定义弹窗

当用户拒绝受权后就能够弹窗咱们自定义的弹窗了，在自定义弹窗中能够选择容许或者不处理。这里主要是自定义弹窗后容许的状况。效果以下：

用户拒绝自定义受权

若是上面异步用户选择了关闭，那么回调就不会执行了，和上面提到的页面级同样了，效果以下：

到此这个受权组件就已经封装查不到了，若是有什么错误或者不足但愿你们提出，共同窗习，交流！ 也能够加个人vx:w_loading 谢谢你们！
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程