uniapp国际化语言包一键全局切换语言

UniApp的国际化语言包支持一键全局切换语言的功能。以下是具体步骤：

1. 在UniApp项目中创建一个lang文件夹，用于存放语言包。

2. 在lang文件夹中创建一个index.js文件，用于定义语言包和默认语言。

3. 在index.js文件中定义语言包，例如：

export default {
  en: {
    hello: 'Hello',
    world: 'World'
  },
  zh: {
    hello: '你好',
    world: '世界'
  }
}

4. 在index.js文件中定义默认语言：

export const DEFAULT_LANG = 'en';

5. 在App.vue中引入语言包和默认语言：

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('world') }}</p>
  </div>
</template>

<script>
  import lang from '@/lang';
  import { DEFAULT_LANG } from '@/lang/index';

  export default {
    computed: {
      lang() {
        return lang[this.$store.state.lang || DEFAULT_LANG];
      }
    },
    methods: {
      setLang(lang) {
        this.$store.commit('setLang', lang);
        uni.setStorageSync('lang', lang);
      }
    },
    watch: {
      '$store.state.lang'(newVal) {
        uni.setNavigationBarTitle({
          title: this.lang.title
        });
      }
    },
    created() {
      this.$store.commit('initLang', uni.getStorageSync('lang'));
    }
  }
</script>

6. 在main.js中定义语言切换方法：

import Vue from 'vue'
import App from './App'
import store from './store'
import lang from '@/lang'
import { DEFAULT_LANG } from '@/lang/index'

Vue.config.productionTip = false

Vue.prototype.$t = function(key) {
  const langType = store.state.lang || uni.getStorageSync('lang') || DEFAULT_LANG;
  const value = lang[langType][key] || lang[DEFAULT_LANG][key] || '';
  return value;
}

App.mpType = 'app'

const app = new Vue({
  store,
  ...App
})
app.$mount()

7. 在store.js中定义语言切换方法：

import Vue from 'vue'
import Vuex from 'vuex'
import { DEFAULT_LANG } from '@/lang/index'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    lang: ''
  },
  mutations: {
    initLang(state, lang) {
      state.lang = lang || DEFAULT_LANG;
    },
    setLang(state, lang) {
      state.lang = lang;
    }
  },
  actions: {},
  modules: {}
})

8. 在页面中添加语言切换按钮：

<template>
  <div>
    <button @click="setLang('en')">English</button>
    <button @click="setLang('zh')">中文</button>
  </div>
</template>

<script>
  export default {
    methods: {
      setLang(lang) {
        this.$store.commit('setLang', lang);
        uni.setStorageSync('lang', lang);
      }
    }
  }
</script>

这样就可以实现UniApp的国际化语言包一键全局切换语言的功能了。