微信小程序多语言实现方案

这个话题纯属炒冷饭，已经有不少同行搞出来了，本文只是记录自己处理的过程。

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

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>