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

想了解更多内容，请访问：

创新互联专注于企业营销型网站、网站重做改版、敦化网站定制设计、自适应品牌网站建设、H5建站、商城网站定制开发、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为敦化等各大城市提供网站开发制作服务。

和华为官方合作共建的鸿蒙技术社区

https://harmonyos.

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

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

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

width和height属性

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

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

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

以一段简单的代码为例：

根组件div未设置高宽属性，子组件div设置了高宽属性，在“框架”和W3C标准中其运行效果图分别如图1和图2所示：

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

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

h2.left {
position: relative;
left: 30px;
top: 30px;
}
h2.right {
position: absolute;
left: 90px;
top: 160px;
}
这是位于正常位置的标题
这个标题相对于其正常位置向右向下移动
这个标题相对于其页面左上角位置向右向下移动

style="
left: 50px;
top: 50px;
width: 100px;
height: 100px;
background-color: yellow;"
>

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

//index.hml
//index.css
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.box {
width: 30%;
height: 60%;
}
.box--red {
background-color: #f00;
}
.box--green {
background-color: #0f0;
}
.box--blue {
background-color: #00f;
}

Flex Layout

// index.hml
width: 200px;
height: 200px;
align-items: center;
justify-content: center;
border-width: 2px;
border-color: red;"
onswipe="swipeAction"
>
{{title}}
// index.js
export default {
data: {
title: ''
},
swipeAction(e){
switch(e.direction) {
case 'left':
this.title = '左滑';
break;
case 'right':
this.title = '右滑';
break;
case 'up':
this.title = '上滑';
break;
case 'down':
this.title = '下滑';
break;
default:
break;
}
}
}

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

width和height属性

绝对定位和相对定位

这是位于正常位置的标题

文字显示

页面滑动和长按事件