HarmonyOS Developer DevEco Studio使用指南-低代码开发

低代码多语言支持及屏幕适配

多语言支持

低代码页面支持多语言能力，让应用开发者无需开发多个不同语言的版本。开发者可以通过定义资源文件和引用资源两个步骤以使用多语言能力。

1. 在指定的i18n文件夹内创建多语言资源文件及对应字符串信息。

2. 在低代码页面的属性样式栏中使用$t方法引用资源，系统将根据当前语言环境和指定的资源路径（通过$t的path参数设置），显示对应语言的资源文件中的内容。$t相关说明请参考​​多语言支持​​。

如下图所示，在属性栏中引用了字符串资源后，打开预览器即可预览展示效果。

说明

引用资源后，暂不支持在低代码页面内显示多语言的内容，开发者可通过previewer、模拟器及真机查看引用资源后的具体效果。

屏幕适配

对于屏幕适配问题，低代码页面支持两种配置方法。

• 指定designWidth为720px。designWidth为屏幕逻辑宽度，所有与大小相关的样式（例如Width、FontSize）均以designWidth和实际屏幕宽度的比例进行缩放。例如设置Width为100px时，在实际宽度为1440物理像素的屏幕上，Width实际渲染像素为200物理像素。
• 设置autoDesignWidth为true，此时designWidth字段将会被忽略，渲染组件和布局时按屏幕密度进行缩放。低代码页面仅支持分辨率1080*2340（P40），屏幕密度为3的场景，此场景下1px等于渲染出3个物理像素。例如设置Width为100px时，Width实际渲染像素为300物理像素。

说明

designWidth和autoDesignWidth相关具体概念请参考​​js标签配置​​。

低代码开发Demo示例

接下来为大家展示一个低代码开发的Demo示例，使用低代码开发如下华为手机介绍列表的HarmonyOS应用/服务示例。

1. 删除模板页面中的控件后，选中组件栏中的List组件，将其拖至中央画布区域，松开鼠标，实现一个List组件的添加。在List组件添加完成后，用同样的方法拖拽一个ListItem组件至List组件内。

2. 选中画布内的List组件，按住控件的resize按钮，将List拉大。

3. 依次选中组件栏中的Div、Image、Div、Text组件，将Div组件拖至中央画布区域的ListItem组件内，Image、Div组件拖至画布内Div组件内，Text组件拖至最内层Div组件内。

4. 
   
5. 分别选中组件树中的ListItem和外层Div组件，单击右侧属性样式栏中的样式图标

6. 

7. （General），在展开的General栏中修改ListItem和Div组件的高度。

5. 对内层Div组件的样式进行调整 。

6. 
   
7. js文件用来定义页面的业务逻辑，基于JS语言的动态化能力，可以使应用/服务更加富有表现力，具备更加灵活的设计。低代码页面支持设置属性

8. 

9. （Properties）和绑定事件

10. 

11. （Events）时关联js文件中的数据及方法。

   a. 在低代码页面关联js文件的data对象中定义phoneList数组。

   b. 选中组件树中的ListItem组件，单击右侧属性样式栏中的属性图标

（Properties），在展开的Properties栏中单击For属性对应的输入框，并在弹出的下拉框中选中{{phoneList}}，实现在低代码页面内引用关联js文件中定义的数据。成功实现关联后，For属性会根据设置的数据列表（phoneList），展开当前元素，即复制出3个结构一致的ListItem。

   c. 选中画布中的Image组件，修改右侧属性栏中的Src属性为{{$item.img}}，为Image设置图片资源。其中item为phoneList数组中定义的对象，item.img即为对象中的img属性。

   d. 选中画布中的Text组件，修改右侧属性栏中的Content属性为{{$item.title}}，为Text设置文本内容并调整Text的Width样式。

   e. 复制并粘贴画布中的Text组件，修改被粘贴出来的Text组件右侧属性栏中的Content属性为{{$item.subTitle}}，为其设置文本内容并调整FontSize样式。

   f. 在关联js文件中定义switchTitle()方法，为粘贴出来的Text组件绑定Click事件，并关联js文件中的switchTitle方法。关联后，在previewer、模拟器及真机中单击该Text组件，会将文本内容从"Leap Further Ahead"切换成"Kirin 9000"。

7. 使用预览器预览界面效果。打开.visual文件，并单击DevEco Studio右侧Previewer，即可实现实时的预览功能，开发者在低代码页面中的每一步操作都会在Previewer上实时显示。

文章转载自：​​https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/ide-low-code-demo-0000001480340085-V3​​