背景
I18n = Internationalization，國(guó)際化，因?yàn)閱卧~由首末字符i/n和中間18個(gè)字母組成，簡(jiǎn)稱i18n。對(duì)程序來(lái)說(shuō)，就是要在不修改內(nèi)部代碼的情況下，能根據(jù)不同語(yǔ)言及地區(qū)顯示相應(yīng)的界面，以支持不同語(yǔ)言的人順利使用程序。
業(yè)務(wù)背景
互聯(lián)網(wǎng)行業(yè)進(jìn)入下半場(chǎng)，精細(xì)化運(yùn)營(yíng)是關(guān)鍵。多語(yǔ)言支持能讓產(chǎn)品更好地服務(wù)境內(nèi)的其他語(yǔ)言用戶，也為產(chǎn)品出海打下基礎(chǔ)，隨著 WeChat/Alipay 的全球化，你的小程序是否做好準(zhǔn)備了呢？
4月初，滴滴出行小程序團(tuán)隊(duì)接到支持英文版的需求，預(yù)計(jì)上線時(shí)間為6月上旬。當(dāng)前滴滴出行小程序集成的眾多業(yè)務(wù)線和各種公共庫(kù)，展示給用戶的有前端硬編碼的靜態(tài)文本和服務(wù)端下發(fā)的文案，都要同步接入多語(yǔ)言?？紤]到小程序當(dāng)前的體量，光文本收集、語(yǔ)料翻譯、npm package 支持，聯(lián)調(diào)，測(cè)試，溝通成本等等，并且前端開發(fā)只投入1.5人力的情況下，時(shí)間是蠻緊迫的，但是我們抗住了壓力，最終英文版滴滴出行小程序如期上線，截止目前運(yùn)行穩(wěn)定，用戶反饋良好，得到了超出預(yù)期的收益。
當(dāng)然這一切得益于各團(tuán)隊(duì)同學(xué)的工作，和各團(tuán)隊(duì)的通力配合，更得益于部門技術(shù)團(tuán)隊(duì) Mpx框架優(yōu)雅的多語(yǔ)言能力支持。劃重點(diǎn)來(lái)咯，所謂工欲善其事必先利其器，如果你的公司業(yè)務(wù)需要開發(fā)小程序，也需要接入多語(yǔ)言，那么請(qǐng)搬好小板凳，我們來(lái)看一下小程序框架 Mpx 是如何優(yōu)雅支持多語(yǔ)言能力。相信看完這篇，可以幫助你認(rèn)識(shí) Mpx(https://github.com/didi/mpx) ，加深對(duì)框架的理解，最終利用 Mpx 框架迭代小程序，年終獎(jiǎng)多出那部分可以打賞一下作者，買杯咖啡哈（偷笑.jpg）
以下是滴滴出行小程序的中英文版本對(duì)比：
也歡迎大家在微信/支付寶里搜索滴滴出行小程序，實(shí)際使用感受下。PS：切換語(yǔ)言的方法是，打開小程序，點(diǎn)擊左上角用戶頭像，進(jìn)入側(cè)邊欄設(shè)置頁(yè)面，點(diǎn)擊切換中英文即可體驗(yàn)。
技術(shù)背景
在上述業(yè)務(wù)背景下，Mpx 框架——滴滴自研的專注提升小程序開發(fā)體驗(yàn)的增強(qiáng)型小程序框架，內(nèi)建 i18n 能力便提上日程。
與 WEB 不同，小程序（本文以微信小程序?yàn)槔┻\(yùn)行環(huán)境采用雙線程架構(gòu)設(shè)計(jì)，渲染層的界面使用 WebView 進(jìn)行渲染，邏輯層采用 JSCore 線程運(yùn)行 JS腳本。邏輯層數(shù)據(jù)改變，通過(guò) setData 將數(shù)據(jù)轉(zhuǎn)發(fā)到 Native（微信客戶端），Native 再將數(shù)據(jù)轉(zhuǎn)發(fā)到渲染層，以此更新頁(yè)面。由于線程間通信成本較高，實(shí)際項(xiàng)目開發(fā)時(shí)需要控制頻次和數(shù)量。另外小程序的渲染層不支持運(yùn)行 JS ，一些如事件處理等操作無(wú)法在渲染層實(shí)現(xiàn)，因此微信官方提供了一套腳本語(yǔ)言 WXS ，結(jié)合 WXML ，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)（不了解 WXS ？戳這里）。
基于小程序的雙線程架構(gòu)設(shè)計(jì)，實(shí)現(xiàn) i18n 存在一些技術(shù)上的難點(diǎn)與挑戰(zhàn)，由于 Mpx 框架早期構(gòu)建起來(lái)的強(qiáng)大基礎(chǔ)，最終得以優(yōu)雅支持多語(yǔ)言能力，實(shí)現(xiàn)了和vue-i18n 基本一致的使用體驗(yàn)。
使用
在使用上，Mpx 支持 i18n 能力提供的 API 與 vue-i18n 大體對(duì)齊，用法上也基本一致。
模板中使用 i18n
編譯階段通過(guò)用戶配置的 i18n 字典，結(jié)合框架內(nèi)建的翻譯函數(shù)通過(guò) wxs-i18n-loader 合成為可執(zhí)行的 WXS 翻譯函數(shù)，并自動(dòng)注入到有翻譯函數(shù)調(diào)用的模板中，具體調(diào)用方式如下圖。
// mpx文件 <template> <view> <view>{{ $t('message.hello', { msg: 'hello' }）}}</view>
<!-- formattedDatetime計(jì)算屬性，可基于locale變更響應(yīng)刷新 --> <view>{{formattedDatetime}}</view> </view> </template>
JS 中使用 i18n
通過(guò)框架提供的 wxs2js 能力，將 WXS 翻譯函數(shù)轉(zhuǎn)換為 JS 模塊注入到 JS 運(yùn)行時(shí)，使運(yùn)行時(shí)環(huán)境中也能夠調(diào)用翻譯函數(shù)。
// mpx文件 <script> import mpx, { createComponent } from '@mpxjs/core' createComponent({
ready () { // js中使用 console.log(this.$t('message.hello', { msg: 'hello' }))
// 局部locale變更，生效范圍為當(dāng)前組件內(nèi) this.$i18n.locale = 'en-US' setTimeout(() =>
{ // 全局locale變更，生效范圍為項(xiàng)目全局 mpx.i18n.locale = 'zh-CN' }, 10000)
}, computed: {
formattedDatetime () { return this.$d(new Date(), 'long')
}
}
}) </script>定義 i18n 字典
項(xiàng)目構(gòu)建時(shí)傳入 i18n 配置對(duì)象，主要包括語(yǔ)言字典和默認(rèn)語(yǔ)言類型。
new MpxWebpackPlugin({ i18n: { locale: 'en-US',
// messages既可以通過(guò)對(duì)象字面量傳入，也可以通過(guò)messagesPath指定一個(gè)js模塊路徑，
在該模塊中定義配置并導(dǎo)出，dateTimeFormats/dateTimeFormatsPath和numberFormats/numberFormatsPath同理
messages: { 'en-US': { message: { hello: '{msg} world' }
}, 'zh-CN': { message: { hello: '{msg} 世界' }
}
}, // messagesPath: path.resolve(__dirname, '../src/i18n.js') }
})
如果是通過(guò) Mpx 提供的 cli 工具生成的項(xiàng)目，這部分配置會(huì)在 mpx.conf.js 文件中，不光可以直接內(nèi)聯(lián)寫在該文件中，也可以指定語(yǔ)言包的路徑。
以上，Mpx 的 i18n 方案接入成本低，使用優(yōu)雅，體驗(yàn)優(yōu)秀。直觀感受可參考下面 mpx i18n demo ：https://github.com/didi/mpx/t...
方案
Mpx框架的 i18n 支持幾乎完全實(shí)現(xiàn)了 vue-i18n 的全部能力，下面我們來(lái)詳細(xì)說(shuō)明 Mpx 框架 i18n 能力的具體實(shí)現(xiàn)。
方案探索
基于小程序運(yùn)行環(huán)境的雙線程架構(gòu)，我們嘗試了不同方案，具體探索過(guò)程如下：
方案一：基于 Mpx 框架已提供的數(shù)據(jù)增強(qiáng)能力 computed 計(jì)算屬性，來(lái)支持 i18n 。該方案與 uniapp 的實(shí)現(xiàn)思路相似（后文會(huì)進(jìn)行對(duì)比分析），存在一定不足，包括線程通信帶來(lái)的性能開銷和for循環(huán)場(chǎng)景下的處理較復(fù)雜等，最終放棄。
方案二：基于 WXS + JS 支持 i18n 適配。通過(guò)視圖層注入 WXS，將 WXS 語(yǔ)法轉(zhuǎn)換為 JS 后注入到邏輯層，這樣視圖層和邏輯層均可實(shí)現(xiàn) i18n 適配，并且在一定程度上有效減少兩個(gè)線程間的通信耗時(shí)，提高性能。
從性能和合理性上考慮，我們最終采用了方案二進(jìn)行 Mpx 的 i18n 方案實(shí)現(xiàn)。
Mpx i18n 架構(gòu)設(shè)計(jì)圖
由于各大小程序平臺(tái)上，WXS 語(yǔ)法和使用均存在較大差異，因此該方案實(shí)現(xiàn)過(guò)程中也存在一些技術(shù)上的難點(diǎn)，這些難點(diǎn)基于 Mpx 框架的早期構(gòu)建起來(lái)的跨平臺(tái)能力也一一得以攻克，具體如下。
實(shí)現(xiàn)難點(diǎn)
WXS 在模板中運(yùn)行的跨平臺(tái)處理
WXS 是運(yùn)行在視圖層中的 JS，可以減少與邏輯層通信耗時(shí)，提高性能。因此 Mpx 框架在迭代初期便已支持在模板和 JS 運(yùn)行環(huán)境使用 WXS 語(yǔ)言，并且針對(duì)小程序跨平臺(tái) WXS 語(yǔ)法進(jìn)行抹平。
在模板中，Mpx 自定義一個(gè) webpack chunk template，以微信 WXS 作為 DSL，利用 babylon 將注入的 WXS 轉(zhuǎn)化成 ast，然后遍歷 ast 節(jié)點(diǎn)，抹平各大平臺(tái)對(duì) WXS 語(yǔ)法的處理差異，輸出各平臺(tái)可以識(shí)別的類 WXS 文件。目前主要支持微信(WXS)、支付寶(sjs)、百度(filter)、QQ(qs)、頭條(sjs)等小程序平臺(tái)。
WXS 在邏輯層運(yùn)行的跨平臺(tái)處理
WXS 與 JavaScript 是不同的語(yǔ)言，有自己的語(yǔ)法，并不和 JavaScript 一致。并且 WXS 的運(yùn)行環(huán)境和其他 JavaScript 代碼是隔離的，WXS 中不能調(diào)用其他 JavaScript 文件中定義的函數(shù)，也不能調(diào)用小程序提供的API。
因此在邏輯層，Mpx 將注入的 WXS 語(yǔ)法轉(zhuǎn)化為 JS，通過(guò) webpack 注入到當(dāng)前模塊。例如 WXS 全局方法 getRegExp/getDate 在 JS 中是無(wú)法調(diào)用的，Mpx將它們分別轉(zhuǎn)化成 JS 模塊，再通過(guò) webpack addVariable 將模塊注入到 bundle.js 中。
同理，Mpx 會(huì)將編譯時(shí)注入的 i18n wxs 翻譯函數(shù)和 i18n 配置對(duì)象掛載到全局 global 對(duì)象上，利用 mixin 混入到頁(yè)面組件，并監(jiān)聽 i18n 配置對(duì)象，這樣JS和模板中即可直接調(diào)用 i18n 翻譯函數(shù)，實(shí)現(xiàn)數(shù)據(jù)響應(yīng)。
以上便是 Mpx 框架在小程序中支持 i18n 能力的技術(shù)細(xì)節(jié)，由于 WXS 是可以在視圖層執(zhí)行的類 JS 語(yǔ)法的一門語(yǔ)言，這樣就減少了小程序邏輯層和視圖層的通信耗時(shí)，提升性能。但是由于實(shí)現(xiàn)依賴類 WXS 能力，以及 WXS 執(zhí)行環(huán)境的限制，目前模板上可直接使用的翻譯函數(shù)包括 $t/$tc/$te ，如果需要格式化數(shù)字或日期可以使用對(duì)應(yīng)的翻譯函數(shù)在 JS 中 Mpx 提供的計(jì)算屬性中實(shí)現(xiàn)。
輸出 web 時(shí)使用 i18n
Mpx同時(shí)還支持轉(zhuǎn)換產(chǎn)出H5，而 Mpx 提供的 i18n 能力在使用上與 vue-i18n 基本一致，輸出 web 時(shí)框架會(huì)自動(dòng)引入 vue-i18n，并使用當(dāng)前的 Mpx i18n 配置信息對(duì)其進(jìn)行初始化，用戶無(wú)需進(jìn)行任何更改，即可輸出和小程序表現(xiàn)完全一致的 i18n web 項(xiàng)目。
對(duì)比
上面分析了 Mpx 框架的 i18n 方案的技術(shù)細(xì)節(jié)，我們來(lái)看下和其他方案的對(duì)比，主要是和 uniapp - 基于 Vue 編寫小程序的方案，和微信官方的方案，兩者提供的 i18n 支持與Mpx的對(duì)比有何優(yōu)劣。
uniapp的方案
uniapp 提供了對(duì) i18n 能力的支持，是直接引入vue-i18n。但小程序中無(wú)法在模板上調(diào)用 JS 方法，本質(zhì)上是利用計(jì)算屬性 Computed 轉(zhuǎn)換好語(yǔ)言，然后利用模板插值在小程序模板中使用。
模板中：
<view>{{ message.hello }}</view>
JS里需要寫：
computed: {
message () { return { hello: this.$t('message.hello') }
}
}因此該方案存在一個(gè)性能問題，最終的渲染層所看到的文本還是通過(guò) setData 跨線程通信完成，這樣就會(huì)導(dǎo)致線程間通信增多，性能開銷較大。
并且，早期這種形式使用成本較高，后來(lái) uniapp 也針對(duì)其做過(guò)優(yōu)化，實(shí)現(xiàn)了可以在模板上寫 $t() 的能力，使用上方便了不少。
這個(gè) t 就自動(dòng)替換，幫你替換成一個(gè) uniapp 的 computed 數(shù)據(jù)，因此數(shù)據(jù)部分還是和之前一樣要維護(hù)兩份。尤其是模板上的for循環(huán)，即使 for 里只有一個(gè)數(shù)據(jù)要被轉(zhuǎn)換，整個(gè)列表都要被替換成一個(gè)計(jì)算屬性，在線程間通信時(shí)進(jìn)一步加大了性能開銷。
微信官方的方案
微信小程序本身也提供了一個(gè) i18n 的方案，倉(cāng)庫(kù)地址是：wechat-miniprogram/miniprogram-i18n 。
這個(gè)方案從 i18n 本身的實(shí)現(xiàn)來(lái)講和Mpx框架的設(shè)計(jì)是類似的，也是基于 WXS 實(shí)現(xiàn)（英雄所見略同?。?。但因?yàn)橹苓吪涮咨蠜]有完整的體系，整體使用體驗(yàn)上就也略遜于基于Mpx框架來(lái)開發(fā)支持 i18n 的國(guó)際化小程序了。
主要的點(diǎn)就是，官方提供的方案，要基于 gulp 工具進(jìn)行一次額外構(gòu)建，同時(shí)在JS中使用時(shí)候還要額外引入一個(gè) behavior 去讓JS中也可以使用翻譯能力。
而Mpx框架通過(guò)一次統(tǒng)一的Webpack構(gòu)建產(chǎn)出完整的內(nèi)容，用戶無(wú)需擔(dān)心語(yǔ)言包更新后忘記重新構(gòu)建，在JS中使用的時(shí)候不光更方便，而且語(yǔ)言信息還是個(gè)響應(yīng)式的，任何組件都可以很方便地監(jiān)聽語(yǔ)言值的變化去做一些其他的事情。
最后，Mpx的 i18n 方案對(duì)比微信官方的方案還有個(gè)巨大的優(yōu)點(diǎn)，結(jié)合Mpx的跨平臺(tái)能力，能實(shí)現(xiàn)均以這個(gè)方案，一套代碼產(chǎn)出支持微信/支付寶/百度/QQ/頭條多個(gè)平臺(tái)的支持 i18n 的小程序。
總結(jié)
Mpx 框架專注小程序開發(fā)，期望為開發(fā)者提供最舒適的開發(fā)體驗(yàn)，有眾多優(yōu)秀的功能特性，幫助開發(fā)者提效。本文介紹的是其內(nèi)置的 i18n 能力，通過(guò)對(duì)比分析得出相比其他框架方案在使用成本和性能等方面有明顯的優(yōu)勢(shì)，歡迎各位有相關(guān)需求的同學(xué)進(jìn)行體驗(yàn)嘗試。
未來(lái) Mpx 還會(huì)持續(xù)迭代優(yōu)化，提供更多更好的能力幫助小程序開發(fā)者提效。在使用過(guò)程中遇到任何問題，歡迎大家在 Git 上提 issue，團(tuán)隊(duì)成員會(huì)及時(shí)響應(yīng)。同時(shí)也鼓勵(lì)大家一起為開源社區(qū)做貢獻(xiàn)，參與到 Mpx 共建中來(lái)，為小程序技術(shù)發(fā)展添磚加瓦。
Git地址 [https://github.com/didi/mpx]
Mpx文檔 [https://mpxjs.cn/]
歡迎技術(shù)交流與反饋，順便star一下鼓勵(lì)開源項(xiàng)目貢獻(xiàn)者，我們將持續(xù)發(fā)力貢獻(xiàn)社區(qū)。
附：以往Mpx文章鏈接
滴滴開源小程序框架Mpx - https://mpxjs.cn/articles/1.0.html
滴滴小程序框架Mpx發(fā)布2.0，支持小程序跨平臺(tái)開發(fā)，可直接轉(zhuǎn)換已有微信小程序 - https://mpxjs.cn/articles/2.0.html
小程序開發(fā)者，為什么你應(yīng)該嘗試下MPX - https://mpxjs.cn/articles/mpx1.html
Mpx 小程序框架技術(shù)揭秘 - https://mpxjs.cn/articles/mpx2.html
滴滴出行小程序體積優(yōu)化實(shí)踐 - https://mpxjs.cn/articles/size-control.html
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)