由于各大小程序平臺(tái)上，WXS 語(yǔ)法和使用均存在較大差異，因此該方案實(shí)現(xiàn)過(guò)程中也存在一些技術(shù)上的難點(diǎn)，這些難點(diǎn)基于 Mpx 框架的早期構(gòu)建起來(lái)的跨平臺(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 與 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)聽(tīng) 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)。
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)目。
上面分析了 Mpx 框架的 i18n 方案的技術(shù)細(xì)節(jié)，我們來(lái)看下和其他方案的對(duì)比，主要是和 uniapp – 基于 Vue 編寫小程序的方案，和微信官方的方案，兩者提供的 i18n 支持與Mpx的對(duì)比有何優(yōu)劣。
uniapp 提供了對(duì) i18n 能力的支持，是直接引入vue-i18n。但小程序中無(wú)法在模板上調(diào)用 JS 方法，本質(zhì)上是利用計(jì)算屬性 Computed 轉(zhuǎn)換好語(yǔ)言，然后利用模板插值在小程序模板中使用。
因此該方案存在一個(gè)性能問(wèn)題，最終的渲染層所看到的文本還是通過(guò) setData 跨線程通信完成，這樣就會(huì)導(dǎo)致線程間通信增多，性能開銷較大。
并且，早期這種形式使用成本較高，后來(lái) uniapp 也針對(duì)其做過(guò)優(yōu)化，實(shí)現(xiàn)了可以在模板上寫 $t() 的能力，使用上方便了不少。
這個(gè) $t() 的實(shí)現(xiàn)是在編譯時(shí)候識(shí)別到 $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 本身的實(shí)現(xiàn)來(lái)講和Mpx框架的設(shè)計(jì)是類似的，也是基于 WXS 實(shí)現(xiàn)（英雄所見(jiàn)略同啊）。但因?yàn)橹苓吪涮咨蠜](méi)有完整的體系，整體使用體驗(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)聽(tīng)語(yǔ)言值的變化去做一些其他的事情。
最后，Mpx的 i18n 方案對(duì)比微信官方的方案還有個(gè)巨大的優(yōu)點(diǎn)，結(jié)合Mpx的跨平臺(tái)能力，能實(shí)現(xiàn)均以這個(gè)方案，一套代碼產(chǎn)出支持微信/支付寶/百度/QQ/頭條多個(gè)平臺(tái)的支持 i18n 的小程序。
Mpx 框架專注小程序開發(fā)，期望為開發(fā)者提供最舒適的開發(fā)體驗(yàn)，有眾多優(yōu)秀的功能特性，幫助開發(fā)者提效。本文介紹的是其內(nèi)置的 i18n 能力，通過(guò)對(duì)比分析得出相比其他框架方案在使用成本和性能等方面有明顯的優(yōu)勢(shì)，歡迎各位有相關(guān)需求的同學(xué)進(jìn)行體驗(yàn)嘗試。
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享網(wǎng)絡(luò)內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-62778877-8306；郵箱：fanjiao@west.cn。本站原創(chuàng)內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明出處：
西部數(shù)碼知識(shí)庫(kù) »
小程序I18n最佳實(shí)踐案例