导航：首页 > 开发技术 >

小程序前置授权组件如何开发

发表于：2025-11-07 作者：千家信息网编辑

千家信息网最后更新 2025年11月07日，今天小编给大家分享一下小程序前置授权组件如何开发的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了

千家信息网最后更新 2025年11月07日小程序前置授权组件如何开发

今天小编给大家分享一下小程序前置授权组件如何开发的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

思路

因为授权基本信息 / 手机号必须使用小程序原生的的button，然后指定 open-type 后通过回调才能拿到相关信息( wx.getUserInfo() 已经不能弹窗啦，必须通过button弹窗)，但是需要前置授权的点击区域样式又不一定是button的样式，所以决定使用一个透明的原生button 覆盖在点击区域之上，在视觉上实现无差别授权。通过是否授权字段来决定该按钮是否显示。

因为小程序中可能有多个需要相同授权的点击区域，所以决定用观察者模式来实现，即其中一个组件授权后，更新所有相同授权的组件，隐藏授权button。

样式

因为需要让授权button完全覆盖在点击区域之上，所以需要让slot里面的内容撑开父级定位元素，然后授权button绝对定位在该父元素内，宽高都设为100%即可。也可以通过小程序组件的 externalClasses 从组件外部指定样式。代码如下：

.wrapper {    position: relative;    width: 100%;    height: 100%;    .auth {      position: absolute;      width: 100%;      height: 100%;      opacity: 0;      top: 0;      left: 0;      z-index: 10;    }  }复制代码

      复制代码

逻辑

properties

openType 通过设置不同的参数来设置组件的授权类型

data

authorized 通过该值控制授权按钮是否显示

attached

在组件的 attached 阶段，判断用户是否授权，如果授权，直接将 authorized 置为 false
如果用户没有授权，则初始化监听器

detached

移除监听器

需要在组件外部绑定点击区域本身的点击事件，在已经授权的情况下会触发点击回调。

    xxxxxxx    复制代码

详细代码：

import event from '../../utils/event'  Component({    externalClasses: ['m-class'],    properties: {      openType: {        type: String,        value: 'getUserInfo'      }    },    data: {      authorized: false    },    methods: {      getPhoneNumber ({detail}) {        const vm = this        if (detail.errMsg === 'getPhoneNumber:ok') {          /*          * 获取到用户手机号后的业务代码          * */          vm._triggerEvent(detail)        }      },      getUserInfo ({detail: {userInfo: {avatarUrl, nickName}, errMsg}}) {        const vm = this        if (errMsg === 'getUserInfo:ok') {          /*          * 获取到用户信息后的业务代码          * */          vm._triggerEvent()        }      },      _triggerEvent (arg) {        const vm = this        /*        * 触发监听器后，再触发点击区域本身的点击回调        * */        event.triggerEvent([vm.data.config.eventName], true)        vm.triggerEvent('action', arg)      },      handleTap () {        const vm = this        vm.triggerEvent('action')      }    },    attached () {      const vm = this      let config      switch (vm.data.openType) {        case 'getUserInfo':          config = {            eventName: 'userInfo'          }          break        case 'getPhoneNumber':          config = {            eventName: 'phoneNumber'          }          break      }      if (getApp().globalData[config.eventName]) {        vm.setData({          authorized: true        })      } else {        event.addEventListener([config.eventName], vm, (authorized) => {          if (authorized) {            vm.setData({              authorized: true            })          }        })      }      vm.setData({        config      })    },    detached () {      const vm = this      event.removeEventListener([vm.data.config.eventName], vm)    }  })复制代码