微信小程序实现多语言方案中英互译
目录
微信小程序实现多语言方案|中英互译
不管哪个系统，多语言方案套路都是一样的
**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 = 0
switch (language) {
case 'zh_CN':
index = 0
break
case 'en':
index = 1
break
default:
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>效果图
