清瑶-基于HarmonyOS低代码开发的学习与应用 原创 精华

发布于 2022-2-14 14:22
浏览
1收藏

【本文正在参与优质创作者激励】

Start Time: 14 February,2022

Author: Hairtail

Location: Gao Xing

引言

官方文档:使用JS语言开发(低代码方式)

官方文档:使用低代码进行开发

一.低代码开发的相关概念

  • 低代码开发:通过UI界面编辑功能进行开发
    • 低代码开发支持版本:DevEco Studio V2.2 Beta1及更高版本,compileSdkVersion6及以上
  • 支持模板:(DevEco Studio 3.0 Beta2 compileSdkVersion7及以上)
    • Empty Ability
    • Sport and Health Ability
  • 适用设备范围:
    • Phone
    • Tablet
  • 语言:JS
  • 开发范围:
    • JS应用/服务
    • 服务的UI界面开发
    • JS服务卡片开发
  • 两种常见方式:
    • 在新工程:选择Super Visual支持低代码开发
    • 在旧工程:创建JS Visual文件来开发
  • 低代码开发屏幕适配两种方式:
    • 指定designWidth
    • 设置autoDesignWidth为true
  • 低代码页面分辨率:1080*2340(P40),屏幕密度为3
  • 低代码多语言支持:
    • 定义资源文件(i18n文件夹内定义)
    • 引用资源文件($t方法)

Super Visual:表示使用低代码开发功能开发应用/服务

compileSdkVersion:编译SDK版本

designWidth:为屏幕逻辑宽度,所有与大小相关的样式(例如Width、FontSize)均以designWidth和实际屏幕宽度的比例进行缩放

autoDesignWidth为true:设置autoDesignWidth为true,此时designWidth字段将会被忽略,渲染组件和布局时按屏幕密度进行缩放。

  • 思维导图

清瑶-基于HarmonyOS低代码开发的学习与应用-开源基础软件社区

清瑶-基于HarmonyOS低代码开发的学习与应用-开源基础软件社区

二.低代码开发页面创建

(一)创建工程

(1)工程模板:Empty Ability

(2)开发模式:Super Visual(低代码开发模式)

(3)语言:JS

(4)设备种类:Phone/Tablet

清瑶-基于HarmonyOS低代码开发的学习与应用-开源基础软件社区

(二)创建页面

1.新工程(Empty Ability)创建

  • 创建出来即可使用

清瑶-基于HarmonyOS低代码开发的学习与应用-开源基础软件社区

2.旧工程创建

(1)删除工程运行默认的入口文件夹(index)

清瑶-基于HarmonyOS低代码开发的学习与应用-开源基础软件社区

(2)创建 JS Visua文件

清瑶-基于HarmonyOS低代码开发的学习与应用-开源基础软件社区

(3)在page.visual进行低代码开发

清瑶-基于HarmonyOS低代码开发的学习与应用-开源基础软件社区

三.低代码开发界面详解

(一)目录详解

pages > index > index.js:低代码页面的逻辑描述文件

pages > index > index.visual:存储低代码页面的数据模型

清瑶-基于HarmonyOS低代码开发的学习与应用-开源基础软件社区

  • 注意:
    • (1)如果创建了多个低代码页面,js->default->pages目录下会生成多个页面文件夹及对应的js文件,supervisual->default->pages会生成多个页面文件夹及对应的visual文件。
    • (2)需要点击清瑶-基于HarmonyOS低代码开发的学习与应用-开源基础软件社区按钮,将JS Visual文件转换为hml和css代码后才能在模拟器或真机设备调试/运行(不可逆过程)
    • (3)若要在多设备开发阿德场景,需设备切换或模式切换
    • (4)在创建JS Visual文件时,如果模块的compileSdkVersion低于7,则会自动降级匹配

(二)visual可视化界面详解

(1)功能区

清瑶-基于HarmonyOS低代码开发的学习与应用-开源基础软件社区

功能区 作用
**UI Control:**UI控件栏 可把其中控件拖入画布
Component Tree:组件树 展示层级定位,实现快速定位
Panel:功能面板 画布缩小放大、撤销、显示/隐藏组件虚拟边框、设备切换、模式切换、一键转化
Canvas:画布 可进行拖拽、拉伸等可视化操作
Attributes & Styles:属性样式栏 选中组件后进行属性设置

(2)Attributes & Styles:属性样式栏详解

清瑶-基于HarmonyOS低代码开发的学习与应用-开源基础软件社区

清瑶-基于HarmonyOS低代码开发的学习与应用-开源基础软件社区

四.低代码开发的实例

  • 拖拽、拉伸、设置样式、设置事件
    • 设置样式就是在Event选项的对应事件中填好在index.js写好的函数名即可
    • 清瑶-基于HarmonyOS低代码开发的学习与应用-开源基础软件社区

清瑶-基于HarmonyOS低代码开发的学习与应用-开源基础软件社区

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
2
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐