现在越来越多、各个国家的人开始使用微信,所以在开发微信小程序时也需要考虑多语言的支持问题了。
获取当前微信设置的语言
微信小程序是运行在微信中的,而微信中用户设置的语言往往能代表用户对语言的偏好或是选择。
在微信小程序接口中,可以使用 getSystemInfo 函数来获取用户语言的设置。 代码片段如下:
1 |
|
设置多语言信息文件
在本例中准备中文简体和英文两个语言信息文件,分别命名为: 中文 - message_zh_CN.js, 英文 - message_en.js, 文件的内容如下:
(两个文件都建立在项目的 utils 目录下)
message_zh_CN.js
1 | const messages = { |
message_en.js
1 | const messages = { |
构建多语言实用类
在 utils 目录下新建一个名为: language_util.js 的文件,包括以下内容:
1 |
|
在 Page 中引入多语言实用类
以在 index.js 文件中引入为例:
在 index.js 文件开始引入并初始化 i18n 类, 代码如下:
1 | const i18n = require('../../utils/language_util').i18n |
在 wxml 页面中使用
因为 wxml 文件中不支持使用函数表达式,因此需要首先在对应的 Page 对象中将 messages 设置为 data 中的属性,如下面的代码:
1 | data: { |
将 i18n 对象中的 messages 属性赋给了变量 ‘$’
然后改变 wxml 的代码, 比如初始的代码为:
1 | <text >你好!</text> |
1 | <text >{{ $['home-greeting'] }}</text> |
这样,页面输出的内容就可以随用户微信设置的语言来变化了。
用户手动选择语言
如果用户希望在小程序中使用的语言与微信中的不一样,这时就可以进行手动设置, 对于上面写好的 i18n 类来说,就是调用其 setLanguage 方法。
下面的代码模拟了一个语言设置按钮的行为:
1 | changeLang: function() { |
注意:在调用 setLanguage,需要手动更新 data 中的属性值,这样页面上对应的值才会发生变化
改变导航栏中的标题
需要用程序实现,调用 wx 中的 setNavigationBarTitle 方法, 如:
1 | wx.setNavigationBarTitle({ |
改变 TabBar 中的文字
需要用程序实现,调用 wx 中的 setTabBarItem 方法, 如:
1 | wx.setTabBarItem({ |