미니 프로그램 I18n 모범 사례

관련 학습 권장사항: WeChat 미니 프로그램 튜토리얼

Background

I18n = 국제화, 단어가 첫 번째와 마지막 문자 i/n과 중간 18개의 문자(i18n이라고 함)로 구성되기 때문입니다. 프로그램의 경우, 내부 코드를 수정하지 않고 다양한 언어와 지역에 따라 해당 인터페이스를 표시하여 다양한 언어를 사용하는 사람들이 프로그램을 원활하게 사용할 수 있도록 지원해야 합니다.

사업배경

인터넷 산업이 하반기로 접어들면서 정제된 운영이 관건입니다. 다국어 지원을 통해 국내의 다른 언어 사용자에게 더 나은 서비스를 제공할 수 있으며, WeChat/Alipay의 세계화와 함께 제품의 해외 진출 기반도 마련됩니다.

4월 초 디디추싱 미니 프로그램팀에 영어 버전 지원 요청이 접수됐고, 6월 초 런칭 예정이라고 합니다. 현재 Didi의 여행 미니 프로그램은 많은 비즈니스 라인과 다양한 공공 도서관을 통합합니다. 프런트 엔드 하드 코딩된 정적 텍스트와 서버에서 발행하여 사용자에게 표시되는 사본은 여러 언어로 동시에 액세스되어야 합니다. 현재 미니 프로그램의 규모, 텍스트 수집, 말뭉치 번역, npm 패키지 지원, 공동 디버깅, 테스트, 통신 비용 등을 고려하면 프론트엔드 개발에 1.5인력만 투자하면 시간이 꽤 빡빡하지만 저항합니다. 이러한 부담감을 딛고 드디어 디디여행 미니 프로그램의 영어 버전이 예정대로 출시되었으며 현재까지 좋은 사용자 피드백을 받으며 안정적으로 운영되고 있으며 기대 이상의 혜택을 받고 있습니다.

물론 이 모든 것은 각 팀 학생들의 효율적인 업무, 각 팀의 완전한 협력, 그리고 학과 기술팀의 Mpx 프레임워크의 우아한 다국어 지원 덕분입니다. 이것에 집중하자. 일을 잘하려면 먼저 도구를 갈고닦아야 한다. 만약 회사의 사업이 작은 프로그램을 개발해야 하고 또한 다국어에 대한 접근이 필요하다면 작은 벤치를 옮기자. 소규모 프로그램 프레임워크 Mpx를 살펴보세요. 다중 언어 기능을 우아하게 지원하는 방법입니다. 이 글을 읽은 후에는 Mpx(https://github.com/didi/mpx)를 알아가고, 프레임워크에 대한 이해를 깊게 하며, 마지막으로 Mpx 프레임워크를 사용하여 작은 프로그램을 효율적으로 반복하는 데 도움이 될 수 있다고 믿습니다. 작가님, 커피 한잔 사세요(smirk.jpg)

다음은 디디여행 미니 프로그램 중국어와 영어 버전 비교

위챗/알리페이에서 Didi Travel Mini 프로그램을 검색해 실제로 사용해 보세요. 추신: 언어를 전환하려면 미니 프로그램을 열고 왼쪽 상단에 있는 사용자 아바타를 클릭한 다음 사이드바 설정 페이지로 들어간 다음 클릭하여 중국어와 영어 간 전환을 경험해 보세요.

기술적 배경

위의 사업 배경에서 미니 프로그램 개발 경험 개선에 중점을 두고 Didi가 개발한 향상된 미니 프로그램 프레임워크인 Mpx 프레임워크에는 i18n 기능이 내장되어 있으며 의제에 있습니다.

WEB과 다르게 미니 프로그램의 실행 환경(이 기사에서는 WeChat 미니 프로그램을 예로 들어 설명함)은 듀얼 스레드 아키텍처로 설계되었습니다. 렌더링 계층의 인터페이스는 WebView를 사용하여 렌더링하고 논리 계층은 JSCore 스레드를 사용합니다. JS 스크립트를 실행합니다. 로직 레이어 데이터가 변경되면 setData를 통해 해당 데이터가 Native(WeChat 클라이언트)로 전달되고, Native는 해당 데이터를 렌더링 레이어로 전달하여 페이지를 업데이트합니다. 스레드 간 통신 비용이 높기 때문에 실제 프로젝트 개발 중에 빈도와 수량을 제어해야 합니다. 또한 미니 프로그램의 렌더링 레이어는 JS 실행을 지원하지 않으며 이벤트 처리와 같은 일부 작업을 렌더링 레이어에서 구현할 수 없습니다. 따라서 WeChat은 WXML과 결합된 구조의 스크립팅 언어 세트를 공식적으로 제공합니다. 페이지를 구성할 수 있습니다(WXS를 모르십니까? 여기를 클릭하십시오).

미니 프로그램의 듀얼 스레드 아키텍처 설계를 기반으로 i18n을 구현하는 데는 몇 가지 기술적인 어려움과 과제가 있었지만 Mpx 프레임워크 초기에 구축된 탄탄한 기반으로 인해 마침내 멀티 스레드를 우아하게 지원할 수 있었습니다. 언어 기능을 갖추고 기본적으로 vue-i18n 경험과 동일한 사용을 달성합니다.

Usage

사용 측면에서 Mpx의 i18n 기능 지원으로 제공되는 API는 일반적으로 vue-i18n과 정렬되며 사용법은 기본적으로 동일합니다.

i18n은 템플릿에 사용됩니다

컴파일 단계에서는 사용자가 구성한 i18n 사전이 프레임워크에 내장된 번역 기능과 결합되어 wxs-i18n-loader를 통해 실행 가능한 WXS 번역 기능으로 합성됩니다. 번역 함수 호출을 통해 템플릿에 자동으로 주입되며, 구체적인 호출 방법은 아래와 같습니다.

// mpx文件<template>
  <view>
    <view>{{ $t(&#39;message.hello&#39;, { msg: &#39;hello&#39; }）}}</view>
    <!-- formattedDatetime计算属性，可基于locale变更响应刷新 -->
    <view>{{formattedDatetime}}</view>
  </view></template>复制代码

JS는 프레임워크에서 제공하는 wxs2js 기능을 통해 i18n

을 사용하여 WXS 번역 기능을 JS 모듈로 변환하고 이를 JS 런타임에 삽입하므로 런타임 환경에서도 번역 기능을 호출할 수 있습니다.

// mpx文件<script>
  import mpx, { createComponent } from &#39;@mpxjs/core&#39;
  createComponent({
    ready () {      // js中使用
      console.log(this.$t(&#39;message.hello&#39;, { msg: &#39;hello&#39; }))      // 局部locale变更，生效范围为当前组件内
      this.$i18n.locale = &#39;en-US&#39;
      setTimeout(() => {        // 全局locale变更，生效范围为项目全局
        mpx.i18n.locale = &#39;zh-CN&#39;
      }, 10000)
    },    computed: {
      formattedDatetime () {        return this.$d(new Date(), &#39;long&#39;)
      }
    }
  })</script>复制代码

i18n 사전 정의

i18n 구성 개체는 프로젝트가 빌드될 때 주로 언어 사전 및 기본 언어 유형을 포함하여 전달됩니다.

new MpxWebpackPlugin({  i18n: {    locale: 'en-US',    // messages既可以通过对象字面量传入，也可以通过messagesPath指定一个js模块路径，在该模块中定义配置并导出，dateTimeFormats/dateTimeFormatsPath和numberFormats/numberFormatsPath同理
    messages: {      'en-US': {        message: {          hello: '{msg} world'
        }
      },      'zh-CN': {        message: {          hello: '{msg} 世界'
        }
      }
    },    // messagesPath: path.resolve(__dirname, '../src/i18n.js')
  }
})复制代码

Mpx에서 제공하는 cli 도구를 통해 프로젝트가 생성된 경우 구성의 이 부분은 파일에 직접 인라인으로 작성할 수 있을 뿐만 아니라 언어에 대한 경로도 포함됩니다. 팩을 지정할 수도 있습니다.

위에서 Mpx의 i18n 솔루션은 저렴한 액세스 비용, 우아한 사용 및 뛰어난 경험을 제공합니다. 직관적인 느낌을 보려면 아래의 mpx i18n 데모를 참조하세요: github.com/didi/mpx/tr…

方案

Mpx框架的 i18n 支持几乎完全实现了 vue-i18n 的全部能力，下面我们来详细说明 Mpx 框架 i18n 能力的具体实现。

方案探索

基于小程序运行环境的双线程架构，我们尝试了不同方案，具体探索过程如下：

方案一：基于 Mpx 框架已提供的数据增强能力 computed 计算属性，来支持 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 chunk template，以微信 WXS 作为 DSL，利用 babylon 将注入的 WXS 转化成 ast，然后遍历 ast 节点，抹平各大平台对 WXS 语法的处理差异，输出各平台可以识别的类 WXS 文件。目前主要支持微信(WXS)、支付宝(sjs)、百度(filter)、QQ(qs)、头条(sjs)等小程序平台。

WXS 在逻辑层运行的跨平台处理

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

以上便是 Mpx 框架在小程序中支持 i18n 能力的技术细节，由于 WXS 是可以在视图层执行的类 JS 语法的一门语言，这样就减少了小程序逻辑层和视图层的通信耗时，提升性能。但是由于实现依赖类 WXS 能力，以及 WXS 执行环境的限制，目前模板上可直接使用的翻译函数包括 $t/$tc/$te ，如果需要格式化数字或日期可以使用对应的翻译函数在 JS 中 Mpx 提供的计算属性中实现。

输出 web 时使用 i18n

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

对比

上面分析了 Mpx 框架的 i18n 方案的技术细节，我们来看下和其他方案的对比，主要是和 uniapp - 基于 Vue 编写小程序的方案，和微信官方的方案，两者提供的 i18n 支持与Mpx的对比有何优劣。

uniapp的方案

uniapp 提供了对 i18n 能力的支持，是直接引入vue-i18n。但小程序中无法在模板上调用 JS 方法，本质上是利用计算属性 Computed 转换好语言，然后利用模板插值在小程序模板中使用。

模板中：<view>{{ message.hello }}</view>

JS里需要写：

  computed: {  
    message () {  
      return { hello: this.$t('message.hello') }
    }
  }复制代码

因此该方案存在一个性能问题，最终的渲染层所看到的文本还是通过 setData 跨线程通信完成，这样就会导致线程间通信增多，性能开销较大。

또한 이 양식은 초기에는 비용이 많이 들었습니다. 나중에 uniapp에서도 이를 최적화하고 템플릿에 $t()를 쓸 수 있는 기능을 구현하여 사용하기가 훨씬 편리해졌습니다.

$t() 구현은 컴파일 중에 $t가 인식되면 자동으로 $t를 대체하고 이를 uniapp 계산 데이터로 대체하는 것이므로 데이터 부분은 여전히 ​​이전처럼 두 개의 복사본으로 유지 관리해야 합니다. 특히 템플릿의 for 루프는 for의 데이터 하나만 변환해야 하는 경우에도 전체 목록을 계산된 속성으로 대체해야 하므로 스레드 간 통신 시 성능 오버헤드가 더욱 증가합니다.

WeChat의 공식 솔루션

WeChat 미니 프로그램 자체도 i18n 솔루션을 제공합니다. 창고 주소는 wechat-miniprogram/miniprogram-i18n입니다.

이 솔루션은 i18n 자체 구현 측면에서 Mpx 프레임워크의 설계와 유사하며 WXS 구현을 기반으로 합니다(영웅도 같은 것을 봅니다). 그러나 주변 장치 지원을 위한 완전한 시스템이 없기 때문에 전반적인 사용자 경험은 Mpx 프레임워크 기반의 i18n을 지원하는 국제 애플릿을 개발하는 것보다 약간 열등합니다.

공식 솔루션에서는 gulp 도구를 기반으로 추가 빌드가 필요하며, JS에서 사용할 경우 번역 기능을 JS에서 사용할 수 있도록 추가 동작을 도입해야 한다는 것이 요점입니다.

Mpx 프레임워크는 통합된 Webpack 빌드를 통해 완전한 콘텐츠를 생성합니다. 사용자는 언어 팩이 업데이트된 후 다시 빌드하는 것을 잊어버릴까 걱정할 필요가 없습니다. JS에서 사용하는 것이 더 편리할 뿐만 아니라 언어 정보도 반응적입니다. 어떤 구성 요소든 언어 값의 변화를 쉽게 모니터링하여 다른 작업을 수행할 수 있습니다.

마지막으로 Mpx의 i18n 솔루션은 WeChat의 공식 솔루션에 비해 큰 이점을 가지고 있습니다. Mpx의 크로스 플랫폼 기능과 결합하면 이 솔루션을 통해 WeChat/Alipay/Baidu/QQ/Toutiao 등을 지원할 수 있습니다. 각 플랫폼에 대해 i18n을 지원하는 작은 프로그램입니다.

요약

Mpx 프레임워크는 소규모 프로그램 개발에 중점을 두고 개발자에게 가장 편안한 개발 경험을 제공하고자 하며, 개발자의 효율성 향상에 도움이 되는 뛰어난 기능적 기능을 많이 갖추고 있습니다. 이 기사에서는 내장된 i18n 기능을 비교 분석을 통해 다른 프레임워크 솔루션에 비해 비용 및 성능 측면에서 확실한 이점이 있다는 결론을 내렸습니다.

프로그래밍 학습에 대해 더 자세히 알고 싶다면 php training 칼럼을 주목해주세요!

위 내용은 미니 프로그램 I18n 모범 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!