擼一個小程式前置授權元件

FFF1發表於2018-07-31
元件

因業務上的需求，需要在某些點選區域上增加這樣一層邏輯：如果該使用者沒有授權基本資訊 / 手機號，在點選該區域時，先彈出微信的授權彈窗，授權成功後再進行下一步的業務操作。

其中用到了 @dannnney 的weapp-event傳送門

本案例 github原始碼 歡迎star~~

思路

因為授權基本資訊 / 手機號 必須使用小程式原生的的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>
複製程式碼

效果：

未設定透明度（青色區域均為授權按鈕）

img

將透明度設為0以後

img

邏輯

  • 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)
        getApp().globalData[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
      }
        
       /*
        * 從 狀態管理 或者 globalData 或者別的途徑 判斷使用者是否授權
        * */
      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
  • 轉載請註明出處，覺得有用的話在github上賜顆星，謝謝~

相關文章