微信小程序-国际化语言包

微信小程序对没有对多语言的支持，我们可以自从加入，因为项目中需要切换简体字和繁体字，所以去研究了一下。

需要注意的是：一旦用户修改了语言，所有的页面都要做出修改；记住用户选择的语言，方便用户下次打开。

效果：

 实现过程：

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

let T = {
  locale : null,
  locales : {},           //语言包内容
  langCode : ['zh_jian','zh_fan'] 
}

T.registerLocale = function(locales){
  T.locales = locales;      //将语言包里的对象赋给当前对象的locales属性
}

T.setLocale = function(code){
  T.locale = code;          //存储当前语言的种类('zh_jian'或者'zh_fan')
}

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

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


export default T;

T.locale 用来存储一个对象，这个对象是当前用户选择的语言。在使用 T 之前，我们需要调用 registerLocale 初始化 locales。

2. /utils/locales.js 中这样定义可用的 locales：

export default {
  'zh_jian' : {
    'language' : '简体中文',
    'login' : '登录',
    'logout' : '登出',
    'authorization' : '授权',
    'pay' : '支付',
    'changeLanguage': '切换语言',
    'search': '搜索',
    'investment' : '投资金额',
    'invest_industry' : '投资行业',
    'invest_stage' : '投资阶段',
    'address' : '地址',
    'createdate' : '成立时间',
    'clubregisternum' : '协会人数',
    'classification' : '分类',
    'area': '区域',
    'essential_information' : '基本信息',
    'association_name' : '社团名称',
    'association_address': '社团地址',
    'contacts' : '联 系 人',
    'phone': '联系电话',

  },

  'zh_fan' : {
    'language': '繁體中文',
    'login': '登錄',
    'logout': '登出',
    'authorization' : '授權',
    'pay' : '支付',
    'changeLanguage': '切換語言',
    'search' : '搜索',
    'investment' : '投資金額',
    'invest_industry': '投資行業',
    'invest_stage': '投資階段',
    'address': '地址',
    'createdate': '成立時間',
    'clubregisternum': '協會人數',
    'classification': '分類',
    'area' : '區域',
    'essential_information': '基本信息',
    'association_name': '社團名稱',
    'association_address': '社團地址',
    'contacts': '聯 繫 人',
    'phone': '聯繫電話',
 
  }
}

3.为了让 T 成为全局变量，我们需要在小程序注册之前就将其初始化。在 app.js 中写入如下代码。

var api = require('utils/api.js')

import locales from './utils/locales.js';
import T from './utils/i18n.js';
import event from './utils/event.js';
import common from './utils/common.js';

//用 /utils/locales 注册了 locale
T.registerLocale(locales);
//当前语言设置为用户上一次选择的语言，如果是第一次使用，则调用 T.setLocaleByIndex(0) 将语言设置成中文
T.setLocaleByIndex(wx.getStorageSync('langIndex') || 0);
//将 T 注册到 wx 之下，这样在任何地方都可以调用 wx.T.getLanguage() 来得到当前的语言对象了。
wx.T = T;

wx.event = event;
wx.api = api;

App({
  globalData: {
    
  },
  onLaunch: function () {
    //换取token的方法中 返回res 包含用户的语言信息
       let langFlag = res.data.data.LANGFLAG;
       wx.T.setLocaleByIndex(langFlag);
       wx.setStorageSync('langIndex', langFlag);
 
})

4.使用

在需要设置的页面的js定义：

data:{
 language : '',
 langIndex : 0,
}
onLoad: function () {
    //来确保用户退出之后重新进入小程序时仍能正常显示当前使用的语言。
    this.setData({ 'langIndex': wx.getStorageSync('langIndex') });   
    wx.event.on('changeLanguage',this,this.setData({ 'language': wx.T.getLanguage() });
},
changeLanguage(e) {
    let index = e.detail.value;
    this.setData({	// (1)
      langIndex: index
    });
    wx.T.setLocaleByIndex(index);
    this.setLanguage();
    event.emit('languageChanged');

    wx.setStorage({
      key: 'langIndex',
      data: this.data.langIndex
    })
  },

 在需要页面的XML中引用：

引用规则{{language.字段名}}，其中字段名就是 locales.js中的字段名称

{{language.phone}}

 5.在 /utils/event.js 中写入如下的代码：

// /utils/event.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;

这里的 on 用来添加一个事件处理函数，每当 emit() 被调用触发某个事件时，都会执行这些函数，并且以 on() 中存入的 self 作为 this argument， emit() 传入的 data 作为参数。

总结：自己在项目中已经可以使用了，也是参考别人的博客哦，在此附上链接《微信小程序语言切换（国际化》微信小程序语言切换（国际化》，感谢！