关于小程序:小程序全局授权弹窗

首先，因为小程序没有 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)
    }
}