只是替換靜態(tài)文本,就是簡(jiǎn)單的鍵值匹配，按照這個(gè)流程，保證很快上手國(guó)際化，語(yǔ)言切換采用的是登錄微信小程序時(shí) 識(shí)別系統(tǒng)語(yǔ)言做出中英文切換，并不是點(diǎn)擊切換

1、在 utils 目錄下新建一個(gè) 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': {
        //------- 聯(lián)系人 -----------
        "chineseName": "中文姓名",
        "englishName": "英文姓名",
        "gender": "性別",
        "birthday": "生日",
        "specialAnniversary": "特殊紀(jì)念日",
        "hobby": "愛(ài)好",
        "description": "其他說(shuō)明",
        "department": "部門",
        "position": "職務(wù)",
        "mobilePhone": "手機(jī)號(hào)",
        "wechat": "微信號(hào)",
        "otherContactMethod": "其他聯(lián)系方式",
        "createBy": "新增人",

        //------- 聯(lián)系人 end --------

    },
    'en': {
    
        //------- 聯(lián)系人 -----------
        "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",

        //------- 聯(lián)系人 end --------

    }
}

3、定義 events.js

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

function>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){

// 判斷系統(tǒng)語(yǔ)言 確定小程序語(yǔ)言
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、實(shí)際應(yīng)用

在應(yīng)用的時(shí)候，首先修改 js , 初始化一下語(yǔ)言模板

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

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


onLoad: function(){
.....
// 國(guó)際化
this.setLanguage();  // (1)
event.on("languageChanged", this, this.setLanguage); // (2)
......

}


.....
// 國(guó)際化
setLanguage() {
  this.setData({
    language: wx.T.getLanguage()
  });
},
......

然后在 wxml 中引用語(yǔ)言模板

{{language.chineseName}}

這樣在中文系統(tǒng)下，這里展示的就是 配置在loacles 里面的 中文姓名，其他系統(tǒng)語(yǔ)言 展示的是 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