这个话题纯属炒冷饭，已经有不少同行搞出来了，本文只是记录自己处理的过程。
不管哪个系统，多语言方案套路都是一样的
1、建立多语言映射库
2、记录并存储用户选择的语言版本，下次进入直接进入对应语言版本
3、根据用户设置动态加载语言版本
4、前台调用
上代码
项目根目录新建i18n目录，在该目录下存放不同版本的语言库
zh_CN.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | const languageMap = { '简体中文': '简体中文', '繁体中文': '繁体中文', '英文': '英文', '多语言': '多语言', '设备状态可视图': '设备状态可视图', '当前班次': '当前班次', '近一周': '近一周', '近一月': '近一月', '近三月': '近三月'}module.exports = { languageMap: languageMap} |
zh_TW.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | const languageMap = { '简体中文': '簡體中文', '繁体中文': '繁體中文', '英文': '英文', '多语言': '多語言', '设备状态可视图': '設備狀態可視圖', '当前班次': '當前班次', '近一周': '近壹周', '近一月': '近壹月', '近三月': '近三月'}module.exports = { languageMap: languageMap} |
en.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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文件
1 2 3 4 5 6 7 | <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文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | 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文件可以自己定义
1 2 3 4 5 6 | .switch-language-box{ position: fixed; top: 10px; right: 10px; border: 1px solid gray;} |
应用
json文件（引用语言切换组件）
1 2 3 | { "usingComponents": {"switchLanguage": "../../components/switchLanguage/index"}} |
wxml文件
1 | <switchLanguage bindrefleshevent="reflesh"></switchLanguage> |
js文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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() }) }}) |
前台使用
1 | <text>{{_t['多语言']}}</text> |