当前位置:首页 > 天道酬勤 > 正文内容

华为mate30pro(modelid华为)

张世龙2021年12月20日 04:39天道酬勤770

ITHome(IT之家) 6月25日新闻6月25日,华为DevEco Studio发布了新版本2.2 beta 1,发布了低代码开发和远程实机两个新功能。 以下是更新内容的介绍。

亮点一:面向 JS 框架的低代码开发

低代码开发是devecostudio 2.2 beta 1中新添加的面向JS框架的可视接口开发方式,符合HarmonyOS JS开发规范,具有丰富的页面编辑功能。 开发人员拖动组件&; 通过复制等方法,可以在低代码页中进行接口开发和JS逻辑的关联,可以大幅减少开发者手中的成本,提高用户界面的开发效率。

官方网站开发规格:

359开发者. Harmony OS.com/cn/docs /文档/文档指南/ui-js-overview-000000500376

开发者可以在项目的“jspages目录”下右键单击,然后选择“New JS Visual”来创建新的低代码页。

创建低代码页时,将自动生成相应的visual和js文件,这两个文件的目录结构匹配,如图1所示。 其中,visual文件存储低代码页的数据模型,双击该文件可以打开低代码页,进行可视化开发。 js文件描述低代码页的行为逻辑,并定义页中使用的所有逻辑关系,例如数据、事件等。

注:如果使用原始代码页进行开发,则相关js文件的同级目录(jsdefaultpagespage目录)下不能包含hml或css文件。 否则,在编译时会发生错误。

图1演示创建低代码页

成功创建低代码页的接口由组件栏、组件树、画布、功能面板和属性状态栏五部分组成,如图2所示。 开发者在低代码页上所做的操作将保存在visual文件中。

图2低代码页

1 .低代码页结构:

组件栏(ui控制) )。

可以通过选择位于低代码页左上角的组件栏中的组件并将其拖到中心画布上来添加组件。

组件树(组件树) )

位于代码页的左下角,开发人员可以从组件树中直观地看到组件的层次结构、摘要信息和错误消息。 开发人员可以通过选择组件树中的组件来快速定位画布中的组件。

搜索框

:在搜索框中输入控制类型(如“Image”)时,组件树中将显示所有“Image”类型的组件。

下拉框

:通过单击嵌套组件的下拉框,可以在组件树中显示或隐藏嵌套组件中的子组件。

眼睛图标 )。

:单击非嵌套组件的眼睛图标时,该组件将在画布中隐藏,眼睛图标为

; 再次单击该图标时,该组件将在画布上重现,眼睛图标将恢复为

; 单击嵌套组件的眼睛图标时,该组件及其子组件将同时在画布中隐藏/隐藏。

摘要信息:对于Div、Image等组件,在摘要信息栏中显示组件的ID; 对于可以设置文本内容的组件(如Text、Button、Input和Span ),摘要信息栏将显示相应的文本内容。

错误消息 ) ) )。

:如果组件有错误,组件的右侧会显示红点,如果用鼠标单击红点,则会显示所有组件的详细错误消息。 错误消息的范围包括数据绑定和方法绑定错误。

画布(Canvas ) )。

位于低代码页的中心,开发人员可以在此区域中直观地编辑拖动、复制、剪切和粘贴等组件,因此需要快速编辑UI界面。

功能面板(面板) )。

/p>

画布上方为功能面板区,包含画布放大/缩小按钮、撤销/重做按钮、显示/隐藏组件虚拟边框按钮以及代码转换按钮。

⑤ 属性样式栏(Attributes & Styles)

位于低代码页面的右侧,开发者选中画布中的组件后,可在属性样式栏修改组件的属性、样式和绑定事件。在设置属性 (Properties) 和绑定事件 (Events) 时,开发者可在低代码页面内直接关联 js 文件中的数据与方法,由此定义低代码页面的业务逻辑。

Properties:用于设置组件基本标识和外观显示特征的属性。如组件的 ID、If 等属性。

General:用于设置 Width、Height、Background、Position、Display 等常规样式。

Feature:用于设置组件的特有样式,如描述 text 文字大小的 FontSize 样式等。

Flex:用于设置 Flex 布局相关样式。

Events:为组件绑定相关事件,并设置绑定事件的回调函数。

Dimension:用于设置 Padding、Border、Margin 等与盒式模型相关的样式。

Grid:用于设置 Grid 网格布局相关样式,该图标只有 Div 组件的 Display 被设置为 Grid 时才会出现。

2. 低代码开发还支持实时预览和多语言等功能:

① 支持对 visual 文件的实时预览

当开发者通过低代码页面修改页面布局时,预览器可实时呈现修改后的设计效果,提升界面开发设计效率(如图 3 所示)。

图 3 实时预览效果图

② 支持多语言能力

为满足开发者多语言版本的开发需求,低代码页面推出了多语言能力,开发者可通过定义资源文件和引用资源 2 个步骤,使用多语言能力(如图 4 所示)。第一步:在指定的 i18n 文件夹内放置语言资源文件。第二步:在低代码页面的属性样式栏中,使用 $t 方法引用资源,系统将根据当前语言环境和指定的资源路径,显示对应语言的资源文件中的内容。满足开发者多语言版本的开发需求。

图 4 多语言功能设置图

亮点二:新增远程真机

为了解决开发者获取 HarmonyOS 真机设备资源困难的问题,DevEco Studio 2.2 Beta1 推出了远程真机。

远程真机是部署在云端的真机设备资源,相比远程模拟器,远程真机的界面渲染和操作体验更加流畅,同时也可以更好的验证应用在设备上的运行效果,比如性能、手机网络环境等。

当前,远程真机仅支持 Phone 和 Wearable 两种设备类型。开发者可通过点击“Tools> Device Manager”打开设备列表,点击 Remote Device 页签,登录实名账号,申请使用远程真机资源(如图 5 所示)。

温馨提示:开发者要想在远程真机上调试和运行应用,需要对应用进行签名。

图 5 远程真机示意图

IT之家获悉,除了以上两大新增特性,DevEco Studio 2.2 Beta1 还在原有的基础上,做了不少优化,具体优化点如下:

增强特性

✦ HarmonyOS SDK 新增 API Version 为 6 的接口,Stage 为 Beta。

✦ 分布式模拟器功能增强,默认开启该特性,无需在 DevEco Labs 中手动开启。

✦ HiTrace 日志跟踪分析能力增强,新增支持 timeline 视图和 events 视图。

解决的问题

✦ 解决了限定词目录设置的屏幕密度与真实设备不一致时,预览界面(文本、图像等)会被缩放的问题。

✦ 解决了使用远程模拟器时,提示需要实名认证,实名认证完成后,仍然提示需要进行实名认证的问题。

✦ 解决了远程模拟器小概率出现列表中无法找到设备的问题。

✦ 解决了使用远程模拟器运行应用时,小概率出现无法找到已运行模拟器的问题。

扫描二维码推送至手机访问。

版权声明:本文由花开半夏のブログ发布,如需转载请注明出处。

本文链接:https://www.zhangshilong.cn/work/25384.html

分享给朋友:

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。