小程序前置授權(quán)組件開發(fā)

在授權(quán)基本信息或者手機(jī)號(hào)碼時(shí)就需要小程序前置授權(quán)組件，那么需要如何開發(fā)呢。

因業(yè)務(wù)上的需求，需要在某些點(diǎn)擊區(qū)域上增加這樣一層邏輯：如果該用戶沒有授權(quán)基本信息 / 手機(jī)號(hào)，在點(diǎn)擊該區(qū)域時(shí)，先彈出微信的授權(quán)彈窗，授權(quán)成功后再進(jìn)行下一步的業(yè)務(wù)操作。

思路

因?yàn)槭跈?quán)基本信息 / 手機(jī)號(hào) 必須使用小程序原生的的button，然后指定 open-type 后通過回調(diào)才能拿到相關(guān)信息( wx.getUserInfo() 已經(jīng)不能彈窗啦，必須通過button彈窗)，但是需要前置授權(quán)的點(diǎn)擊區(qū)域樣式又不一定是button的樣式，所以決定使用一個(gè)透明的原生button 覆蓋在點(diǎn)擊區(qū)域之上，在視覺上實(shí)現(xiàn)無差別授權(quán)。通過是否授權(quán)字段來決定該按鈕是否顯示。

因?yàn)樾〕绦蛑锌赡苡卸鄠€(gè)需要相同授權(quán)的點(diǎn)擊區(qū)域，所以決定用觀察者模式來實(shí)現(xiàn)，即其中一個(gè)組件授權(quán)后，更新所有相同授權(quán)的組件，隱藏授權(quán)button。

樣式

因?yàn)樾枰屖跈?quán)button完全覆蓋在點(diǎn)擊區(qū)域之上，所以需要讓slot里面的內(nèi)容撐開父級(jí)定位元素，然后授權(quán)button絕對定位在該父元素內(nèi)，寬高都設(shè)為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;
    }
  }
復(fù)制代碼

<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>
復(fù)制代碼

邏輯

• properties
  • openType 通過設(shè)置不同的參數(shù)來設(shè)置組件的授權(quán)類型
• data
  • authorized 通過該值控制 授權(quán)按鈕是否顯示
• attached
  • 在組件的 attached 階段，判斷用戶是否授權(quán)，如果授權(quán)，直接將 authorized 置為 false
  • 如果用戶沒有授權(quán)，則初始化監(jiān)聽器
• detached
  • 移除監(jiān)聽器

需要在組件外部綁定點(diǎn)擊區(qū)域本身的點(diǎn)擊事件，在已經(jīng)授權(quán)的情況下會(huì)觸發(fā)點(diǎn)擊回調(diào)。

<authorization-block bind:action="callBack" m-class="xxx">
    <view class="u-m">
    	xxxxxxx
    </view>
</authorization-block>
復(fù)制代碼

詳細(xì)代碼：

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') {
          /*
          * 獲取到用戶手機(jī)號(hào)后的業(yè)務(wù)代碼
          * */
          vm._triggerEvent(detail)
        }
      },
      getUserInfo ({detail: {userInfo: {avatarUrl, nickName}, errMsg}}) {
        const vm = this
        if (errMsg === 'getUserInfo:ok') {
          /*
          * 獲取到用戶信息后的業(yè)務(wù)代碼
          * */
          vm._triggerEvent()
        }
      },
      _triggerEvent (arg) {
        const vm = this
        /*
        * 觸發(fā)監(jiān)聽器后，再觸發(fā)點(diǎn)擊區(qū)域本身的點(diǎn)擊回調(diào)
        * */
        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)
    }
  })
復(fù)制代碼

其他

• 可以根據(jù)業(yè)務(wù)需要擴(kuò)充 open-type 的相關(guān)邏輯，案例中只有 userInfo 和phoneNumber。
• 不能在slot上直接綁定tap事件，在基礎(chǔ)庫版本為1.9.7及以下版本無法響應(yīng)事件，所以在外部再包一層view

Hishop小程序工具開發(fā)公司長沙海商，是一家有著十年技術(shù)前沿的公司，我們以先進(jìn)技術(shù)提供并解決各行業(yè)小程序開發(fā)，操作簡單，支持多種社群營銷活動(dòng)，提供一套綜合性的營銷系統(tǒng)。以及可視化模板操作，大大減少人力物力成本。

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請查看：小程序商店