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

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

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

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>