小程序I18n的最佳实践案例（小程序实践报告）

背景业务背景互联网行业已经进入下半场，精细化运营是关键。多语言支持可以使产品更好地服务于中国其他语言的用户，也为产品走出国门奠定了基础。随着微信/支付宝的全球化，你的小程序准备好了吗？

4月初，滴滴出行小程序团队收到支持英文版的请求，预计上线时间为6月初。目前，滴滴出行小程序集成的许多业务线和各种公共库，以服务器发布的前端硬编码和文案显示给用户的静态文本，应同时连接多种语言。考虑到小程序目前的规模，如光学文本收集、语料库翻译、npm包支持、联合调试、测试、通信成本等。，前端开发只投入了1.5个人力，时间相当紧张，但我们顶住了压力，最终滴滴出行小程序英文版如期上线。截至目前，运行稳定，用户反馈良好，取得了意想不到的效益。

当然，这一切都得益于各团队学员的高效工作，与各团队的通力合作，以及部门技术团队Mpx框架优雅的多语言能力支持。让我们关注它。俗话说，欲善其事，必先利其器。如果您的公司需要开发小程序和访问多种语言，请移动小板凳。让我们看看小程序框架Mpx如何优雅地支持多语言功能。我相信在阅读这篇文章后，您可以了解Mpx（https://github . com/Didi/Mpx），加深对该框架的理解，并最终使用MPX框架高效地迭代小程序。你可以奖励作者年终奖的额外部分，买一杯咖啡（假笑。jpg)。

以下是滴滴出行小程序的中英文版本对比:

也欢迎大家在微信/支付宝搜索滴滴出行小程序，在实践中感受一下。PS:切换语言的方式是打开小程序，点击左上角用户头像，进入侧边栏设置页面，点击切换中英文即可体验。

技术背景在上述业务背景下，滴滴开发的内置i18n能力的增强小程序框架Mpx框架被提上日程。

与WEB不同的是，小程序（本文以微信小程序为例）的运行环境采用双线程架构设计，渲染层的界面使用WebView进行渲染，逻辑层使用JSCore线程运行JS脚本。逻辑层中的数据发生变化，通过setData将数据转发给原生（微信客户端），然后原生将数据转发给渲染层以更新页面。由于线程之间的通信成本较高，因此在实际项目开发中需要控制频率和数量。另外，小程序的渲染层不支持运行JS，事件处理等一些操作无法在渲染层实现。因此，微信官方提供了一套脚本语言WXS，可以结合WXML构建页面结构（不知道WXS？戳这里）。

基于applet的双线程架构设计实现i18n存在一些技术难点和挑战。由于Mpx框架前期构建的强大基础，最终可以优雅地支持多语言能力，并实现与vue-i18n基本一致的体验。

在使用中，Mpx支持i18n的能力所提供的API基本上与vue-i18n保持一致，并且用法基本相同。

该模板使用用户在编译阶段配置的i18n字典，并将框架内置的翻译函数与wxs-i18n-loader相结合，合成一个可执行的wxs翻译函数，通过翻译函数调用自动注入模板。具体调用方法如下图所示。

// mpx文件{ { $ t（& # 39；message.hello & # 39，{ msg:& # 39；你好& # 39；}）}} { {格式化日期时间} }通过复制的代码js中的框架使用i18n提供的wxs2js功能将WXS翻译函数转换为JS模块，以便在运行时环境中也可以调用该翻译函数。

mpx文件复制代码定义了构建i18n字典项目时传入的i18n配置对象，主要包括语言字典和默认语言类型。

新的MpxWebpackPlugin（{ i18n:{ locale:& # 39；en-美国& # 39；，//可以通过对象文字传入消息，也可以通过messagesPath指定js模块路径，并在该模块中定义和导出配置。日期时间格式/日期时间格式路径和数字格式/数字格式路径与消息相同:{ & # 39；en-美国& # 39；:{消息:{你好:& # 39；{msg}世界& # 39；} }, 'zh-CN & # 39；:{消息:{你好:& # 39；{msg}世界& # 39；} } }，//messages path:path . resolve（_ _ dirname，& # 39；../src/i18n . js & # 39；）}}）如果复制的代码是由Mpx提供的cli工具生成的项目，这部分配置将在mpx.conf.js文件中，该文件可以直接内联编写，还可以指定语言包的路径。

最重要的是，Mpx的i18n方案接入成本低，使用优雅，体验出色。要想有直观的感受，请参考下面的mpx i18 ndemo:github.com/didi/mpx/tr…

Mpx框架的i18n支持几乎完全实现了vue-i18n的所有功能。我们来详细解释一下Mpx框架的i18n能力的具体实现。

该方案探索了基于applet运行环境的双线程体系结构。我们尝试了不同的方案，具体探索过程如下:

方案1:基于Mpx框架提供的数据增强能力计算属性支持i18n。该方案的实现思路与uniapp类似（后面会进行对比分析），但也存在一些不足，包括线程通信带来的性能开销以及for循环场景下的处理复杂度等。，而且是最后被抛弃的。方案二:基于WXS+JS支持i18n自适应。WXS被注入视图层，WXS语法被转换为JS，然后注入逻辑层。这样，视图层和逻辑层都可以实现i18n自适应，在一定程度上有效减少了两个线程之间的通信时间，提高了性能。

考虑到性能和合理性，我们最终采用了第二种方案来实现Mpx的i18n方案。

Mpx i18n架构设计图

由于WXS在不同程序平台上的语法和用法存在很大差异，因此该方案的实现也存在一些技术难点，而早期基于Mpx框架构建的跨平台能力也被一一克服，具体如下。

实现困难WXS跨平台处理在模板WXS中运行是JS在视图层中运行，可以减少与逻辑层的通信时间并提高性能。因此，在迭代的早期阶段，Mpx框架支持在模板和JS运行时环境中使用WXS语言，并平滑了小程序的跨平台WXS语法。在模板中，Mpx定义了一个webpack块模板，将微信WXS作为DSL，通过babylon将注入的WXS转换为ast，然后遍历ast节点，消除各大平台之间处理WXS语法的差异，并输出每个平台都可以识别的类似WXS的文件。目前主要支持微信（WXS）、支付宝（sjs）、百度（滤镜）、QQ（QS）、头条（sjs）等小程序平台。

运行在逻辑层上的WXS的跨平台处理WXS和JavaScript是不同的语言，具有自己的语法，并且与JavaScript不一致。此外，WXS的运行环境与其他JavaScript代码隔离，WXS不能调用其他JavaScript文件中定义的函数，也不能调用小程序提供的API。因此，在逻辑层，Mpx将注入的WXS语法转换为JS，并通过webpack将其注入当前模块。例如，不能在JS中调用WXS全局方法getRegExp/getDate。Mpx将它们分别转换为JS模块，然后通过webpack addVariable将模块注入bundle.js。同理，Mpx会在全局对象上挂载编译时注入的i18n wxs翻译函数和i18n配置对象，通过使用mixin将其混合到页面组件中，并监听i18n配置对象，这样JS和模板就可以直接调用i18n翻译函数实现数据响应。

这些都是Mpx框架在小程序中支持i18n能力的技术细节。因为WXS是一种具有类似JS语法的语言，可以在视图层执行，所以它减少了applet逻辑层和视图层之间的通信时间并提高了性能。但是，由于实现WXS依赖类的能力和WXS执行环境的限制，目前可以直接在模板上使用的翻译函数包括$t/$tc/$te。如果需要格式化数字或日期，可以使用相应的翻译函数在JS中Mpx提供的计算属性中实现。

导出web时，使用i18nMpx也支持输出H5的转换，Mpx提供的i18n功能与vue-i18n提供的功能基本相同。导出web时，框架会自动引入vue-i18n，并使用Mpx i18n的当前配置信息对其进行初始化。用户可以输出与小程序性能完全一致的i18n web项目，而无需进行任何更改。

对比Mpx框架的i18n方案的技术细节，我们再来看与其他方案的对比，主要是基于Vue的uniapp -编程小程序，以及微信官方方案。他们提供的i18n支持与Mpx相比有什么优缺点？

Uniapp提供了对i18n能力的支持，并直接引入了vue-i18n。但是，不能在applet中的模板上调用JS方法。本质上，语言是通过使用计算属性Computed进行转换的，然后在applet模板中使用模板插值。

在模板中:{{ message.hello }}

JS需要写:

computed:{ message（）{ return { hello:this。$ t（& # 39；message.hello & # 39）}}}复制代码因此，该方案存在性能问题，最终渲染层看到的文本仍通过setData跨线程通信完成，这将导致更多的线程间通信和更高的性能开销。

而且在早期，这种形式的使用成本很高，后来uniapp也对其进行了优化，实现了在模板上写$t（）的功能，使用起来相当方便。

这个$t（）的实现是在计算时识别到$t时自动替换它，并帮助您用一个uniapp的计算数据替换它，因此数据部分应该像以前一样保存在两个副本中。尤其是在模板上的for循环中，即使for中只有一个要转换的数据，也必须用计算属性替换整个列表，这进一步增加了线程间通信时的性能开销。

官方微信解决方案微信小程序本身也提供了i18n解决方案，仓库地址为:微信-小程序/小程序-i18n。

从i18n本身的实现来看，该方案类似于Mpx框架的设计，也是基于WXS（英雄所见略同）。但由于周边设施中没有完整的系统，整体体验略逊于基于Mpx框架开发支持i18n的国际小程序。

主要是官方方案需要建立在gulp工具的基础上，同时要引入一个行为让JS使用翻译能力。

Mpx框架通过统一的Webpack产生完整的内容，因此用户不必担心更新后忘记重新构建语言包。它不仅在JS中使用更方便，而且语言信息也是响应式的，任何组件都可以轻松地侦听语言值的变化来做一些其他事情。

最后，Mpx的i18n方案与官方微信方案相比具有巨大优势。结合Mpx的跨平台能力，可以在微信/支付宝/百度/QQ/头条多个平台实现一套支持i18n小程序的代码输出。

总结Mpx框架专注于小程序开发，期望为开发人员提供最舒适的开发体验，具有许多优秀的功能特性，帮助开发人员提高效率。本文介绍了其内置的i18n功能。通过对比分析得出，与其他框架方案相比，在使用成本和性能方面具有明显优势。欢迎有相关需求的同学尝试一下。

以上是小程序I18n的最佳实践案例详情。更多内容请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：小程序I18n的最佳实践案例（小程序实践报告） https://zhujicankao.com/101269.html