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

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

获取当前微信设置的语言

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

在微信小程序接口中，可以使用 getSystemInfo 函数来获取用户语言的设置。代码片段如下:


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

const messages = {
  'home-greeting': '你好！这是一个小程序！',
  'home-title': '主页'
}

module.exports = {
  messages: messages
}

message_en.js

const messages = {
  'home-greeting': 'Hello! This is a weapp!',
  'home-title': 'Home'
}

module.exports = {
  messages: messages
}

构建多语言实用类

在 utils 目录下新建一个名为: language_util.js 的文件，包括以下内容:


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 方法。

下面的代码模拟了一个语言设置按钮的行为:

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 方法, 如:

wx.setTabBarItem({
  index: 0,
  text: this.data.$['home-item-1']
  iconPath: '/path/to/iconPath',
  selectedIconPath: '/path/to/selectedIconPath'
})