微信小程序國際化

微信小程序國際化

現狀

小程序國際化官方沒有支持，也沒有現成的插件。

網上有人作了國際化的嘗試。可是隻能替換靜態文本，就是簡單的鍵值匹配。

vue-i18n 因爲是基於html 和 vue, 不一樣於wxml（尤爲是不能修改dom），估計進行hack調研可能要花不少時間。

方案

本項目(github 源碼)是一個能夠直接運行的國際化的小程序 quickstart 項目。
下載後能夠直接在 微信開發者工具中運行。

介紹

若是想讓翻譯的內容渲染在頁面中，須要把翻譯的數據放在 Page 的 data 中，對於動態渲染帶可變參數的數據， 在 setData 的時候加個尾巴（在其後面set 帶參數的翻譯的 data）。
目前基本方案是本身開發一套翻譯工具：

• 功能：
  1. 翻譯靜態文案
  2. 翻譯帶參數的文案
  *缺陷
  1.因爲只能返回字符串，沒有相似vue 經過 v-html 進行標籤替換的能力，因此對帶標籤（樣式）的翻譯無能爲力。

總結：
優先保證中文用戶的使用體驗，對於不帶標籤的類型的翻譯，中英文沒有區別，對於帶標籤的類型的翻譯，將中文翻譯直接放在 wxml 中，只是在中文的狀況下顯示，在非中文時直接隱藏。

代碼

// i18n.js
module.exports = {
  locale: 'en',
  locales: {},
  registerLocale (locales) {
    this.locales = locales
  },
  setLocale (code) {
    this.locale = code
  },
  /**
   * 返回帶（或不帶）參數的類型的翻譯結果
   * @param {string} key, /util/language/en.js 中的鍵名，如 "curslide"
   * @param {object} data, 傳入的參數，如 {num: 123}
   * @returns {string}
   *
   * @desc 如："activeno": "當前學生{activeno}位",
   *       activeno 爲 key，能夠輸入data {activeno: 15}
   *       返回："當前學生15位"
   */
  _ (key, data) {
    let locale = this.locale
    let locales = this.locales
    let hasKey = locale && locales[locale] && locales[locale][key]

    if (hasKey) {
      key = locales[locale][key]

      let res = key.replace(/\{[\s\w]+\}/g, x => {
        x = x.substring(1, x.length-1).trim()
        return data[x];
      })

      return res
    }

    throw new Error(`語言處理錯誤${key}`)
  },
  /**
   * 返回二選一類型的翻譯結果
   * @param {string} key, /util/language/en.js 中的鍵名，如 "curslide"
   * @param {object} data, 傳入的參數，如 {first: true} 選擇前面的
   * @returns {string}
   *
   * @desc 如："sendprob": "Send | Check",
   *       sendprob 爲 key，能夠輸入data {first: true}
   *       返回："Send"
   */
  _b (key, data) {
    let locale = this.locale
    let locales = this.locales
    let hasKey = locale && locales[locale] && locales[locale][key]

    if (hasKey) {
      key = locales[locale][key]

      let res = key.split('|')[data.first ? 0 : 1].trim()

      return res
    }

    throw new Error(`語言處理錯誤${key}`)
  }
}