028-86922220
关于创新互联
多方位宣传企业产品与服务 突出企业形象
轻量JS开发框架与W3C标准的差异
这篇文章主要介绍“HarmonyOS轻量JS开发框架与W3C标准的差异”，在日常操作中，相信很多人在HarmonyOS轻量JS开发框架与W3C标准的差异问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”HarmonyOS轻量JS开发框架与W3C标准的差异”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
创新互联专注于吴堡网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供吴堡营销型网站建设，吴堡网站制作、吴堡网页设计、吴堡网站官网定制、微信小程序定制开发服务，打造吴堡网络公司原创品牌,更为您提供吴堡网站排名全网营销落地服务。
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所示：
针对text组件，不设置高宽属性的条件下，“框架”和W3C标准下web开发界面显示效果一致，如图4和图5所示：
Hello World!
绝对定位和相对定位
如何实现绝对定位和相对定位?如果你常用html语言开发，你可能会首先想到设置position属性为absolute和relative，然后通过left和top设置距离即可实现绝对定位和相对定位的效果，其实现代码如下所示：
h3.left { position: relative; left: 30px; top: 30px; } h3.right { position: absolute; left: 90px; top: 160px; } 这是位于正常位置的标题
这个标题相对于其正常位置向右向下移动 这个标题相对于其页面左上角位置向右向下移动
但是在“框架”中，我们查看HarmonyOS官网JS API文档后发现，position属性是不支持设置absolute和relative，那该如何实现绝对定位和相对定位这两种效果呢?
如果我们仔细阅读HarmonyOS官网文档，我们会发现“框架”提供了一个新组件stack，借助这个组件我们可以实现绝对定位的效果，示例代码如下所示，添加一个stack根组件(同时也作为父组件)，其子组件为div，然后设置其left和top的值为50px来实现绝对定位的效果，其效果如图6所示，子组件div相对于父组件stack向下、向右各偏移50px。
另外，绝对定位存在一种特殊场景：如果是根组件，直接设置top和left属性即可实现绝对定位功能;非根组件，其父组件必须是stack，才能通过设置top和left属性来实现绝对定位功能。根组件绝对定位是相对于页面左上角做偏移，非根组件绝对定位是相对于父组件做偏移。
如下代码所示，根组件直接设置top和left属性实现绝对定位，由于此时根组件作为父组件不是stack，所以设置子组件的绝对定位无效，如图7中所示，子组件黄色div相对于父组件红色div未实现绝对定位的效果。
相对定位：由于设备硬件ROM和RAM大小限制，当前“框架”不支持W3C标准中的相对定位实现(position:relative)，只支持部分flex布局属性，与W3C标准相比差异较大，具体差异见表1所示。
表1：“框架”下flex布局可支持属性对比
在“框架”中实现flex布局，将需要flex布局的子组件用div容器包裹一下，并将div的display属性设置为flex即可。如下图所示，我们要实现三个div一行排列且居中显示的flex布局。
在“框架”中我们可以这样实现：添加一个div父组件，其子组件按行居中排列，分别设置justify-content和align-items两个属性值为center(div组件的主轴方向默认值是row，如果想实现纵向排列需要设置flex-direction: column)即可实现图8中的效果，详细代码如下所示：
//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; }
W3C标准下的web开发代码如下所示，和“框架”下web开发代码实现基本一致。
Flex Layout