Uniapp国际化详解

一、Uniapp国际化方案

在多语言需求的场景下，Uniapp推出了国际化方案。在多语言需求中，可以为不同的语言提供相应的翻译，便于用户更好地了解应用的功能。下面来看一下Uniapp的国际化方案。

//main.js
import VueI18n from 'vue-i18n'
import zh from '@/locale/lang/zh-CN'  //引入中文
import en from '@/locale/lang/en-US'  //引入英文
import cnmsg from '@/locale/lang/cnmsg.json'  //引入中文语言包
import enmsg from '@/locale/lang/enmsg.json'  //引入英文语言包

Vue.use(VueI18n);

const locale = uni.getStorageSync('locale') || 'zh_CN';

const i18n = new VueI18n({
    locale,
    messages: {
        'zh_CN': Object.assign(zh, cnmsg),
        'en_US': Object.assign(en, enmsg),
    }
});

export default i18n;

在上述代码中，我们已经可以看到国际化的核心文件Vue-i18n以及引入的中英文语言包。通过用户设置获取所需语言包。

二、Uniapp国际化Tabbar无效

在Uniapp国际化方案中，我们有时会发现Tabbar组件的国际化无效。原因是Tabbar是在APP.vue中定义和切换。我们需要在每个子页面中重新定义Tabbar组件来解决这个问题。

//app.vue

   

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('common');

export default {
    computed: {
        ...mapState(['tabbars', 'is_need_hidden_tab_bar']),
    },
    watch: {
        '$route'(val, old) {
            let index = -1;
            this.tabbars.forEach((val, i) => {
                if (val.pagePath === this.$route.fullPath) {
                    index = i;
                }
            });
            this.$nextTick(() => {
                uni.setTabBarItem({
                    index: index,
                    text: this.tabbars[index]['text'],
                    iconPath: this.tabbars[index]['iconPath'],
                    selectedIconPath: this.tabbars[index]['selectedIconPath']
                });
            });
        }
    },
    mounted() {
        this.$nextTick(() => {
            uni.setTabBarStyle({
                color: '#999999',
                selectedColor: '#F4A852',
                backgroundColor: '#fff',
                borderStyle: 'black',
            });
            uni.setTabBarItem({
                index: 0,
                text: this.tabbars[0]['text'],
                iconPath: this.tabbars[0]['iconPath'],
                selectedIconPath: this.tabbars[0]['selectedIconPath']
            });
        });
    }
}
</script>

可以看到，在每个子页面中都重新定义Tabbar组件，需要在子页面中修改Tabbar的信息。

三、Uniapp国际化方案的理解

Uniapp国际化方案并不仅仅是变换语言，更是应用多国语言和不同语言环境下的区别。它是一种特定的方案，可以建立在Vue-i18n、Vant和Element-UI基础之上。此外，该方案还可以设置默认语言，提供强大而灵活的语言包管理等功能。

//utils/http.js

import { Storage } from '@/common/utils';

export default function http(method, url, params) {
    const defaultHeader = {
        'Content-Type': 'application/json;charset=UTF-8',
        'X-Requested-With': 'XMLHttpRequest',
        'Accept-Language': Storage.get('locale')
    };

    return new Promise((resolve, reject) => {
        uni.request({
            method: method,
            url: url,
            data: params,
            timeout: 10000,
            header: defaultHeader,
            success: res => {
                if (res.data.code === 0) {
                    resolve(res.data);
                } else {
                    reject(res.data.message || '请求失败');
                }
            },
            fail: res => {
                reject(res || '请求失败');
            }
        });
    });
}

在 above 代码中，我们可以很清楚地看到设置了Accept-Language请求头，这个参数是一种多语言的标识，后端通过该参数可以向前后端提供符合当前语言环境的文本信息。

四、Uniapp国际化默认值修改

我们可以为不同语言设置不同的默认值。这对于多语言应用程序来说很重要，可以根据不同语言和文化设定不同的默认值，提高多语言应用程序的易用性。

//i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from '@/common/lang/en'
import zh from '@/common/lang/zh'

Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: 'zh',
    fallbackLocale: 'en',
    messages: {
        'zh': {
            ...zh
        },
        'en': {
            ...en
        }
    }
})

export default i18n

在这个示例中，我们可以看到locale被指定为'zh'，fallbackLocale被指定为'en'。如果zh没有定义某个想要的键和字符串值，i18n将使用定义在en区域设置中的默认值。

五、Uniapp国际化分模块

Uniapp国际化方案可以轻松地在项目中管理多个语言。为了更好地组织和管理默认语言，可以将其划分为不同的模块。

//locale/lang/zh-CN.js

export default {
    header: {
        title: '骆驼商城'
    },
    index: {
        find: '找货',
        store: '店铺',
        card: '购物车',
        user: '我的'
    },
    login: {
        title: '欢迎登录',
        phoneLabel: '手机号',
        phonePlaceholder: '请输入手机号',
        codeLabel: '验证码',
        codePlaceholder: '请输入验证码',
        codeBtn: '获取验证码',
        submitBtn: '登录'
    }
}

我们可以很清晰地看到，国际化文件中已经被分为多个模块，每个模块都有自己的对象，可以方便地对不同的页面进行管理。

六、Uniapp国际化appid需要不同吗

Uninapp应用程序的APPID不需要因为多语言而变化。在同一个APPID下，可以轻松地管理并提供多种语言版本的应用程序。因此，不需要为不同语言版本的应用程序分配不同的APPID。

通过上述方法，我们已经可以在Uniapp中实现国际化的方案。需要注意的是，国际化方案不仅仅是为了展示不同的翻译，它更是为了能够更好地将应用程序扩展到全球市场，并提供更加符合本地用户环境的便捷服务。同时，针对不同的业务需求，手动修改国际化相关的代码可以适应更多的灵活性需求。