背景

開發者在開發某個功能時，經常會遇到某個物件，某個介面在程式碼多個地方有被使用到，如果每個地方都寫一份，一旦其中一個值發生變化了，那麼呼叫的地方都需要修改。而且很容易遺忘某個地方，導致產品存在bug。如何在快應用中定義一個全域性物件呢？只需要修改這個全域性物件，其他地方都可以同步修改呢？

解決方案

可在manifest檔案的data中定義，然後在各個ux頁面通過this.$app.$data.xxx形式去呼叫。 您也可以在app.ux中定義全域性物件，並在各個ux頁面通過this.$app.$def.xxx形式去呼叫。下面我們分別介紹這2個方案的實現。

方案1：在manifest.json中配置

相關程式碼如下：

manifest.json檔案配置

"config": {
    "data": {
      "globalData": "GlobalData"
    }
  },

hello.ux 頁面

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container">
    <input type="button" value="切換" onclick="switchValue" />
    <text>這是一個全域性變數{{value}}</text>
  </div>
</template>

<style>
  .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>

<script>
  module.exports = {
    data: {
      componentData: {},
      value: '',
      display: true
    },
    onInit() {
      this.$page.setTitleBar({
        text: 'menu',
        textColor: '#ffffff',
        backgroundColor: '#007DFF',
        backgroundOpacity: 0.5,
        menu: true
      });
    },
    onShow(options) {
      '// Do something when show.'
      this.value = this.$app.$data.globalData
      console.log("message:", this.value);
    },
    switchValue () {
      this.$app.$data.globalData = "test"
      this.value = this.$app.$data.globalData
      console.log("message:", this.value);
    },
  }
</script>
 

執行效果：

日誌如下：

方案2：app.ux配置

app.ux程式碼：

<script>
  module.exports = {
    onCreate() {
      console.info('Application onCreate');
    },
    onDestroy() {
      console.info('Application onDestroy');
    },
    dataApp: {
      globalData: "GlobalData in app.ux"
    }
  }
</script>

hello.ux程式碼：

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container">
    <input type="button" value="切換" onclick="switchValue" />
    <text>這是一個全域性變數{{value}}</text>
  </div>
</template>

<style>
  .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>

<script>
  module.exports = {
    data: {
      componentData: {},
      value: '',
      display: true
    },
    onInit() {
      this.$page.setTitleBar({
        text: 'menu',
        textColor: '#ffffff',
        backgroundColor: '#007DFF',
        backgroundOpacity: 0.5,
        menu: true
      });
    },
    onShow(options) {
      '// Do something when show.'
      this.value = this.$app.$def.dataApp.globalData
      console.log("message:", this.value);
    },
    switchValue() {
      this.$app.$def.dataApp.globalData = "test"
      this.value = this.$app.$def.dataApp.globalData
      console.log("message1111111:", this.value);
    },
  }
</script>

執行效果：

日誌如下：

欲瞭解更多詳情，請參閱：

快應用manifest.json檔案：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-manifest

快應用script指令碼：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-script#h2-1575380435413