国际化i18n

Mpx支持国际化i18n，使用方式及支持能力与vue-i18n非常接近

使用方法

Mpx自带i18n能力，无需额外安装插件。由于小程序模板中的i18n函数是通过wxs编译注入进行实现，我们需要将i18n配置传入到MpxWebpackPlugin中来使i18n生效，这是与vue-i18n最大的区别

配置方法

i18n配置传入到MpxWebpackPlugin选项中即可生效，额外支持messagesPath/dateTimeFormatsPath/numberFormatsPath配置，其余配置参考vue-i18n

  1. new MpxWebpackPlugin({
  2.   i18n: {
  3.     locale: 'en-US',
  4.     // messages既可以通过对象字面量传入，也可以通过messagesPath指定一个js模块路径，在该模块中定义配置并导出，dateTimeFormats/dateTimeFormatsPath和numberFormats/numberFormatsPath同理
  5.     messages: {
  6.       'en-US': {
  7.         message: {
  8.           hello: '{msg} world'
  9.         }
  10.       },
  11.       'zh-CN': {
  12.         message: {
  13.           hello: '{msg} 世界'
  14.         }
  15.       }
  16.     },
  17.     // messagesPath: path.resolve(__dirname, '../src/i18n.js')
  18.   }
  19. })

在js中使用

同vue-i18n，在组件中直接调用翻译函数使用，目前js中支持了vue-i18n中全部的翻译函数，包括$t/$tc/$te/$d/$n，详细使用方法参考vue-i18n

  1. createComponent({
  2.   ready () {
  3.     console.log(this.$t('message.hello', { msg: 'hello' }))
  4.   },
  5.   computed: {
  6.     formatedDatetime () {
  7.       return this.$d(new Date(), 'long')
  8.     }
  9.   }
  10. })

在模板中使用

类似于vue-i18n，在模板的Mustache插值中直接调用翻译函数，目前由于wxs执行环境的限制，模板上可直接使用的翻译函数包括$t/$tc/$te，如果需要格式化数字或日期可以使用对应的js翻译函数和Mpx提供的计算属性结合实现

  1. <view>
  2.   <view>{{ $t('message.hello', { msg: 'hello' }) }}</view>
  3.   <!-- formatedDatetime计算属性定义见上例，可基于locale变更响应刷新 -->
  4.   <view>{{formatedDatetime}}</view>
  5. </view>

动态变更locale

类似于vue-i18n，可实现全局local变更及局部local变更，并自动更新视图，使用方式如下

  1. import mpx, { createComponent } from '@mpxjs/core'
  3. createComponent({
  4.   ready () {
  5.     // 局部locale变更，生效范围为当前组件内
  6.     this.$i18n.locale = 'en-US'
  7.     setTimeout(() => {
  8.       // 全局locale变更，生效范围为项目全局
  9.       mpx.i18n.locale = 'ja-JP'
  10.     }, 1000)
  11.   }
  12. })

平台支持

由于Mpx中i18n实现依赖类wxs能力，目前支持除头条之外的所有小程序平台(微信/支付宝/qq/百度)，在输出web时，构建会自动引入vue-i18n并进行安装配置，无需修改任何代码即可按照预期正常工作。