微信小程序国际化

只是替换静态文本,就是简单的键值匹配，按照这个流程，保证很快上手国际化，语言切换采用的是登录微信小程序时识别系统语言做出中英文切换，并不是点击切换

1、在 utils 目录下新建一个 i18n.js 文件

// /utils/i18n.js
let T = {
    locale: null,
    locales: {},
    langCode: ['zh-Hans', 'en']
}

T.registerLocale = function (locales) {
    T.locales = locales;
}

T.setLocale = function (code) {
    T.locale = code;
}

T.setLocaleByIndex = function(index) {
    T.setLocale(T.langCode[index]);
}


T.getLanguage = function() {
    return T.locales[T.locale];
}

export default T

2、定义中英文模板

// /utils/locales.js
export default {
    'zh-Hans': {
        //------- 联系人 -----------
        "chineseName": "中文姓名",
        "englishName": "英文姓名",
        "gender": "性别",
        "birthday": "生日",
        "specialAnniversary": "特殊纪念日",
        "hobby": "爱好",
        "description": "其他说明",
        "department": "部门",
        "position": "职务",
        "mobilePhone": "手机号",
        "wechat": "微信号",
        "otherContactMethod": "其他联系方式",
        "createBy": "新增人",

        //------- 联系人 end --------

    },
    'en': {
    
        //------- 联系人 -----------
        "chineseName": "CHINESE NAME",
        "englishName": "ENGLISH NAME",
        "gender": "GENDER",
        "birthday": "BIRTHDAY",
        "specialAnniversary": "SPECIAL ANNIVERSARY",
        "hobby": "HOBBY",
        "description": "DESCRIPTION",
        "department": "DEPARTMENT",
        "position": "POSITION",
        "mobilePhone": " MOBILE PHONE",
        "wechat": "WECHAT",
        "otherContactMethod": "OTHER CONTACT METHOD",
        "createBy": "CREATE BY",

        //------- 联系人 end --------

    }
}

3、定义 events.js

// /utils/events.js
let events = {};

function on(name, self, callback) {
    let tuple = [self, callback];
    let callbacks = events[name];
    if (Array.isArray(callbacks)) {
        callbacks.push(tuple);
    }
    else {
        events[name] = [tuple];
    }
}

function remove(name, self) {
    let callbacks = events[name];
    if (Array.isArray(callbacks)) {
        events[name] = callbacks.filter((tuple) => {
            return tuple[0] != self;
        })
    }
}

function emit(name, data) {
    let callbacks = events[name];
    if (Array.isArray(callbacks)) {
        callbacks.map((tuple) => {
            let self = tuple[0];
            let callback = tuple[1];
            callback.call(self, data);
        })
    }
}

exports.on = on;
exports.remove = remove;
exports.emit = emit;

4、初始化语言

在进入小程序的时候判断系统语言，然后将小程序的语言设置成对应的英语/汉语，在 app.js 做出判断

import locales from './utils/locales'
import T from './utils/i18n'
import event from './utils/event'

T.registerLocale(locales);  // (1)
T.setLocaleByIndex(wx.getStorageSync('langIndex') || 0); // (2)
wx.T = T;  // (3)


onLaunch:function(){
wx.getSystemInfo(){

success(res){

// 判断系统语言 确定小程序语言
if ( res.language === 'zh_CN') {
  wx.T.setLocaleByIndex(0);
  event.emit('languageChanged');
  wx.setStorage({
    key: 'langIndex',
    data: 0
  })
}else{
  wx.T.setLocaleByIndex(1);
  event.emit('languageChanged');
  wx.setStorage({
    key: 'langIndex',
    data: 1
  })
}


'''''
}}

5、实际应用

在应用的时候，首先修改 js , 初始化一下语言模板

import event from '../../utils/event'

data: {
  language: '',
   .........
}


onLoad: function(){
.....
// 国际化
this.setLanguage();  // (1)
event.on("languageChanged", this, this.setLanguage); // (2)
......

}


.....
// 国际化
setLanguage() {
  this.setData({
    language: wx.T.getLanguage()
  });
},
......

然后在 wxml 中引用语言模板

{{language.chineseName}}

这样在中文系统下，这里展示的就是配置在loacles 里面的中文姓名，其他系统语言展示的是 CHINESE NAME

参考资料：https://upupming.site/2018/07/23/mini-program-i18n/#%E5%88%9B%E5%BB%BA%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0%E5%B9%B6%E6%B3%A8%E5%86%8C%E5%88%B0-wx-%E4%B9%8B%E4%B8%8B