uni-app国际化

uniapp国际化

uniapp国际化不需要采用i18n的方法，具体方法如下

新建语言包

如图所示在根目录下新建语言包管理文件，在里面新建所需要的语言文件，如下图

语言文件示例

module.exports = {
    langType: 'zh',
    home: { // 首页
        title: '全自动核酸提取仪',
        entryButton: '进入'
    },
    program: { //程序页面
        searchPlaceholder: '文件名',
        fileCode: '文件码',
        reagentCode: '试剂码',
        step: '步骤',
        fileDelete: '文件删除',
        fileSave: '文件另存',
        allSelect: '全选',
        cancel: '取消',
        remove: '删除',
        confirm: '确定',
        preview: '预览',
        newFile: '新建文件'
    }
}

vuex中使用语言包

在根目录下的stroe>index.js中初始化语言包

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 国际化相关代码
try {
    // 1. 分析用户已经选择的语言 
    var userLang = uni.getStorageSync("userLang");
    // 2. 如果用户没有选择过获取用户手机的语言
    if (!userLang) {
        const sys = uni.getSystemInfoSync();
        userLang = sys.language;
    }
    // 以中英文切换为例, 其他语言请使用 getSystemInfoSync 获取语言对应的字符串
    // 然后扩展语言包即可
    if (userLang.substring(0, 2) == 'zh') {
        var lang = require('../language/zh.js');
    } else {
        var lang = require('../language/en.js');
    }
} catch (e) {
    // error
}

const store = new Vuex.Store({
    state:{
        lang: lang,
    },
    mutations:{
        getLang(state, callback) { //手动切换语言方法
            var userLang = uni.getStorageSync("userLang");
            if (!userLang) {
                const sys = uni.getSystemInfoSync();
                userLang = sys.language;
            }
            if (userLang.substring(0, 2) == 'zh') {
                var lang = require('../language/zh.js');
                uni.setStorageSync('userLang', 'zh')
            } else {
                var lang = require('../language/en.js');
                uni.setStorageSync('userLang', 'en')
            }
            state.lang = lang;
            callback()//回调函数
        },
    }
})

页面中使用vuex

按照常规的vuex与页面通信的方式即可

import {mapState} from "vuex";
computed: {
    ...mapState(['lang'])
}

重要提示

在Hbuildex2.2.5以下版本nvue中不能使用vuex