小程序和uniapp的globalData以及getApp()

蔚落 2022-11-19 04:25 591阅读 0赞

# globalData #

[uniapp的globalData][uniapp_globalData]

小程序有globalData，这是一种简单的全局变量机制。这套机制在uni-app里也可以使用，并且全端通用。

以下是 App.vue 中定义globalData的相关配置：

js中操作globalData的方式如下： `getApp().globalData.text = 'test'`

在应用onLaunch时，getApp对象还未获取，暂时可以使用`this.$scope.globalData`获取`globalData`。

如果需要把`globalData`的数据绑定到页面上，可在页面的`onShow`页面生命周期里进行变量重赋值。

nvue的weex编译模式中使用globalData的话，由于weex生命周期不支持onShow，但熟悉5+的话，可利用监听webview的addEventListener show事件实现onShow效果，或者直接使用weex生命周期中的beforeCreate。但建议开发者使用uni-app编译模式，而不是weex编译模式。

globalData是简单的全局变量，如果使用状态管理，请使用vuex（main.js中定义）

全局样式

# getApp() #

[uniapp的 getApp()][uniapp_ getApp]

getApp() 函数用于获取当前应用实例，一般用于获取globalData 。

const app = getApp()
    console.log(app.globalData)

注意：

*  不要在定义于 App() 内的函数中，或调用 App 前调用 getApp() ，可以通过 this.$scope 获取对应的app实例
 *  通过 getApp() 获取实例之后，不要私自调用生命周期函数。
 *  v3模式加速了首页nvue的启动速度，当在首页nvue中使用getApp()不一定可以获取真正的App对象。对此v3版本提供了const app = getApp(\{allowDefault: true\})用来获取原始的App对象，可以用来在首页对globalData等初始化

在App.vue中的调用：

this.globalData.systemTitle

在App.vue中的修改：

this.globalData.systemTitle = res.title

在pages中调用：

let title = ""
    title = getApp().globalData.systemTitle

[uniapp_globalData]: https://uniapp.dcloud.io/collocation/App?id=globaldata
[uniapp_ getApp]: https://uniapp.dcloud.io/collocation/frame/window?id=getapp