现在越来越多、各个国家的人开始使用微信,所以在开发微信小程序时也需要考虑多语言的支持问题了。
获取当前微信设置的语言
微信小程序是运行在微信中的,而微信中用户设置的语言往往能代表用户对语言的偏好或是选择。
在微信小程序接口中,可以使用 getSystemInfo 函数来获取用户语言的设置。 代码片段如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| data: { language: '' },
onLoad: function () { wx.getSystemInfo({ complete: (res) => { this.setData({ language: res.language }) }, }) }
|
设置多语言信息文件
在本例中准备中文简体和英文两个语言信息文件,分别命名为: 中文 - message_zh_CN.js, 英文 - message_en.js, 文件的内容如下:
(两个文件都建立在项目的 utils 目录下)
message_zh_CN.js
1 2 3 4 5 6 7 8
| const messages = { 'home-greeting': '你好!这是一个小程序!', 'home-title': '主页' }
module.exports = { messages: messages }
|
message_en.js
1 2 3 4 5 6 7 8
| const messages = { 'home-greeting': 'Hello! This is a weapp!', 'home-title': 'Home' }
module.exports = { messages: messages }
|
构建多语言实用类
在 utils 目录下新建一个名为: language_util.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
| const LANGUAGE_STORAGE_KEY = 'Language'
const i18n = {
currLang: '',
messages: {},
getCurrLanguage: function() { if (this.currLang === '') { this.currLang = wx.getStorageSync(LANGUAGE_STORAGE_KEY) if (this.currLang === '') { var info = wx.getSystemInfoSync() this.currLang = info.language wx.setStorageSync(LANGUAGE_STORAGE_KEY, this.currLang) } } this.initMessages() return this.currLang },
initMessages: function() { var langModule = require('./message_' + this.currLang + '.js') this.messages = langModule.messages console.log('message = ' + JSON.stringify(this.messages)) },
setLanguage: function(lang) { this.currLang = lang wx.setStorageSync(LANGUAGE_STORAGE_KEY, lang) this.initMessages() } }
module.exports = { i18n: i18n }
|
在 Page 中引入多语言实用类
以在 index.js 文件中引入为例:
在 index.js 文件开始引入并初始化 i18n 类, 代码如下:
1 2
| const i18n = require('../../utils/language_util').i18n i18n.getCurrLanguage()
|
在 wxml 页面中使用
因为 wxml 文件中不支持使用函数表达式,因此需要首先在对应的 Page 对象中将 messages 设置为 data 中的属性,如下面的代码:
1 2 3
| data: { $: i18n.messages },
|
将 i18n 对象中的 messages 属性赋给了变量 ‘$’
然后改变 wxml 的代码, 比如初始的代码为:
1
| <text >{{ $['home-greeting'] }}</text>
|
这样,页面输出的内容就可以随用户微信设置的语言来变化了。
用户手动选择语言
如果用户希望在小程序中使用的语言与微信中的不一样,这时就可以进行手动设置, 对于上面写好的 i18n 类来说,就是调用其 setLanguage 方法。
下面的代码模拟了一个语言设置按钮的行为:
1 2 3 4 5
| changeLang: function() { i18n.setLanguage('en') this.setData({ $: i18n.messages })
|
注意:在调用 setLanguage,需要手动更新 data 中的属性值,这样页面上对应的值才会发生变化
改变导航栏中的标题
需要用程序实现,调用 wx 中的 setNavigationBarTitle 方法, 如:
1 2 3
| wx.setNavigationBarTitle({ title: this.data.$['home-title'], })
|
改变 TabBar 中的文字
需要用程序实现,调用 wx 中的 setTabBarItem 方法, 如:
1 2 3 4 5 6
| wx.setTabBarItem({ index: 0, text: this.data.$['home-item-1'] iconPath: '/path/to/iconPath', selectedIconPath: '/path/to/selectedIconPath' })
|