小程序全局授权弹窗

首先，因为小程序没有app.wxml,所以自定义弹窗必须写成组件，除非使用微信自带的弹窗。

// login.wxml
<view class="login-dialog-wrap" wx:if="{{showPhoneDialog}}">
    <view class="login-dialog-cover"></view>
    <view class="login-dialog-container">
        <view class="login-dialog-content">
            <view class="login-dialog-title text-center color33">授权登录</view>
            <view class="text-center">您好，授权微信手机登录即可及时</view>
            <view class="text-center">获取本店最新优惠资讯哦~</view>
            <button class="login-dialog-button" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
                立即授权
            </button>
        </view>
        <view class="iconfont icon-guanbi login-dialog-close" bindtap="closePhoneDialog"></view>
    </view>
</view>

// loginDialog.js
Component({
    data: {
        showPhoneDialog: false,
        isTabBarPage: false
    },
    lifetimes: {
        attached() {
            // 判断当前页面是否为tabBar页面
            // 非tabBar页执行hideTabBar()报错
            let pages = getCurrentPages() //获取加载的页面
            let currentPage = pages[pages.length - 1] //获取当前页面的对象
            let url = currentPage.route //当前页面url
            this.setData({
                isTabBarPage: app.tabBarPages.includes(url + '.html')
            })
        }
    },
    properties: {
        // 手机号授权弹窗
        phoneDialog: {
            type: Boolean,
            observer(val) {
                setTimeout(() => {
                    this.setData({
                        showPhoneDialog: val
                    })
                    if (val) {
                        this.hideTab()
                    }
                }, 500)
            }
        }
    },
    methods: {
        // 手机号授权成功回调
        getPhoneNumber(e) {
            this.setData({
                showPhoneDialog: false
            })
            this.showTab()
            if (e.detail.errMsg.includes('fail')) { // 拒绝授权
             
                this.triggerEvent('callback', {
                    type: 'phoneNumber',
                    val: false
                })
            } else {
                let detail = e.detail
                // dosomething
            }
        },
        closePhoneDialog() {
            this.setData({
                showPhoneDialog: false
            })
            this.showTab()
            this.triggerEvent('callback', {
                type: 'phoneNumber',
                val: false
            })
        },
        showTab() {
            if (!this.data.isTabBarPage) return
             wx.showTabBar()
        },
        hideTab() {
            if (!this.data.isTabBarPage) return
             wx.hideTabBar()
        }
    }
})

写好弹窗组件后，全局引入

// app.json
"usingComponents": {
    "login-dialog": "/components/loginDialog/loginDialog"
}

弹窗的显示控制就交给Mixin

export default {
    data: {
        phoneDialog: false
    },
    onLoad() {
        // 基于某些判断后,更改phoneDialog为true 
    },
    // 执行某些接口后台返回需要登录时，可通过this.mixinNeedLogin弹出授权弹窗
    mixinNeedLogin() {
        this.setData({
            phoneDialog: false
        })
        setTimeout(()=>{
            this.setData({
                phoneDialog: true
            })
        },0)
    }
}