小程序前置授權(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 后通過(guò)回調(diào)才能拿到相關(guān)信息( wx.getUserInfo() 已經(jīng)不能彈窗啦,必須通過(guò)button彈窗),但是需要前置授權(quán)的點(diǎn)擊區(qū)域樣式又不一定是button的樣式,所以決定使用一個(gè)透明的原生button 覆蓋在點(diǎn)擊區(qū)域之上,在視覺上實(shí)現(xiàn)無(wú)差別授權(quán)。通過(guò)是否授權(quán)字段來(lái)決定該按鈕是否顯示。
因?yàn)樾〕绦蛑锌赡苡卸鄠€(gè)需要相同授權(quán)的點(diǎn)擊區(qū)域,所以決定用觀察者模式來(lái)實(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絕對(duì)定位在該父元素內(nèi),寬高都設(shè)為100%即可。也可以通過(guò)小程序組件的 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 通過(guò)設(shè)置不同的參數(shù)來(lái)設(shè)置組件的授權(quán)類型
-
data
- authorized 通過(guò)該值控制 授權(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ǔ)庫(kù)版本為1.9.7及以下版本無(wú)法響應(yīng)事件,所以在外部再包一層view
Hishop小程序工具開發(fā)公司長(zhǎng)沙海商,是一家有著十年技術(shù)前沿的公司,我們以先進(jìn)技術(shù)提供并解決各行業(yè)小程序開發(fā),操作簡(jiǎn)單,支持多種社群營(yíng)銷活動(dòng),提供一套綜合性的營(yíng)銷系統(tǒng)。以及可視化模板操作,大大減少人力物力成本。
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面,所看即所得,只需要美工就能做出精美商城。更多小程序商店請(qǐng)查看:小程序商店