这个话题纯属炒冷饭，已经有不少同行搞出来了，本文只是记录自己处理的过程。
不管哪个系统，多语言方案套路都是一样的
1、建立多语言映射库
2、记录并存储用户选择的语言版本，下次进入直接进入对应语言版本
3、根据用户设置动态加载语言版本
4、前台调用
上代码
项目根目录新建i18n目录，在该目录下存放不同版本的语言库
zh_CN.js
const languageMap = {
\'简体中文\': \'简体中文\',
\'繁体中文\': \'繁体中文\',
\'英文\': \'英文\',
\'多语言\': \'多语言\',
\'设备状态可视图\': \'设备状态可视图\',
\'当前班次\': \'当前班次\',
\'近一周\': \'近一周\',
\'近一月\': \'近一月\',
\'近三月\': \'近三月\'
}
module.exports = {
languageMap: languageMap
}
zh_TW.js
const languageMap = {
\'简体中文\': \'簡體中文\',
\'繁体中文\': \'繁體中文\',
\'英文\': \'英文\',
\'多语言\': \'多語言\',
\'设备状态可视图\': \'設備狀態可視圖\',
\'当前班次\': \'當前班次\',
\'近一周\': \'近壹周\',
\'近一月\': \'近壹月\',
\'近三月\': \'近三月\'
}
module.exports = {
languageMap: languageMap
}
en.js
const languageMap = {
\'简体中文\': \'Simplified Chinese\',
\'繁体中文\': \'Traditional Chinese\',
\'英文\': \'English\',
\'多语言\': \'multi language\',
\'设备状态可视图\': \'equipment status chart\',
\'当前班次\': \'current class\',
\'近一周\': \'last week\',
\'近一月\': \'last month\',
\'近三月\': \'last three month\'
}
module.exports = {
languageMap: languageMap
}
key以中文做标识，前台书写的时候可以直接写中文，对英语不好的比较方便
项目根目录新建utils目录，在该目录下新建language.js
function getLanguage() {
// 获取本次存储的语言版本，默认中文
return wx.getStorageSync(\'language\') ||\'zh_CN\'
}
function translate() {
// 返回翻译对照映射表
return require(\'../i18n/\' + getLanguage() + \'.js\').languageMap
}
function translateText(desc) {
// 翻译
return translate()[desc] || desc
}
module.exports = {
getLanguage: getLanguage,
_t: translate, // JSON映射表
_: translateText // 翻译函数
}
为什么要有translate和translateText两个方法？
因为小程序wxml文件中只能使用对象，js文件中只能使用函数，无法通用
项目根目录新建components目录，在该目录新建switchLanguage目录，存放语言切换组件
wxml文件
<view class="switch-language-box">
<picker bindchange="bindPickerChange" value="{{array[index].value}}" range="{{array}}" range-key="name">
<view class="picker">
{{array[index].name}}
</view>
</picker>
</view>
js文件
const base = require(\'../../utils/language.js\')
const _ = base._
Component({
options: {},
properties: {},
data: {
index: 0,
language: \'zh_CN\',
array: [{
value: \'zh_CN\',
name: _(\'简体中文\')
}, {
value: \'zh_TW\',
name: _(\'繁体中文\')
}, {
value: \'en\',
name: _(\'英文\')
}]
},
created () {
const language = base.getLanguage()
let index = 0
switch(language) {
case \'zh_CN\':
index = 0
break
case \'zh_TW\':
index = 1
break
case \'en\':
index = 2
break
default:
break
}
this.setData({
index: index,
language: language
})
},
methods: {
bindPickerChange: function (e) {
this.setData({
index: e.detail.value,
language: this.data.array[e.detail.value].value
})
this.switchLanguage()
},
switchLanguage () {
wx.setStorageSync(\'language\', this.data.array[this.data.index].value)
// 重新加载一次页面
// wx.navigateTo({
// url: \'index\'
// })
this.setData({
array: [{
value: \'zh_CN\',
name: _(\'简体中文\')
}, {
value: \'zh_TW\',
name: _(\'繁体中文\')
}, {
value: \'en\',
name: _(\'英文\')
}]
})
// 触发页面刷新，否则当前页语言版本无法更新
this.triggerEvent(\'refleshevent\')
}
}
})
wxss文件可以自己定义
.switch-language-box{
position: fixed;
top: 10px;
right: 10px;
border: 1px solid gray;
}
应用
json文件（引用语言切换组件）
{
"usingComponents": {"switchLanguage": "../../components/switchLanguage/index"}
}
wxml文件
<switchLanguage bindrefleshevent="reflesh"></switchLanguage>
js文件
const base = require(\'../../utils/language.js\')
const _ = base._
Page({
data: {
_t: \'\'
},
onLoad(option) {
this.mixinFn()
wx.setNavigationBarTitle({
title: _(\'设备状态可视图\')
})
},
reflesh () {
this.onLoad()
},
mixinFn () {
this.setData({
_t: base._t()
})
}
})
前台使用
<text>{{_t[\'多语言\']}}</text>
请发表评论