☀️元件界面开发功能适用于手机和平板设备的鸿蒙系统应用、原子化服务，目前只支持JS语言，且compileSdkVersion必须为6。下面我们以创建一个新工程为例进行说明。
☀️1，打开开物室，创建一个新工程，模板选择支持手机的模板，如 空能力。
☀️2，在工程配置向导页中，工程类型为服务，开发语言选择JS，设备选择手机，然后点击 完成。
☀️3，在工程的本性规格模块中，找到pages目录，然后鼠标右击，选择 新建 > JS界面。
☀️4，在弹出的对话框中，输入JS Visual Name，点击 完成。
☀️5，创建JS Visual后，会在工程中自动生成元件界面的目录结构。其中page.js和page.visual文件说明如下：
☀️5.1 src > main > js > default > pages > page > page.js：此页面是逻辑描述文件，定义了页面里所用到的所有的逻辑关系，比如数据、事件等，如果创建了多个可视化页面，则pages目录下会生成多个页面文件夹及对应的js文件。
☀️☀️说明：使用元件界面开发时，其关联js文件的同级目录中不能包含hml和css页面，例如上图中的js > default > pages > page目录下不能包含hml与css文件，否则会出现编译报错。
☀️5.2 src > main > supervisual > default > pages > page > page.visual：.visual文件存储的是数据模型，双击该文件进入可视化 元件界面开发 环境。如果创建了多个可视化页面，则pages目录下会生成多个页面文件夹及对应的.visual文件。
☀️☀️说明：开物室预置了JS Visual模板，该模板对应的SDK版本为API 7。因此，在创建JS Visual文件时，如果模块的compileSdkVersion低于7，则会对新建的JS Visual文件对应的SDK版本进行降级处理，使其与模块对应的SDK版本保持一致。
不建议通过文本编辑的方式更改visual文件，否则，可能导致不能正常使用低代码功能。
☀️6，打开“page.visual”文件，即可进行页面的可视化布局设计与开发。
☀️☀️说明：
1. 使用元件界面开发过程中，如果界面需要使用到其它暂不支持可视化布局的控件时，可以在元件界面开发模式完成后，点击 切换代码 按钮，将可视化文件转换为hml和css代码。注意，代码转换操作会删除visual文件及其父目录，且为不可逆过程，代码转换后不能通过hml/css文件反向生成visual文件。
2. 多设备开发的场景，可以点击界面画布右上角设备/模式切换按钮，进行设备切换或模式切换。
元件界面开发模式，支持多语言。☀️开发者可以通过定义资源文件和引用资源两个步骤以使用多语言能力。
☀️1，在指定的i18n文件夹内创建多语言资源文件及对应字符串信息。
☀️2，在 元件界面 的属性样式栏中使用$t方法引用资源，系统将根据当前语言环境和指定的资源路径（通过$t的path参数设置），显示对应语言的资源文件中的内容。
元件界面开发模式，支持两种屏幕适配。☀️1，指定designWidth为720px。designWidth为屏幕逻辑宽度，所有与大小相关的样式（例如Width、FontSize）均以designWidth和实际屏幕宽度的比例进行缩放。例如设置Width为100px时，在实际宽度为1440物理像素的屏幕上，Width实际渲染像素为200物理像素。
☀️2，设置autoDesignWidth为true，此时designWidth字段将会被忽略，渲染组件和布局时按屏幕密度进行缩放。低代码页面仅支持分辨率1080*2340（P40），屏幕密度为3的场景，此场景下1px等于渲染出3个物理像素。例如设置Width为100px时，Width实际渲染像素为300物理像素。
