首先新建一个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.jsconst 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();//调用子组件的方法    }     },})