花粉乐分享平台宣传视频
> 华为资讯 > 华为资讯 > 鸿蒙编程 > 「华为鸿蒙应用开发 3」可视化、低代码(Super Visual)开发方式
「华为鸿蒙应用开发 3」可视化、低代码(Super Visual)开发方式
来源:李景能
2022-06-30 23:37:00
1044
管理
开发前可以了解下鸿蒙[鸿蒙开发 序]华为鸿蒙操作系统(HarmonyOS)简介及开发环境搭建 开发前的准备:「鸿蒙开发 1」华为鸿蒙应用集成开发环境DevEco Studio安装和设置 了解鸿蒙应用开发的基本开发流程:「鸿蒙开发 2」第一个华为鸿蒙(HarmonyOS)应用程序(App) 本章目标: 1 了解华为鸿蒙应用开发的可视化(低代码)方式 2 通过构建一个简单的具有页面跳转功能的应用 什么是低代码开发方式? 低代码开发方式,即通过可视化界面开发方式快速构建布局、编辑UI界面,可有效降低用户的上手成本并提升用户构建UI界面的效率。
[灵光一闪]说明 请使用DevEco Studio V2.2 Beta1及更高版本。本文以使用的是DevEco Studio 3.0 Beta2版本。 低代码开发功能适用于Phone、Tablet和Wearable设备的JS工程,且compile Sdk Version必须为6及以上。
一 创建工程 1 打开DevEco Studio,创建一个新工程,选择支持Phone / Tablet / Wearable(手机 / 平板 / s可穿戴)的模板,我们在此直接选择Empty Ability Project name工程名称填SuperVisual Development mode开发方式选择Super Visual 其它的可以使用默认设置,点击完成,进入编辑界面 二 创建第一个页面 1 在Project(项目)窗口,删除工程运行默认的入口文件夹:“entry > src > main > js> default > pages > index”文件夹 鼠标右键单击index,选择删除(Delete) 点击删除 2 在Project窗口,选择工程中的“entry > src > main > js > default > pages”,单击鼠标右键,选择“New > JS Visual” JS visual name填first,点击完成,进入编辑界面 创建完成后,可以看到“entry > src > main > supervisual> default > pages > page > page.visual”的文件目录结构
3 第一个页面内有一个容器、文本和一个按钮,通过Div、Text和Button组件来实现 (1)分别选中first.visual画面中的Text、Div组件,单击鼠标右键,选择Delete删除 (2)选中UI Control中的Div组件,将其拖至画布 点击右侧属性样式栏中的通用样式图标(General),设置Div组件的高度Height为100%,使其占满屏幕 点击右侧属性样式栏中的样式图标(Flex),设置Div组件的FlexDirection样式为column,使Div的主轴垂直;设置Div组件的JustifyContent样式为center,使得其子组件在主轴上居中显示;设置Div组件的AlignItems样式为center,使得其子组件在交叉轴上居中显示 设置完后的效果 (3)选中UI Control中的Text组件,将其拖至Div组件的中央区域 点击右侧属性样式栏中的属性图标(Properties),设置Text组件的Content属性为“Hello World” 点击右侧属性样式栏中的通用样式图标(General),设置Text组件的宽(width)为100%,高(height)为100px
点击右侧属性样式栏中的样式图标(Feature),设置组件的FontSize样式为60px,使得其文字放大;设置组件的TextAlign样式为center,使得组件文字居中显示 (4)选中UI Control中的Button组件,将其拖至Text组件下面 点击右侧属性样式栏中的属性图标(Properties),设置Button组件的Value属性为“Next”, 点击右侧属性样式栏中的通用样式图标(General),设置按的宽(width)为40%,高(height)为60px 点击右侧属性样式栏中的样式图标(Feature),设置组件的FontSize样式为40px 至此,第一个页面创建完成 我们可以在预览窗口中看效果,点击右侧边栏的Preview打开预览窗口 三 创建第二个页面 1 在Project窗口,选择工程中的“entry > src > main > js > default > pages”,单击鼠标右键,选择“New > JS Visual” Visual配置界面,JS visual name填second,回车(Enter键)或者点击完成,进入编辑界面 2 第二个页面中有一个容器和文本,通过Div、Text组件实现,现在编辑器已经为我们创建好了,我们就来修改下它们的属性(你也可以删除原有的自己创建,具体步骤参考本章第二节“二 创建第一个页面”)。 选中Text组件,点击右侧属性样式栏中的属性图标(Properties),设置Text组件的Content属性为“Hi,I'm always here.” 点击右侧属性样式栏中的通用图标(General),设置组件的宽(width)为100%,高为60px 点击右侧属性样式栏中的样式图标(Feature),设置组件的FontSize样式为36px,TextAlign样式为center 这样我们的第二个页面创建成功了 四 实现页面跳转 1 在Project窗口,打开工程中的“entry > src > main > js > default > pages > first > first.js”,导入router模块,页面路由router根据页面的uri来找到目标页面,从而实现跳转。示例代码如下: import router from '@system.router'; export default { launch() { router.push ({ uri:'pages/second/second' // 指定要跳转的页面 }) } } 2 打开或者切换到first.visual页面,选中画布上的Button组件,点击右侧属性样式栏中的事件图标(Events),鼠标点击Click事件的输入框,选择launch事件 3 在预览窗口中查看项目效果,点击Next按钮后发现我们的页面成功跳转了。 到此,本章的目标就完成了。

花粉社群VIP加油站

0
点赞
赏礼
赏钱
0
收藏
免责声明:本文仅代表作者个人观点,与花粉乐分享无关。其原创性以及文中陈述文字和内容未经本网证实,对本文以及其中全部或者 部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
凡本网注明 “来源:XXX(非花粉乐分享)”的作品,均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对 其真实性负责。
如因作品内容、版权和其它问题需要同本网联系的,请在一周内进行,以便我们及时处理。
QQ:2443165046 邮箱:info@hflfx.com
关于作者
黛安(采蜜高手)
文章
497
主题
0
关注
0
粉丝
0
点击领取今天的签到奖励!
签到排行
随手拍
54个圈友 0个话题
华为手机随手拍,记录生活点滴之美好
华为P30pro
51个圈友 0个话题
这里是华为P30pro手机交流圈,欢迎华为P30pro用户进群交流
体验官
60个圈友 2个话题
华为花粉体验官,体验官专属的交流群
登录后查看您创建的圈子
登录后查看您创建的圈子
所有圈子
杭州互联网违法和不良信息举报平台 网络110报警服务 浙ICP备17046585号
0
0
分享
请选择要切换的马甲:

个人中心

每日签到

我的消息

内容搜索