在授权基本信息或者手机号码时就需要小程序前置授权组件，，，，，那么需要怎样开发呢。
。。

因营业上的需求，，，，，需要在某些点击区域上增添这样一层逻辑：若是该用户没有授权基本信息 / 手机号，，，，，在点击该区域时，，，，，先弹出微信的授权弹窗，，，，，授权乐成后再举行下一步的营业操作。
。。

思绪

由于授权基本信息 / 手机号 必需使用小程序原生的的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;
    }
  }
复制代码

<view class="wrapper m-class">
    <view bind:tap="handleTap">
      <slot></slot>
    </view>
    <block wx:if="{{!authorized}}">
      <button
        class="auth"
        open-type="{{openType}}"
        bindgetphonenumber="getPhoneNumber"
        bindgetuserinfo="getUserInfo">
      </button>
    </block>
  </view>
复制代码

逻辑

• properties
  • openType 通过设置差别的参数来设置组件的授权类型
• data
  • authorized 通过该值控制 授权按钮是否显示
• attached
  • 在组件的 attached 阶段，，，，，判断用户是否授权，，，，，若是授权，，，，，直接将 authorized 置为 false
  • 若是用户没有授权，，，，，则初始化监听器
• detached
  • 移除监听器

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

<authorization-block bind:action="callBack" m-class="xxx">
    <view class="u-m">
    	xxxxxxx
    </view>
</authorization-block>
复制代码

详细代码：

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)
    }
  })
复制代码

其他

• 可以凭证营业需要扩充 open-type 的相关逻辑，，，，，案例中只有 userInfo 和phoneNumber。
  。。
• 不可在slot上直接绑定tap事务，，，，，在基础库版本为1.9.7及以下版本无法响应事务，，，，，以是在外部再包一层view

小程序工具开发公司长沙，，，，，是一家有着十年手艺前沿的公司，，，，，我们以先进手艺提供并解决各行业小程序开发，，，，，操作简朴，，，，，支持多种社群营销活动，，，，，提供一套综合性的营销系统。
。。以及可视化模板操作，，，，，大大镌汰人力物力本钱。
。。

小程序工具提供多类型商城/门店小程序制作，，，，，可视化编辑 1秒天生5步上线。
。。通过拖拽、拼接？？？
？？？榻峁剐〕绦蛏坛且趁，，，，，所看即所得，，，，，只需要美工就能做出细腻商城。
。。更多小程序市肆请审查：小程序市肆