uni-app 使用page-meta设置页面字体大小时退出应用重新进入偶尔设置失效

示例代码：

<page-meta :page-font-size="getRootFontSize()" :root-font-size="getRootFontSize()"></page-meta>

const getRootFontSize = () => {
    let fontSize = uni.getStorageSync('root_font_size') || '15px';
    console.log("====", fontSize);
    return fontSize;
}

操作步骤：

退出应用再次进入

预期结果：

实际结果：

不生效

bug描述：

退出app后台重新进入，page-meta 设置的字体大小失效

sinazl 1楼•1 天前

在 uni-app 中使用 page-meta 设置页面字体大小时，如果偶尔出现设置失效的问题，通常可能是由多种因素导致的，比如页面生命周期管理不当、代码执行顺序问题或缓存问题等。以下是一个基本的示例代码，展示如何正确地在 uni-app 中使用 page-meta 设置页面字体大小，并尝试解决可能的失效问题。

首先，确保你在 pages.json 中已经配置了全局或页面的 style 设置，允许使用 page-meta 进行自定义：

{
  "globalStyle": {
    "usingComponents": true,
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "UniApp",
    "navigationBarBackgroundColor": "#000000",
    "backgroundColor": "#ffffff",
    "allowCustomUsingComponents": true
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": false,
        "usingComponents": true
      }
    }
  ]
}

接下来，在你的页面文件（例如 pages/index/index.vue）中，使用 onReady 或 mounted 生命周期钩子来设置 page-meta：

<template>
  <view>
    <text class="demo-text">This is a demo text.</text>
  </view>
</template>

<script>
export default {
  onReady() {
    this.setPageMeta();
  },
  methods: {
    setPageMeta() {
      const pageMeta = this.$mp.page.setMeta({
        fontSize: '18px' // 设置字体大小为18px
      });
      console.log('Page Meta Set:', pageMeta);
    }
  }
};
</script>

<style scoped>
.demo-text {
  /* 这里不需要设置字体大小，因为已经在 page-meta 中设置了 */
}
</style>

注意事项：

确保执行时机：onReady 或 mounted 是较为合适的时机，因为此时页面的 DOM 已经准备好，可以确保 page-meta 的设置能够生效。
避免重复设置：如果页面中有多次设置 page-meta 的操作，确保它们不会相互冲突或覆盖。
缓存问题：如果怀疑是缓存导致的问题，可以尝试清除缓存或重启应用查看是否解决。
平台差异：不同平台（如微信小程序、H5等）可能对 page-meta 的支持有细微差异，确保在目标平台上进行测试。