uni-app中titleNView.buttons text 国际化怎么实现？

参考uni-app在App端动态修改原生导航栏，修改buttons使用 this.$t(’’)

在 uni-app 中，titleNView 的 buttons 的 text 属性可以通过动态绑定的方式实现国际化。具体步骤如下：

1. 准备国际化资源文件

首先，你需要准备好不同语言的资源文件。例如：

• lang/en.js（英文）

  export default {
    back: 'Back',
    save: 'Save',
    // 其他文本
  };

• lang/zh-CN.js（中文）

  export default {
    back: '返回',
    save: '保存',
    // 其他文本
  };

2. 在 main.js 中引入并配置国际化

在 main.js 中引入并配置国际化插件，例如 vue-i18n。

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import en from './lang/en.js';
import zhCN from './lang/zh-CN.js';

Vue.use(VueI18n);

const messages = {
  en,
  'zh-CN': zhCN,
};

const i18n = new VueI18n({
  locale: 'zh-CN', // 默认语言
  messages,
});

new Vue({
  i18n,
}).$mount('#app');

3. 在页面中动态绑定 titleNView.buttons.text

在页面中使用 this.$t 方法来获取国际化文本，并将其动态绑定到 titleNView.buttons.text。

<template>
  <view>
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 动态设置 titleNView
      titleNView: {
        buttons: [
          {
            text: this.$t('back'),
            fontSize: '16px',
            // 其他按钮配置
          },
          {
            text: this.$t('save'),
            fontSize: '16px',
            // 其他按钮配置
          },
        ],
      },
    };
  },
  onLoad() {
    // 动态设置导航栏按钮
    uni.setNavigationBarTitle({
      title: this.$t('pageTitle'),
    });
  },
};
</script>

4. 切换语言

你可以通过 this.$i18n.locale 来切换语言，并更新 titleNView.buttons.text。

methods: {
  changeLanguage(lang) {
    this.$i18n.locale = lang;
    this.titleNView.buttons[0].text = this.$t('back');
    this.titleNView.buttons[1].text = this.$t('save');
    uni.setNavigationBarTitle({
      title: this.$t('pageTitle'),
    });
  },
},

5. 在页面中使用 changeLanguage 方法

你可以在页面中添加一个按钮，点击时调用 changeLanguage 方法来切换语言。

<template>
  <view>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('zh-CN')">中文</button>
  </view>
</template>