您现在的位置是：首页 > 文章详情

HarmonyOS轻量JS开发框架与W3C标准差异分析

日期：2021-05-19点击：486收藏

HarmonyOS轻量JS应用开发框架(下文简称“框架”)，是HarmonyOS为开发者提供的一套开发JS应用的开发框架。开发框架采用类小程序的web开发方式，其实现大部分遵循W3C标准(主流web开发标准)，但由于设备条件限制(例如，ROM和RAM大小)，“框架”中部分组件和属性与W3C标准存在差异，需要开发者在开发过程中了解和掌握。

本文将会梳理当前“框架”已有的组件和属性与W3C标准相对应组件和属性的主要差异点，并配以示例说明，供开发者在开发过程中参考。

主要差异点包括：width和height属性、绝对定位和相对定位、文字显示、页面滑动和长按事件。

width和height属性

作为一个前端开发者，在开发网页或者应用的过程中，我们一般不会手动设置组件的高度和宽度，而是希望元素的大小根据窗口或者子元素自动调整，这就是自适应能力。

自适应能力使得布局更灵活，可适应不同设备、不同窗口和不同分辨率下的显示。

但是，“框架”当前提供的组件除text外，皆不支持内容高度和宽度的自适应能力，必须由开发者明确指定高度和宽度，否则组件不会显示。

以一段简单的代码为例：

<div style="background-color: red;">     <div style="width: 100px;height: 100px;background-color: yellow;"></div> </div>

根组件div未设置高宽属性，子组件div设置了高宽属性，在“框架”和W3C标准中其运行效果图分别如图1和图2所示： HarmonyOS轻量JS开发框架与W3C标准差异分析从图1和图2可以看出，“框架”中根组件必须设置高度和宽度，否则无法显示，即使根组件的子组件设置了高宽度属性，界面也无法显示。另外由于W3C标准的div组件是块状元素，如果没有设置宽度，会独占一行，所以在图2中，没有设置宽度，其显示范围为一整行。

“框架”中设置根组件的高度和宽度，则正常显示，效果如图3所示：

<div style="width:200px;height:200px;background-color: red;">     <div style="width: 100px;height: 100px;background-color: yellow;"></div> </div>

HarmonyOS轻量JS开发框架与W3C标准差异分析

针对text组件，不设置高宽属性的条件下，“框架”和W3C标准下web开发界面显示效果一致，如图4和图5所示：

<text>   Hello World! </text>

HarmonyOS轻量JS开发框架与W3C标准差异分析

绝对定位和相对定位

如何实现绝对定位和相对定位？如果你常用html语言开发，你可能会首先想到设置position属性为absolute和relative，然后通过left和top设置距离即可实现绝对定位和相对定位的效果，其实现代码如下所示：

<html>   <head>     <style type="text/css">       h2.left {         position: relative;         left: 30px;         top: 30px;       }       h2.right {         position: absolute;         left: 90px;         top: 160px;       } </style>   </head>   <body>     <h2>这是位于正常位置的标题</h2>     <h2 class="left">这个标题相对于其正常位置向右向下移动</h2>     <h2 class="right">这个标题相对于其页面左上角位置向右向下移动</h2>   </body> </html>

但是在“框架”中，我们查看HarmonyOS官网JS API文档后发现，position属性是不支持设置absolute和relative，那该如何实现绝对定位和相对定位这两种效果呢？

如果我们仔细阅读HarmonyOS官网文档，我们会发现“框架”提供了一个新组件stack，借助这个组件我们可以实现绝对定位的效果，示例代码如下所示，添加一个stack根组件（同时也作为父组件），其子组件为div，然后设置其left和top的值为50px来实现绝对定位的效果，其效果如图6所示，子组件div相对于父组件stack向下、向右各偏移50px。

<stack style="width: 200px; height: 200px; background-color: red;">   <div     style="       left: 50px;       top: 50px;       width: 100px;       height: 100px;       background-color: yellow;"   >   </div></stack>

HarmonyOS轻量JS开发框架与W3C标准差异分析