uni-app 中定义全局变量globalData注意事项

uni-app 关于全局变量有以下描述:

小程序中有个globalData概念,可以在 App 上声明全局变量。 Vue 之前是没有这类概念的,但 uni-app 引入了globalData概念,并且在包括H5、App等平台都实现了。
在 App.vue 可以定义 globalData ,也可以使用 API 读写这个值。

globalData支持vue和nvue共享数据。

<script>  
    export default {  
        globalData: {  
            text: 'text'  
        },  
        onLaunch: function() {  
            console.log('App Launch')  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        }  
    }  
</script>  
 
<style>  
    /*每个页面公共css */  
</style>  

js中操作globalData的方式如下:

赋值:getApp().globalData.text = 'test'

取值:console.log(getApp().globalData.text) // 'test'

但使用的时候要注意,在onLaunch,onShow生命周期函数中不能直接使用getApp().globalData,会报错。猜测是因为getApp()在这两个生命周期函数中还没有创建出app实例。那怎么用呢?

<script>
    export default {
        globalData: {
            isIphoneX: false,
            provider: 'weixin' //'alipay' 'baidu' 'toutiao'
        },
        onLaunch: function() {
            console.log('App Launch')
            this.init()
        },
        onShow: function() {
            console.log('App Show')
             setTimeout(() => {
                let provider = getApp().globalData.provider
                console.log(`globalData is: ${provider}`)
             }, 0)
        },
        onHide: function() {
            console.log('App Hide')
        },
        methods: {
            init() {
                this.$nextTick(function(){
                    let provider = getApp().globalData.provider
                    console.log(`liubbc provider: ${provider}`)
                })
                let context = this
                uni.getSystemInfo({
                    success: function(res) {
                        context.globalData.isIphoneX = res.model.indexOf('iPhone X') != -1 ? true : false
                    }
                })
                uni.getProvider({
                    service: 'oauth',
                    success: function(res) {
                        context.globalData.provider = res.provider[0] || 'weixin'
                    }
                });            
            },
        }
    }
</script>
 
<style>
    /*每个页面公共css */
    @import '@/common/css/common.css';
</style>
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://blog.itliujia.cn/info/20220496.html
-- 展开阅读全文 --
thinkphp5导出excel(原生)
« 上一篇 03-10
HbuilderX去除格式代码时候多余空白行
下一篇 » 04-26

发表评论