小程序自定义授权组件

首先新建一个component目录，在该目录下在新建一个文件名为logo的component组件
logo组件的wxml

<view wx:if="{{ishow}}">
    <view class="isMask"></view>
    <view class="isLogin">
        <view class="loginTitle">微信授权</view>
        <view class="loginshopImg">
            <view>小程序将获取以下权限：</view>
            <view>(如未授权，可能无法正常使用该小程序)</view>
        </view>
        <view class="isAgary">
            <text>•</text>
            <view>获取你的公开信息(昵称、头像等)</view>
        </view>
        <view class="isLoginBtn">  
            <button bindgetuserinfo="getUserInfo" open-type="getUserInfo">授权</button>
        </view>
    </view>
</view>

logo.wxss

.isMask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #000;
    opacity: 0.5;
}

.isLogin {
    position: fixed;
    padding: 50rpx 50rpx;
    width: 480rpx;
    height: 320rpx;
    background: #fff;
    top: 50%;
    left: 50%;
   transform: translate(-50%,-50%);
   border-radius: 10rpx;
    z-index: 1001;
}

.isLoginBtn {
    display: flex;
    justify-content: space-around;
}

.isLoginBtn button {
    background: #fff;
    width: 100%;
    height: 68repx;
    padding-left: 0rpx;
    padding-right: 0rpx;
    margin-right: 0rpx;
    margin-left: 0rpx;
    font-size: 28rpx;
    margin-top: 50rpx;
    color: #4bad37;
    border: 1rpx solid #4bad37;
}
.loginTitle {
    font-size: 34rpx;
}

.loginshopImg {
    height: 80rpx;
    font-size: 26rpx;
    padding: 20rpx 0rpx;
    border-bottom: 1rpx solid #ececec;
}

.loginshopImg>image {
    width: 68rpx;
    height: 68rpx;
    border-radius: 50%;
    margin-right: 20rpx;
}

.isAgary {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #666;
    margin-top: 30rpx;
}

.isAgary>text {
    margin-right: 20rpx;
}
.tite{
  font-size: 30rpx;
  text-align: center;
  font-weight: bold;
}
.prices{
  position: absolute;
  right: 21rpx;
  bottom: 21rpx;
  font-size: 54rpx;
  color: #fff;
  font-weight: bold;
}
.gocars{
  font-size: 24rpx;
  color: #fff;
  position: absolute;
  left: 37rpx;
  top: 28rpx;
}
.dianz{
  display: inline-block;
  vertical-align: middle;
  width: 37rpx;
  height: 37rpx;
}
.dianzs{
  display: inline-block;
  vertical-align: middle;
  width: 37rpx;
  height: 37rpx;
}

logo.js

// component/grant.js
const app = getApp();
Component({
  options:{
    multipleSlots: true
  },
  /**
   * 组件的属性列表
   */
  properties: {
   
  },

  /**
   * 组件的初始数据
   */
  data: {
    ishow:false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 隐藏授权弹窗
    hideDialog(){
      this.setData({
        ishow: false
      })
    },
    //显示授权弹窗
    showDialog(){
      this.setData({
        ishow: true
      })
    },
    //授权
    getUserInfo(e){
      let detail = e.detail;
      if (detail.errMsg == "getUserInfo:fail auth deny") {
        wx.showToast({
          title: '请授权登陆',
          icon: 'none'
        })
      } else {
        this.setData({
          ishow: false
        })
        app.globalData.userInfo = detail.userInfo;
        wx.setStorage({
          key: 'userInfo',
          data: detail.userInfo,
        })
      }
      
    }
  }
})

在需要的页面的json文件中引入组件,组件名是自定义的，路径采用绝对路径

"usingComponents": {
    "logo":"/component/logo"
  }

在需要的页面中直接声明组件

<logo class="logo"></logo>

//获取应用实例
const app = getApp();
Page({
  data: {
  },
  
  onLoad: function () {
  //父组件获取子组件对象方法,根据样式获取，建议使用selectAllComponents
    this.logo= this.selectComponent(".logo");
    //判断缓存中有没有授权信息，如果没有就显示弹窗，有就直接隐藏弹窗
    let storageKey = wx.getStorageSync('userInfo');
    if (storageKey){
      wx.getStorage({
        key: 'userInfo',
        success: (res) => {
          if (res.data) {
            app.globalData.userInfo = res.data;
            this.logo.hideDialog();//调用子组件的方法
          }
        },
      })
    }else{
      this.logo.showDialog();//调用子组件的方法
    }
   
  },
})