自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

HarmonyOS輕量JS開(kāi)發(fā)框架與W3C標(biāo)準(zhǔn)差異分析

作者：HarmonyOS技術(shù)社區(qū)
開(kāi)發(fā) 前端 OpenHarmony
本文將會(huì)梳理當(dāng)前“框架”已有的組件和屬性與W3C標(biāo)準(zhǔn)相對(duì)應(yīng)組件和屬性的主要差異點(diǎn)，并配以示例說(shuō)明，供開(kāi)發(fā)者在開(kāi)發(fā)過(guò)程中參考。

[[400757]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

HarmonyOS輕量JS應(yīng)用開(kāi)發(fā)框架(下文簡(jiǎn)稱“框架”)，是HarmonyOS為開(kāi)發(fā)者提供的一套開(kāi)發(fā)JS應(yīng)用的開(kāi)發(fā)框架。開(kāi)發(fā)框架采用類小程序的web開(kāi)發(fā)方式，其實(shí)現(xiàn)大部分遵循W3C標(biāo)準(zhǔn)(主流web開(kāi)發(fā)標(biāo)準(zhǔn))，但由于設(shè)備條件限制(例如，ROM和RAM大小)，“框架”中部分組件和屬性與W3C標(biāo)準(zhǔn)存在差異，需要開(kāi)發(fā)者在開(kāi)發(fā)過(guò)程中了解和掌握。

本文將會(huì)梳理當(dāng)前“框架”已有的組件和屬性與W3C標(biāo)準(zhǔn)相對(duì)應(yīng)組件和屬性的主要差異點(diǎn)，并配以示例說(shuō)明，供開(kāi)發(fā)者在開(kāi)發(fā)過(guò)程中參考。

主要差異點(diǎn)包括：width和height屬性、絕對(duì)定位和相對(duì)定位、文字顯示、頁(yè)面滑動(dòng)和長(zhǎng)按事件。

width和height屬性

作為一個(gè)前端開(kāi)發(fā)者，在開(kāi)發(fā)網(wǎng)頁(yè)或者應(yīng)用的過(guò)程中，我們一般不會(huì)手動(dòng)設(shè)置組件的高度和寬度，而是希望元素的大小根據(jù)窗口或者子元素自動(dòng)調(diào)整，這就是自適應(yīng)能力。

自適應(yīng)能力使得布局更靈活，可適應(yīng)不同設(shè)備、不同窗口和不同分辨率下的顯示。

但是，“框架”當(dāng)前提供的組件除text外，皆不支持內(nèi)容高度和寬度的自適應(yīng)能力，必須由開(kāi)發(fā)者明確指定高度和寬度，否則組件不會(huì)顯示。

以一段簡(jiǎn)單的代碼為例：

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

 根組件div未設(shè)置高寬屬性，子組件div設(shè)置了高寬屬性，在“框架”和W3C標(biāo)準(zhǔn)中其運(yùn)行效果圖分別如圖1和圖2所示：

從圖1和圖2可以看出，“框架”中根組件必須設(shè)置高度和寬度，否則無(wú)法顯示，即使根組件的子組件設(shè)置了高寬度屬性，界面也無(wú)法顯示。另外由于W3C標(biāo)準(zhǔn)的div組件是塊狀元素，如果沒(méi)有設(shè)置寬度，會(huì)獨(dú)占一行，所以在圖2中，沒(méi)有設(shè)置寬度，其顯示范圍為一整行。

“框架”中設(shè)置根組件的高度和寬度，則正常顯示，效果如圖3所示：

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

 

針對(duì)text組件，不設(shè)置高寬屬性的條件下，“框架”和W3C標(biāo)準(zhǔn)下web開(kāi)發(fā)界面顯示效果一致，如圖4和圖5所示：

  1. <text> 
  2.   Hello World! 
  3. </text> 

  

絕對(duì)定位和相對(duì)定位

如何實(shí)現(xiàn)絕對(duì)定位和相對(duì)定位?如果你常用html語(yǔ)言開(kāi)發(fā)，你可能會(huì)首先想到設(shè)置position屬性為absolute和relative，然后通過(guò)left和top設(shè)置距離即可實(shí)現(xiàn)絕對(duì)定位和相對(duì)定位的效果，其實(shí)現(xiàn)代碼如下所示：

  1. <html> 
  2.   <head> 
  3.     <style type="text/css"> 
  4.       h2.left { 
  5.         position: relative; 
  6.         left: 30px; 
  7.         top: 30px; 
  8.       } 
  9.       h2.right { 
  10.         position: absolute; 
  11.         left: 90px; 
  12.         top: 160px; 
  13.       } 
  14. </style> 
  15.   </head> 
  16.   <body> 
  17.     <h2>這是位于正常位置的標(biāo)題</h2> 
  18.     <h2 class="left">這個(gè)標(biāo)題相對(duì)于其正常位置向右向下移動(dòng)</h2> 
  19.     <h2 class="right">這個(gè)標(biāo)題相對(duì)于其頁(yè)面左上角位置向右向下移動(dòng)</h2> 
  20.   </body> 
  21. </html> 

但是在“框架”中，我們查看HarmonyOS官網(wǎng)JS API文檔后發(fā)現(xiàn)，position屬性是不支持設(shè)置absolute和relative，那該如何實(shí)現(xiàn)絕對(duì)定位和相對(duì)定位這兩種效果呢?

如果我們仔細(xì)閱讀HarmonyOS官網(wǎng)文檔，我們會(huì)發(fā)現(xiàn)“框架”提供了一個(gè)新組件stack，借助這個(gè)組件我們可以實(shí)現(xiàn)絕對(duì)定位的效果，示例代碼如下所示，添加一個(gè)stack根組件(同時(shí)也作為父組件)，其子組件為div，然后設(shè)置其left和top的值為50px來(lái)實(shí)現(xiàn)絕對(duì)定位的效果，其效果如圖6所示，子組件div相對(duì)于父組件stack向下、向右各偏移50px。

  1. <stack style="width: 200px; height: 200px; background-color: red;"> 
  2.   <div 
  3.     style=" 
  4.       left: 50px; 
  5.       top: 50px; 
  6.       width: 100px; 
  7.       height: 100px; 
  8.       background-color: yellow;" 
  9.   > 
  10.   </div> 
  11. </stack> 

 

另外，絕對(duì)定位存在一種特殊場(chǎng)景：如果是根組件，直接設(shè)置top和left屬性即可實(shí)現(xiàn)絕對(duì)定位功能;非根組件，其父組件必須是stack，才能通過(guò)設(shè)置top和left屬性來(lái)實(shí)現(xiàn)絕對(duì)定位功能。根組件絕對(duì)定位是相對(duì)于頁(yè)面左上角做偏移，非根組件絕對(duì)定位是相對(duì)于父組件做偏移。

如下代碼所示，根組件直接設(shè)置top和left屬性實(shí)現(xiàn)絕對(duì)定位，由于此時(shí)根組件作為父組件不是stack，所以設(shè)置子組件的絕對(duì)定位無(wú)效，如圖7中所示，子組件黃色div相對(duì)于父組件紅色div未實(shí)現(xiàn)絕對(duì)定位的效果。

  1. <div 
  2.   style=" 
  3.     width: 200px; 
  4.     height: 200px; 
  5.     background-color: red; 
  6.     top: 50px; 
  7.     left: 50px;" 
  8. > 
  9.   <div 
  10.     style=" 
  11.       left: 50px; 
  12.       top: 50px; 
  13.       width: 100px; 
  14.       height: 100px; 
  15.       background-color: yellow;" 
  16.   > 
  17.   </div> 
  18. </div> 

 

相對(duì)定位：由于設(shè)備硬件ROM和RAM大小限制，當(dāng)前“框架”不支持W3C標(biāo)準(zhǔn)中的相對(duì)定位實(shí)現(xiàn)(position:relative)，只支持部分flex布局屬性，與W3C標(biāo)準(zhǔn)相比差異較大，具體差異見(jiàn)表1所示。

 

表1：“框架”下flex布局可支持屬性對(duì)比

在“框架”中實(shí)現(xiàn)flex布局，將需要flex布局的子組件用div容器包裹一下，并將div的display屬性設(shè)置為flex即可。如下圖所示，我們要實(shí)現(xiàn)三個(gè)div一行排列且居中顯示的flex布局。

在“框架”中我們可以這樣實(shí)現(xiàn)：添加一個(gè)div父組件，其子組件按行居中排列，分別設(shè)置justify-content和align-items兩個(gè)屬性值為center(div組件的主軸方向默認(rèn)值是row，如果想實(shí)現(xiàn)縱向排列需要設(shè)置flex-direction: column)即可實(shí)現(xiàn)圖8中的效果，詳細(xì)代碼如下所示：

  1. //index.hml 
  2.  
  3. <div class="container"> 
  4.   <div class="box box--red"></div> 
  5.   <div class="box box--green"></div> 
  6.   <div class="box box--blue"></div> 
  7. </div> 
  8.  
  9. //index.css 
  10.  
  11. .container { 
  12.   display: flex; 
  13.   justify-content: center; 
  14.   align-items: center; 
  15.   width: 100%; 
  16.   height: 100%; 
  17. } 
  18. .box { 
  19.   width: 30%; 
  20.   height: 60%; 
  21. } 
  22. .box--red { 
  23.   background-color: #f00; 
  24. } 
  25. .box--green { 
  26.   background-color: #0f0; 
  27. } 
  28. .box--blue { 
  29.   background-color: #00f; 
  30. } 

 W3C標(biāo)準(zhǔn)下的web開(kāi)發(fā)代碼如下所示，和“框架”下web開(kāi)發(fā)代碼實(shí)現(xiàn)基本一致。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  7.   <title>Flex Layout</title> 
  8.   <style> 
  9.     .container { 
  10.       align-items: center; 
  11.       background-color: #000; 
  12.       display: flex; 
  13.       height: 454px; 
  14.       justify-content: center; 
  15.       width: 454px; 
  16.     } 
  17.     .title { 
  18.       text-align: center; 
  19.     } 
  20.     .box { 
  21.       height: 60%; 
  22.       width: 30%; 
  23.     } 
  24.     .box--red { 
  25.       background-color: #f00; 
  26.     } 
  27.     .box--green { 
  28.       background-color: #0f0; 
  29.     } 
  30.     .box--blue { 
  31.       background-color: #00f; 
  32.     } 
  33. </style> 
  34. </head> 
  35. <body> 
  36.   <div class="container"> 
  37.     <div class="box box--red"></div> 
  38.     <div class="box box--green"></div> 
  39.     <div class="box box--blue"></div> 
  40.   </div> 
  41. </body> 
  42. </html> 

 文字顯示 

在前端開(kāi)發(fā)中，遵循W3C標(biāo)準(zhǔn)開(kāi)發(fā)者可以使用多種標(biāo)簽來(lái)實(shí)現(xiàn)文字顯示。如段落“<p> </p>”、標(biāo)題“<h1> </h1>”，甚至部分標(biāo)簽中直接放入文字也可以顯示，如“<div>標(biāo)題</div>”。 

但是基于“框架”開(kāi)發(fā)的應(yīng)用想要顯示文字，必須將文字內(nèi)容放在text組件中，或者設(shè)置input組件的value值，才可以正常顯示。

如下代碼所示，在div組件中直接添加文字“Hello world”，可以看到W3C標(biāo)準(zhǔn)下web開(kāi)發(fā)界面顯示出文字(如圖9所示)，“框架”下web開(kāi)發(fā)界面則無(wú)法顯示文字(如圖10所示)。

  1. <div style="width: 200px; height: 200px; background-color: red;"> 
  2.   Hello World! 
  3. </div> 

 

HarmonyOS輕量JS開(kāi)發(fā)框架與W3C標(biāo)準(zhǔn)差異分析-鴻蒙HarmonyOS技術(shù)社區(qū)

“框架”下正確使用方式是將要顯示的文字放在text組件中，或者設(shè)置input組件的value值才能正常顯示文字。另外，對(duì)于智能穿戴設(shè)備，只支持30和38兩種字號(hào)的字體，字體只支持HYQiHei-65S;如果對(duì)其他大小的字體有需求，暫時(shí)只能通過(guò)貼圖的方式去實(shí)現(xiàn)開(kāi)發(fā)者所需的效果。

text組件顯示文字的代碼如下：

  1. <text style="width: 200px; height: 200px; text-align: center;"> 
  2.   hello world 
  3. </text> 

 

input組件顯示文字的代碼如下，通過(guò)設(shè)置value屬性顯示文字：

  1. <input style="width: 200px; height: 50px; text-align: center;" value="hello world"> 
  2. </input> 

 

頁(yè)面滑動(dòng)和長(zhǎng)按事件

“框架”原生支持頁(yè)面滑動(dòng)(swipe)和長(zhǎng)按(longpress)事件，其中swipe支持“上下左右”四個(gè)方向的滑動(dòng)，開(kāi)發(fā)者通過(guò)事件返回值即可獲取滑動(dòng)方向。

如下代碼所示，我們添加一個(gè)div組件和一個(gè)text組件，text組件用來(lái)顯示屏幕上面的滑動(dòng)方向，事件回調(diào)函數(shù)swipeAction返回相應(yīng)的屬性值，根據(jù)回調(diào)函數(shù)返回值中的direction屬性，我們可以獲取滑動(dòng)方向，并在text組件中顯示。

  1. // index.hml 
  2. <div style=" 
  3.     width: 200px; 
  4.     height: 200px; 
  5.     align-items: center; 
  6.     justify-content: center; 
  7.     border-width: 2px; 
  8.     border-color: red;" 
  9.   onswipe="swipeAction" 
  10. > 
  11.   <text style="width: 100px; height: 50px; text-align: center;">{{title}}</text> 
  12. </div> 
  13. // index.js 
  14. export default { 
  15.   data: { 
  16.       title: '' 
  17.   }, 
  18.   swipeAction(e){ 
  19.       switch(e.direction) { 
  20.           case 'left': 
  21.               this.title = '左滑'; 
  22.               break; 
  23.           case 'right': 
  24.               this.title = '右滑'; 
  25.               break; 
  26.           case 'up': 
  27.               this.title = '上滑'; 
  28.               break; 
  29.           case 'down': 
  30.               this.title = '下滑'; 
  31.               break; 
  32.           default: 
  33.           break; 
  34.       } 
  35.   } 
  36. } 

 HarmonyOS轻量JS开发框架与W3C标准差异分析-鸿蒙HarmonyOS技术社区

除了上面關(guān)鍵差異點(diǎn)外，“框架”和W3C標(biāo)準(zhǔn)間還會(huì)存在一些組件名稱(和等)、屬性名稱等細(xì)節(jié)信息差異，建議各位開(kāi)發(fā)者在開(kāi)發(fā)過(guò)程中多多參考HarmonyOS官網(wǎng)開(kāi)發(fā)文檔。

● HarmonyOS官網(wǎng)開(kāi)發(fā)文檔

https://device.harmonyos.com/cn/docs/develop/apiref/js-framework-file-0000000000611396

HarmonyOS輕量JS應(yīng)用開(kāi)發(fā)框架還在不斷演進(jìn)和完善的過(guò)程中，本文主要描述的是當(dāng)前HarmonyOS輕量JS應(yīng)用開(kāi)發(fā)框架和主流web開(kāi)發(fā)的W3C標(biāo)準(zhǔn)關(guān)鍵差異點(diǎn)，希望可以幫助到各位開(kāi)發(fā)者上手HarmonyOS開(kāi)發(fā)。

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

 

責(zé)任編輯：jianghua 來(lái)源： 鴻蒙社區(qū)
鴻蒙HarmonyOS應(yīng)用
相關(guān)推薦

2012-04-06 13:18:58

IE6W3CDIV

2009-04-03 09:06:00

瀏覽器W3C標(biāo)準(zhǔn)

2011-09-07 17:28:15

2021-01-28 15:25:11

W3CIETFWebRTC

2016-07-19 17:20:32

W3C

2010-09-28 09:38:22

DOM模型

2010-05-23 10:11:01

Widget開(kāi)發(fā)

2021-01-28 21:40:25

webRTC音視頻Web

2012-12-19 09:33:20

HTML5

2024-12-26 01:27:41

2010-06-11 10:28:13

W3CW3C驗(yàn)證

2011-10-24 13:05:50

2012-04-13 09:55:20

CSSWEB

2009-07-06 00:13:04

HTML 5XHTML 2

2016-08-05 13:29:39

w3c流程css

2012-10-09 10:29:28

谷歌蘋(píng)果W3C

2011-10-24 14:16:13

XML加密算法XML加密

2013-08-25 21:12:12

HTML5W3C李安琪

2009-03-28 09:51:12

2021-12-01 18:22:16

程序W3C標(biāo)準(zhǔn)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)