微信小程序实现多语言方案|中英互译

不管哪个系统，多语言方案套路都是一样的

1、建立多语言映射库
2、记录并存储用户选择的语言版本，下次进入直接进入对应语言版本
3、根据用户设置动态加载语言版本
4、前台调用

效果图 🐤

小程序代码片段（建议看代码片段，文章相对于啰嗦点）

https://developers.weixin.qq.com/s/ByeaUSmE71Gg

目录结构

在这里插入图片描述

上代码 🐤 🐤

项目根目录新建i18n目录，在该目录下存放不同版本的语言库 🐤

zh_CN.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="{{index}}" range="{{array}}" range-key="name"><view class="picker">{{language}}{{array[index].name}}</view></picker>
</view>

js文件

const base = require('../../utils/language.js')
const _ = base._Component({data: {index: 0,language: 'zh_CN',array: [{value: 'zh_CN',name: _('简体中文')},{value: 'en',name: _('英文')}]},lifetimes: {attached() {const language = base.getLanguage()let index = 0switch (language) {case 'zh_CN':index = 0breakcase 'en':index = 1breakdefault:break}this.setData({index: index,language: language,array: [{value: 'zh_CN',name: _('简体中文')},{value: 'en',name: _('英文')}]})}},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.language)// 重新加载一次页面// wx.navigateTo({//     url: 'index'// })this.setData({array: [{value: 'zh_CN',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()})}
})

前台页面使用

<switchLanguage bindrefleshevent="reflesh"></switchLanguage>
<text>{{_t['多语言']}}</text>
<view>{{_t['近一月']}}</view>
<view>{{_t['近三月']}}</view>
<view>{{_t['当前班次']}}</view>