更多内容请访问：https://harmonyos.51cto.com，一个与华为官方共同打造的鸿蒙技术社区，你应该早点听说过网页三Musketeers是一套强大的网页编辑工具，最初由美国Macromedia公司开发。由Dreamweaver、Fireworks、Flash组成，俗称Web三剑客。Dreamweaver是一款“所见即所得”的可视化网站开发工具，主要用于动态网页和静态网页的开发；Fireworks主要用于网页上常用的jpg、gif的制作处理，也可用于制作网页版面；Flash主要用于制作动画。其实，“所见即所得”的开发工具早就存在了，何必在这里提呢？因为它确实可以帮助新手快速上手。作为新手，如果要开发一个简单的应用程序，首先要了解各个组件的组成。属性和事件，让新手的兴趣顿时变得有点难以上手。这时，如果使用“所见即所得”的开发界面，只需轻松拖拽组件，修改组件各个属性的值即可。马上看到修改后的效果，让你一行代码都可以拖拽出你想要的界面，设置好。只要迈出第一步，我们下来就可以查看生成的代码。在拖和代码之间学习，而不是一开始就从代码中学习，大大提高了新手的学习兴趣。介绍完之前的历史，再来说说HUAWEIDevEcoStudio工具，它同样具有“所见即所得”的低代码开发功能。HarmonyOS低代码开发方式，拥有丰富的UI界面编辑功能。本发明的界面开发方式快速构建布局，可以有效降低用户的时间成本，提高用户构建UI界面的效率。打开DevEcoStudio，新建一个工程，选择一个支持Phone的模板，新建一个空白的JS工程。在这里选择应用程序桌面。低代码开发功能适用于HarmonyOS应用和手机、平板设备的原子服务。目前只支持JS语言，compileSdkVersion必须为6。选择模块的pages文件夹，右键，选择New>JSVisual。这里是namedlist，用来显示图片列表。将一个列表组件拖到画布上。将List组件的宽高调整为100%。拖拽一个ListItem组件到List组件中，设置宽度为100%，高度为100px。拖拽一个Image组件到ListItem组件中，设置宽度为200px，高度为100%。将Text组件拖入ListItem组件，并在Image组件右侧设置宽度为100%，高度为100%。在list.js文件中准备好List组件需要的数据。选择ListItem组件并设置数据源。选择Image组件，设置图片源为$item.img，修改图片宽度为200px，ObjectFit:contain。选择文本组件，设置文本组件的显示内容。修改Text组件的左内边距为10px。大效果出来了，但还是觉得不够漂亮，比如每行太近，在每行下面加上分隔线会更好看。拖拽界面，然后在项目中显示界面，先将界面转换成hml和css文件。导出hml和css文件后，文件名是list，但是预览器不会通过，以后可以修改文件名。创建图像详细信息页面。将一个Text组件拖到屏幕上，设置宽度和高度以及文本对齐方式。调整最外层div的对齐方式。拖放图像组件。是时候导出html和css文件了。最终效果为：B站：https://www.bilibili.com/video/BV1Ag411N7T8/更多内容请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com
