轻量JS开发框架与W3C标准的差异

针对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开发代码实现基本一致。

 文字显示 

在前端开发中，遵循W3C标准开发者可以使用多种标签来实现文字显示。如段落“

但是基于“框架”开发的应用想要显示文字，必须将文字内容放在text组件中，或者设置input组件的value值，才可以正常显示。

如下代码所示，在div组件中直接添加文字“Hello  world”，可以看到W3C标准下web开发界面显示出文字(如图9所示)，“框架”下web开发界面则无法显示文字(如图10所示)。

   Hello World! 

“框架”下正确使用方式是将要显示的文字放在text组件中，或者设置input组件的value值才能正常显示文字。另外，对于智能穿戴设备，只支持30和38两种字号的字体，字体只支持HYQiHei-65S;如果对其他大小的字体有需求，暂时只能通过贴图的方式去实现开发者所需的效果。

text组件显示文字的代码如下：

   hello world 

input组件显示文字的代码如下，通过设置value属性显示文字：

页面滑动和长按事件

“框架”原生支持页面滑动(swipe)和长按(longpress)事件，其中swipe支持“上下左右”四个方向的滑动，开发者通过事件返回值即可获取滑动方向。

如下代码所示，我们添加一个div组件和一个text组件，text组件用来显示屏幕上面的滑动方向，事件回调函数swipeAction返回相应的属性值，根据回调函数返回值中的direction属性，我们可以获取滑动方向，并在text组件中显示。

// index.hml    {{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;       }   } }

除了上面关键差异点外，“框架”和W3C标准间还会存在一些组件名称(和等)、属性名称等细节信息差异，建议各位开发者在开发过程中多多参考HarmonyOS官网开发文档。

到此，关于“HarmonyOS轻量JS开发框架与W3C标准的差异”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！