使用AstroZero为组件配置中英文语言属性

期望实现效果

为组件配置多语言属性，实现组件在不同语种环境下都可正常显示。在AstroZero中对组件进行国际化配置，主要是修改国际化资源文件（i18n）。下面以为组件widget_demo_i18n配置中文和英文两种语言属性为例，其最终实现效果如图1、图2。

图1 中文环境下显示效果

图2 英文环境下显示效果

功能实现方法

下载组件模板。
1. 进入AstroZero服务控制台。
2. 在主页中，单击“进入首页”，进入AstroZero应用开发页面。
3. 单击，选择“环境管理 > 环境配置”，进入环境配置。
4. 在主菜单中，选择“维护”。
5. 在左侧导航栏中，选择“全局元素 > 页面资产管理 > 组件模板”。
6. 在组件列表中，单击widgetVueTemplate，进入模板详情页。
7. 单击“下载”，设置组件的名称为“widget_demo_i18n”，单击“保存”，将模板下载到本地。
  图3 保存模板
  
  如果选择“下载原始模板”，下载到本地的组件包中，组件名称不会被修改。
为组件设置多语言属性。
1. 增加“messages-en.json”和“messages-zh.json”国际化资源文件，“messages-zh.json”中需要使用unicode编码。
  - “messages-zh.json”文件内容如下：
```
{
	"zh-CN": {
		"name" : "\u540d\u79f0"				
	}
}
```
  - “messages-en.json”文件内容如下：
```
{
	"en-US": {
		"name" : "name"				
	}
}
```
2. 在“packageinfo.json”文件中，增加i18n节点，指定国际化资源文件的文件名。并增加requires节点，指定需要依赖的Vue和VueI18n库。
  其中，库文件名称和版本号，可在库详情页面获取。
```
{
  "widgetApi": [
    {
      "name": "widget_demo_i18n"
    }
  ],
  "widgetDescription": "widget i18n demo",
  "authorName": "test",
  "width": "",
  "height": "",
  "i18n": [
    {
      "name": "messages-en"
    },
    {
      "name": "messages-zh"
    }
  ],
  "requires": [{
      "name": "global_Vue",
      "version": "100.7"
    },
	{
      "name": "global_VueI18n",
      "version": "100.7"
    },
    {
      "name": "global_Element",
      "version": "100.8"
    }
  ]
}
```
  在“requires”里增加库文件时，需要注意某些库文件之间有依赖关系，增加库文件需要有先后顺序，例如“global_VueI18n”是基于“global_Vue”的，需要写在“global_Vue”之后。
3. 在“widget_demo_i18n.js”的render方法中，使用平台提供的“HttpUtils.getI18n”方法返回一个“i18n”变量，并新建Vue实例传入该“i18n”变量。
```
			var i18n = HttpUtils.getI18n({
				locale: HttpUtils.getLocale(),
				messages: thisObj.getMessages()
			});
			
            var vm = new Vue({
				el: $("#widget_demo_i18n", elem)[0],
				i18n: i18n,
				data: {
					form: {
						name: "miao"	
					}
				}
			})
```
4. 在“widget_demo_i18n.ftl”中，通过VueI18n提供的“$t”方法，使用国际化资源。
```
<div id="widget_demo_i18n">
	<el-form :model="form" :inline="true">
		<el-form-item :label="$t('name')">
			<el-input v-model="form.name"></el-input>
		</el-form-item>
	</el-form>
</div>
```
5. 将开发好的组件代码压缩到后缀为“.zip”的压缩文件中，也可以单击下载链接，获取样例包“widget_demo_i18n.zip”。

在组件库中上传组件包。

在环境配置的“维护 > 全局元素 > 页面资产管理 > 组件”中，单击“提交新组件”。

在提交新组件页面，设置组件基本信息，并上传压缩文件，单击“提交”。

图4 上传自定义组件示例

表1 上传自定义组件参数说明
参数	说明	示例
名字	新提交组件的名称，系统会根据组件包名称自动填充。	widgetdemoi18n
上传源文件	组件源文件包。	选择2.e中的widget_demo_i18n.zip
场景	组件包的应用场景，可同时选择多个。	高级页面
发行说明	组件的描述信息，按需进行设置。此处配置的信息，将会在组件详情页的“概况”页签中进行显示。	自定义组件

关闭Vue3框架渲染组件开关。

本实践所涉及到的自定义组件是基于Vue2框架开发的，而系统是默认开启Vue3框架渲染组件的，所以您需要手动关掉Vue3框架渲染组件开关，否则拖拽组件到页面时会提示如下报错。
图5 界面报错
1. 在应用设计器中，单击左侧导航栏中的“设置”。
2. 在“高级设置”中，取消勾选“页面组件的渲染框架由Vue2升级为Vue3”开关。
  图6 取消选中
在应用设计器中，选择“界面”，单击高级页面后的“+”，新建一个高级页面。
单击，从“全部 > 自定义”中拖拽widgetdemoi18n组件到右侧画布中。

图7 拖拽组件到画布
单击，保存高级页面，保存成功后单击，发布高级页面。
发布成功后，单击，预览效果。

切换环境语言，在不同语种下，在页面中选中Widget，会在右侧显示该组件的属性配置面板，查看组件属性是否符合预期。