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