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

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