微信小程序原生开发-国际化

1.编写i18n文件

export default { // 示例en文件
  language: 'language',
  recommendedReply: 'recommendedReply'
}

import zh from './language/zh'
import zh_HK from './language/zh_HK'
import zh_TW from './language/zh_TW'
import en from './language/en'

export const i18nText = {
  zh,
  en,
  zh_HK,
  zh_TW
}

export const langList = [
  {
    type: 'zh',
    label: '简体中文',
    desc: '简体中文'
  },
  {
    type: 'zh_TW',
    label: '繁體中文（中國台灣）',
    desc: '繁體中文（中國台灣）'
  },
  {
    type: 'zh_HK',
    label: '繁體中文（中國香港）',
    desc: '繁體中文（中國香港）'
  },
  {
    type: 'en',
    label: 'English',
    desc: '英语'
  }
]

2.获取不同的语言，在app.js中写，方便各个地方使用

  getLangPack() {
    const lang = wx.getStorageSync('language') || 'zh' // 选择的语言存在storage中，默认去zh
    const {i18nText} = require('./utils/i18n.js') // 获取不同的语种
    return i18nText[lang] || i18nText['zh']
  }

3.写一个pub事件，并在app.js中注册，方便使用

/**
 * 发布订阅类
 * 最好是在onShow中订阅，在onHide中取消
 */
class PubSub {
  constructor() {
    this.PubSubCache = {
      $uid: 0
    };
  }

  /**
   * 订阅信息
   * @param {String} type 事件名
   * @param {Function} handler 事件处理回调
   */
  on(type, handler) {
    let cache = this.PubSubCache[type] || (this.PubSubCache[type] = {});

    handler.$uid = handler.$uid || this.PubSubCache.$uid++;
    cache[handler.$uid] = handler;
  }

  /**
   * 发布消息
   * @param {String} type 事件名
   * @param  {...any} param 事件参数
   */
  emit(type, ...param) {
    let cache = this.PubSubCache[type], 
        key, 
        tmp;

    if(!cache) return;

    for(key in cache) {
      tmp = cache[key];
      cache[key].call(this, ...param);
    }
  }

  /**
   * 解除事件
   * handle为null时解除所有事件，传入同一回调删除指定事件的指定回调
   * @param {String} type 事件名
   * @param {Function} handler 事件处理回调
   */
  off(type, handler) {
    let counter = 0,
        $type,
        cache = this.PubSubCache[type];

    if(handler == null) {
      if(!cache) return true;
      return !!this.PubSubCache[type] && (delete this.PubSubCache[type]);
    } else {
      !!this.PubSubCache[type] && (delete this.PubSubCache[type][handler.$uid]);
    }

    for($type in cache) {
      counter++;
    }

    return !counter && (delete this.PubSubCache[type]);
  }
}

module.exports = PubSub;

  /**事件订阅器 */
  get pubSub() {
    if (!pubSub) {
      pubSub = new PubSub();
    }
    return pubSub;
  }

4.切换不同语言的逻辑

  changeLanguage(e){
    const language=e.currentTarget.dataset.type
    this.setData({
      language
    })
  },
  save(){
   wx.setStorageSync('language',this.data.language)
   util.tips("保存成功")
   app.pubSub.emit("languageChanged")
   wx.navigateBack({})
  },

5.写一个能够融合page的切换语言时给每个页面实时切换

export function createI18nPage(pageOptions) {
  const originalOnLoad = pageOptions.onLoad
  const originalOnUnload = pageOptions.onUnload

  if (!pageOptions.data) {
    pageOptions.data = {}
  }

  // 放到 onLoad 里初始化 langPack，确保 getApp() 已生效
  pageOptions.onLoad = function (...args) {
    const app = getApp()
    
    // 初始化 langPack
    this.setData({ langPack: app.getLangPack() })

    // 设置监听器
    app.pubSub && app.pubSub.on('languageChanged', () => {
      const langPack = app.getLangPack()
      this.setData({ langPack })
    })

    originalOnLoad && originalOnLoad.apply(this, args)
  }

  pageOptions.onUnload = function (...args) {
    const app = getApp()
    app.pubSub && app.pubSub.off('languageChanged', this.updateLangPack)
    originalOnUnload && originalOnUnload.apply(this, args)
  }

  Page(pageOptions)
}

6.写在app.js中方便使用

import { createI18nPage } from './utils/createI18nPage'
App({
  i18nBehavior,
})

7.使用示例，在js中用createI18mPage代替Page，在wxml中修改为不同对应的翻译

 8.写一个能够融合Component的切换语言时给每个组件实时切换

// utils/i18nBehavior.js
const i18nBehavior = Behavior({
  data: {
    langPack: {}
  },
  lifetimes: {
    attached() {
      const app = getApp()
      const langPack = app.getLangPack()
      this.setData({ langPack })

      // 监听语言变化
      this._langChangeHandler = () => {
        this.setData({ langPack: app.getLangPack() })
      }
      app.pubSub?.on('languageChanged', this._langChangeHandler)
    },
    detached() {
      const app = getApp()
      app.pubSub?.off('languageChanged', this._langChangeHandler)
    }
  }
})

export default i18nBehavior

9.写在app.js中方便使用

import i18nBehavior from './behavior/i18nBehavior.js'
App({
  i18nBehavior,
})

10.使用示例，引入Behavior

const app = getApp()
Component({
  behaviors: [app.i18nBehavior],
})