logo资料库

6-1.技术解读之HarmonyOS轻量JS开发框架与W3C标准差异分析.pdf

发布时间：2022-03-31 发布人：admin 分类：互联网 资料大小：0.80M 资料格式：pdf 举报 版权申诉
第1页 / 共18页
第2页 / 共18页
第3页 / 共18页
第4页 / 共18页
第5页 / 共18页
第6页 / 共18页
第7页 / 共18页
第8页 / 共18页
资料共18页，剩余部分请下载后查看
    HarmonyOS 轻量 JS 开发框架与 W3C 标准差异分析 HarmonyOS 轻量 JS 应用开发框架(下文简称“框架”)，是 HarmonyOS 为开发者提供的 一套开发 JS 应用的开发框架。开发框架采用类小程序的 web 开发方式，其实现大部分遵循 W3C 标准(主流 web 开发标准)，但由于设备条件限制(例如，ROM 和 RAM 大小)，“框架” 中部分组件和属性与 W3C 标准存在差异，需要开发者在开发过程中了解和掌握。 本文将会梳理当前“框架”已有的组件和属性与 W3C 标准相对应组件和属性的主要差异点， 并配以示例说明，供开发者在开发过程中参考。主要差异点包括：width 和 height 属性、 绝对定位和相对定位、文字显示、页面滑动和长按事件。 width 和 height 属性 作为一个前端开发者，在开发网页或者应用的过程中，我们一般不会手动设置组件的高度和 宽度，而是希望元素的大小根据窗口或者子元素自动调整，这就是自适应能力。 自适应能力使得布局更灵活，可适应不同设备、不同窗口和不同分辨率下的显示。 但是，“框架”当前提供的组件除 text 外，皆不支持内容高度和宽度的自适应能力，必须 由开发者明确指定高度和宽度，否则组件不会显示。 以一段简单的代码为例：
    来源：HarmonyOS 开发者微信号 https://mp.weixin.qq.com/s/cAKrVR4iuPh-tFrdx1jg0A
    根组件 div 未设置高宽属性，子组件 div 设置了高宽属性，在“框架”和 W3C 标准中其运 行效果图分别如图 1 和图 2 所示： 图 1 “框架”中不设置根组件的高度和宽度显示效果图 图 2 W3C 标准中不设置根组件的高度和宽度显示效果图从图 1 和图 2 可以看出，“框架” 中根组件必须设置高度和宽度，否则无法显示，即使根组件的子组件设置了高宽度属性，界 面也无法显示。另外由于 W3C 标准的 div 组件是块状元素，如果没有设置宽度，会独占一 行，所以在图 2 中，没有设置宽度，其显示范围为一整行。 “框架”中设置根组件的高度和宽度，则正常显示，效果如图 3 所示：
    来源：HarmonyOS 开发者微信号 https://mp.weixin.qq.com/s/cAKrVR4iuPh-tFrdx1jg0A
    图 3 “框架”下根组件设置高度和宽度效果图 针对 text 组件，不设置高宽属性的条件下，“框架”和 W3C 标准下 web 开发界面显示效 果一致，如图 4 和图 5 所示： Hello World! 图 4 “框架”下 text 组件的文本显示图 来源：HarmonyOS 开发者微信号 https://mp.weixin.qq.com/s/cAKrVR4iuPh-tFrdx1jg0A
    图 5 W3C 标准下 text 组件的文本显示图 绝对定位和相对定位 如何实现绝对定位和相对定位？如果你常 用 html 语言开发，你可 能会首先想到设 置 position 属性为 absolute 和 relative，然后通过 left 和 top 设置距离即可实现绝对定位和 相对定位的效果，其实现代码如下所示：

    这是位于正常位置的标题

    这个标题相对于其正常位置向右向下移动

    这个标题相对于其页面左上角位置向右向下移动

    但是在“框架”中，我们查看 HarmonyOS 官网 JS API 文档后发现，position 属性是不支 持设置 absolute 和 relative，那该如何实现绝对定位和相对定位这两种效果呢？如果我们 仔细阅读 HarmonyOS 官网文档，我们会发现“框架”提供了一个新组件 stack，借助这个 组件我们可以实现绝对定位的效果，示例代码如下所示，添加一个 stack 根组件（同时也作 为父组件），其子组件为 div，然后设置其 left 和 top 的值为 50px 来实现绝对定位的效果， 其效果如图 6 所示，子组件 div 相对于父组件 stack 向下、向右各偏移 50px。
    style=" left: 50px; top: 50px; width: 100px; height: 100px; background-color: yellow;" >
    图 6 “框架”中绝对定位实现效果 另外，绝对定位存在一种特殊场景：如果是根组件，直接设置 top 和 left 属性即可实现绝 对定位功能；非根组件，其父组件必须是 stack，才能通过设置 top 和 left 属性来实现绝对 定位功能。根组件绝对定位是相对于页面左上角做偏移，非根组件绝对定位是相对于父组件 做偏移。如下代码所示，根组件直接设置 top 和 left 属性实现绝对定位，由于此时根组件 作为父组件不是 stack，所以设置子组件的绝对定位无效，如图 7 中所示，子组件黄色 div 来源：HarmonyOS 开发者微信号 https://mp.weixin.qq.com/s/cAKrVR4iuPh-tFrdx1jg0A
    相对于父组件红色 div 未实现绝对定位的效果。
    来源：HarmonyOS 开发者微信号 https://mp.weixin.qq.com/s/cAKrVR4iuPh-tFrdx1jg0A
    图 7 “框架”中非根组件和根组件绝对定位实现效果图 相对定位：由于设备硬件 ROM 和 RAM 大小限制，当前“框架”不支持 W3C 标准中的相 对定位实现（position:relative)，只支持部分 flex 布局属性，与 W3C 标准相比差异较大， 具体差异见表 1 所示。 表 1 “框架”下 flex 布局可支持属性对比 在“框架”中实现 flex 布局，将需要 flex 布局的子组件用 div 容器包裹一下，并将 div 的 display 属性设置为 flex 即可。如下图所示，我们要实现三个 div 一行排列且居中显示的 flex 来源：HarmonyOS 开发者微信号 https://mp.weixin.qq.com/s/cAKrVR4iuPh-tFrdx1jg0A
    分享到：
    赞 收藏

    相关推荐

    最新资料