微信小程序中编程支持多语言

现在越来越多、各个国家的人开始使用微信,所以在开发微信小程序时也需要考虑多语言的支持问题了。

获取当前微信设置的语言

微信小程序是运行在微信中的,而微信中用户设置的语言往往能代表用户对语言的偏好或是选择。

在微信小程序接口中,可以使用 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 >你好!</text>
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'
})

本文标题:微信小程序中编程支持多语言

文章作者:Morning Star

发布时间:2020年06月17日 - 11:06

最后更新:2021年04月16日 - 15:04

原始链接:https://www.mls-tech.info/weapp/weapp-i18n-handle/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。