【快应用】多语言适配案例

原创
2023/05/30 14:37
阅读数 130
AI总结

 【关键词】

多语言,$t

 

【问题背景】

快应用平台的能力会覆盖多个国家地区,平台支持多语言的能力后,可以让一个快应同时支持多个语言版本的切换,开发者无需开发多个不同语言的源码项目,避免给项目维护带来困难。使用系统默认的语言,开发者配置多语言的方式非常简单,只需要定义资源与引用资源两个步骤即可

 

【实现方案】

多语言的实现主要分为两步:

1、资源文件的定义,即资源文件的创建

资源文件用于存放多个语言的业务信息定义,快应用平台使用JSON文件保存资源定义。

在项目源码src目录下定义i18n文件夹,内部放置每个语言地区下的资源定义文件即可。多个资源文件会按一定顺序进行匹配,例如:对于zh-CN,则按zh-CN -> zh -> zh-* -> defaults的顺序匹配,其中zh-*匹配到多个,则按字母升序区分大小写排序。

如下图所示:

zh-CN.json

cke_10022.png

en-US.json

cke_12257.png

2、 多语言的引用方式

2.1、Ux页面中使用;

可以template中使用$t("hello.text")方式直接使用json文件中配置的,也可以通过{{ $t("hello.content", { txt: data }) }}使用变量data的方式去使用。

<template>

  <!-- Only one root node is allowed in template. -->

  <div class="container">

    <text class="title">{{ $t("hello.text") }}</text>

    <text>{{ $t("hello.content", { txt: data }) }}</text>

  </div>

</template>

 

<style>

  .container {

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

 

  .title {

    font-size: 100px;

  }

</style>

 

<script>

  import configuration from '@system.configuration'

  module.exports = {

    data: {

      componentData: {},

      data: ""

    },

    onShow(options) {

      console.log(this.$t("hello.text"));

      const locale = configuration.getLocale()

      console.log(locale.language)

      if (locale.language === "zh") {

        this.data = "欢迎使用多语言示例"

      } else if (locale.language === "en") {

        this.data = "welcome to use Multilingual demo"

      }

    },

  }

</script>

截图:

cke_4086.png

2.2、Manifest文件中配置,用法是${xxx.xxx}形式,下面展示了在manifest文件中应用名称和页面标题的多语言配置,对应的配置可以看上图的json文件。

{

  "package": "com.huawei.language",

  "name": "${message.appName}",

  "versionName": "1.0.0",

  "versionCode": 1,

  "icon": "/Common/logo.png",

  "minPlatformVersion": 1100,

  "features": [],

  "config": {},

  "router": {

    "entry": "Hello",

    "pages": {

      "Hello": {

        "component": "hello"

      }

    }

  },

  "display": {

    "pages": {

      "Hello": {

        "titleBarText": "${hello.helloTitlebar}"

      }

    }

  }

}

截图:

cke_7995.png

 

 

 欲了解更多更全技术文章,欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
AI总结
返回顶部
顶部