日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
HarmonyOS輕量JS開發(fā)框架與W3C標(biāo)準(zhǔn)差異分析

想了解更多內(nèi)容，請訪問：

創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、敦化網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、商城網(wǎng)站定制開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為敦化等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

https://harmonyos.

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

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

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

width和height屬性

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

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

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

以一段簡單的代碼為例：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.     
 
  •  

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

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

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

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.     
     
  •  

     

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

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.   Hello World! 
      3. 
  
  
  
  
    3.  
      4.

      

    絕對定位和相對定位

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

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.    
      3. 
  
  
  
  
    3.      
      4. 
  
  
  
  
    4.       h2.left { 
      5. 
  
  
  
  
    5.         position: relative; 
      6. 
  
  
  
  
    6.         left: 30px; 
      7. 
  
  
  
  
    7.         top: 30px; 
      8. 
  
  
  
  
    8.       } 
      9. 
  
  
  
  
    9.       h2.right { 
      10. 
  
  
  
  
    10.         position: absolute; 
      11. 
  
  
  
  
    11.         left: 90px; 
      12. 
  
  
  
  
    12.         top: 160px; 
      13. 
  
  
  
  
    13.       } 
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15.    
      16. 
  
  
  
  
    16.    
      17. 
  
  
  
  
    17.     
      這是位于正常位置的標(biāo)題
       
      18. 
  
  
  
  
    18.     這個標(biāo)題相對于其正常位置向右向下移動 
      19. 
  
  
  
  
    19.     這個標(biāo)題相對于其頁面左上角位置向右向下移動 
      20. 
  
  
  
  
    20.    
      21. 
  
  
  
  
    21.  
      22.

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

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

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.   
  
  
  
  
    3.     style=" 
      4. 
  
  
  
  
    4.       left: 50px; 
      5. 
  
  
  
  
    5.       top: 50px; 
      6. 
  
  
  
  
    6.       width: 100px; 
      7. 
  
  
  
  
    7.       height: 100px; 
      8. 
  
  
  
  
    8.       background-color: yellow;" 
      9. 
  
  
  
  
    9.   > 
      10. 
  
  
  
  
    10.   
     
  •  

    •  

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

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

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

     

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

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

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

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

     
 
 
 
      
  
  
  
  
    1. //index.hml 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4.   
     
  •   
    •  
  •   
    •  
  •  
  •  
  • //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標(biāo)準(zhǔn)下的web開發(fā)代碼如下所示，和“框架”下web開發(fā)代碼實現(xiàn)基本一致。

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4.    
      5. 
  
  
  
  
    5.    
      6. 
  
  
  
  
    6.    
      7. 
  
  
  
  
    7.   Flex Layout 
      8. 
  
  
  
  
    8.    
      9. 
  
  
  
  
    9.  
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.    
      12. 
  
  
  
  
    12.     
     
  •      
  •      
  •    
  •  
  •  

    •  文字顯示 

    在前端開發(fā)中，遵循W3C標(biāo)準(zhǔn)開發(fā)者可以使用多種標(biāo)簽來實現(xiàn)文字顯示。如段落“

    ”、標(biāo)題“

    ”，甚至部分標(biāo)簽中直接放入文字也可以顯示，如“
    標(biāo)題
    ”。 

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

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

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.   Hello World! 
      3. 
  
  
  
  
    3.  
      4.

     

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

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

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.   hello world 
      3. 
  
  
  
  
    3.  
      4.

     

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

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3.

     

    頁面滑動和長按事件

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

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

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

     

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

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

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

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

    想了解更多內(nèi)容，請訪問：

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

    https://harmonyos.


    名稱欄目：HarmonyOS輕量JS開發(fā)框架與W3C標(biāo)準(zhǔn)差異分析
    網(wǎng)頁路徑：http://m.5511xx.com/article/dhdhigi.html

    其他資訊