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

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
基于JS通用組件的鴻蒙購物應(yīng)用開發(fā)

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

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比青原網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式青原網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋青原地區(qū)。費用合理售后完善，10多年實體公司更值得信賴。

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

https://harmonyos.

1. 介紹

HarmonyOS支持應(yīng)用以Ability為單位進行部署，Ability可以分為FA(Feature Ability)和PA(Particle Ability)兩種類型。

本篇Codelab將會使用UI組件開發(fā)出一個HarmonyOS購物應(yīng)用。

HarmonyOS為開發(fā)者提供了多種組件，每個組件通過對數(shù)據(jù)和方法的簡單封裝，實現(xiàn)獨立的可視、可交互功能單元。開發(fā)者只需要關(guān)注實現(xiàn)邏輯，減少開發(fā)量。

最終效果預覽

我們最終會構(gòu)建一個簡易的購物應(yīng)用。應(yīng)用包含兩級頁面，分別是主頁(商品瀏覽頁簽、購物車頁簽、我的頁簽)和商品詳情頁面，兩個頁面都展示了豐富的HarmonyOS UI組件，包括：自定義彈窗容器(dialog)，列表(list)，滑動容器(swiper)，頁簽組件(tabs)，按鈕組件(button)，圖表組件(chart)，分隔器組件(divider)，圖片組件(image)，交互式組件(input)，跑馬燈組件(marquee)，菜單組件(menu)，滑動選擇器組件(picker)，進度條組件(progress)，評分條組件(rating)，搜索框組件(search)。

商品瀏覽頁面和商品詳情頁面如下圖：

2. 搭建HarmonyOS環(huán)境

● 安裝DevEco Studio和Node.js，詳情請參考下載和安裝軟件。

● 設(shè)置DevEco Studio開發(fā)環(huán)境，DevEco Studio開發(fā)環(huán)境需要依賴于網(wǎng)絡(luò)環(huán)境，需要連接上網(wǎng)絡(luò)才能確保工具的正常使用，可以根據(jù)如下兩種情況來配置開發(fā)環(huán)境：

● 如果可以直接訪問Internet，只需進行下載HarmonyOS SDK操作。

● 如果網(wǎng)絡(luò)不能直接訪問Internet，需要通過代理服務(wù)器才可以訪問，請參考配置開發(fā)環(huán)境。

  • 說明
  • 如需要在手機中運行程序，則需要提前申請證書，如使用模擬器可忽略。

● 準備密鑰和證書請求文件

● 申請調(diào)試證書

你可以通過如下兩種方式完成本篇Codelab：

● 開啟開發(fā)者模式的HarmonyOS真機。

● DevEco Studio中的手機模擬器(模擬器暫不支持分布式調(diào)試)。

3. 代碼結(jié)構(gòu)解讀

本篇Codelab只對核心代碼進行講解，對于完整代碼，我們會在7 參考中提供下載方式，接下來我們會用一小節(jié)來講解整個工程的代碼結(jié)構(gòu)：

● entry/src/main/js/default/common 文件夾存放一些公共的資源，比如圖片。

● entry/src/main/js/default/pages 文件夾存放 HarmonyOS JS的頁面，包含css、hml、js三類文件。

● entry/src/main/config.json：配置文件。

4. 頁面詳細解析

接下來，我們就可以編寫css、hml、js代碼了。

搜索框組件(search)：用于提供用戶搜索內(nèi)容的輸入?yún)^(qū)域，圖片示例和代碼如下：

頁面展示：

 
 
 
 
    
  
  
  
  
  1.  
    2.

tab頁簽容器(tabs)，圖片示例和代碼如下：

的子組件(tab-bar)：用來展示tab的標簽區(qū)。

的子組件(tab-content)：用來展示tab的內(nèi)容區(qū)。

注：用戶可通過左右滑動或點擊不同tab標簽區(qū)，來顯示不同tab標簽區(qū)的內(nèi)容區(qū)

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.       
    3. 
  
  
  
  
  3.         {{ item }}  
    4. 
  
  
  
  
  4.       
    5. 
  
  
  
  
  5.       
    6. 
  
  
  
  
  6.       
    7. 
  
  
  
  
  7.           
    8. 
  
  
  
  
  8.           
    9. 
  
  
  
  
  9.               
    10. 
  
  
  
  
  10.                   
    11. 
  
  
  
  
  11.                       
    12. 
  
  
  
  
  12.                         {{$item.title}}  
    13. 
  
  
  
  
  13.                         {{$item.content}}  
    14. 
  
  
  
  
  14.                           
    15. 
  
  
  
  
  15.                             ￥  
    16. 
  
  
  
  
  16.                             {{$item.price}}  
    17. 
  
  
  
  
  17.                           
    18. 
  
  
  
  
  18.                     
  
  •                       
  •                           
  •                     
    •   
  •                 
    •   
  •               
  •           
  •         
    •   
  •       
  •  

    • 不同標簽頁圖標切換(點擊應(yīng)用的正下面的不同標簽，頁面會隨之切換，被選中的頁面圖片變紅)，圖片示例和代碼如下：

     
 
 
 
      
  
  
  
  
    1.   
      2. 
  
  
  
  
    2.       
      3. 
  
  
  
  
    3.       
      4. 
  
  
  
  
    4.       
      5.
     

    購物車頁面：用戶可以把選中的商品加入購物車，然后可以選中想要拍下的商品，進行結(jié)算，圖片示例和代碼如下：

     
 
 
 
      
  
  
  
  
    1.   
      2. 
  
  
  
  
    2.       
      3. 
  
  
  
  
    3.           
      4. 
  
  
  
  
    4.               
      5. 
  
  
  
  
    5.               
      6. 
  
  
  
  
    6.               
      7. 
  
  
  
  
    7.                 {{$item.title}}  
      8. 
  
  
  
  
    8.               
      9. 
  
  
  
  
    9.             {{$item.price}} 
      10. 
  
  
  
  
    10.             元  
      11. 
  
  
  
  
    11.           
      12. 
  
  
  
  
    12.             
      
  •         
    •   
  •           
  •     
    •   
  •  

    我的頁面布局，圖片示例和代碼如下：

     
 
 
 
      
  
  
  
  
    1.   
      2. 
  
  
  
  
    2.     {{pageWord.myDeals}}  
      3. 
  
  
  
  
    3.       
      4. 
  
  
  
  
    4.           
      5. 
  
  
  
  
    5.               
      6. 
  
  
  
  
    6.             {{$item.title}}{{$item.num}}  
      7. 
  
  
  
  
    7.         
      
  •     
    •   
  •  

    頁面路由跳轉(zhuǎn)：用戶點擊商品瀏覽頁面的任意商品，頁面會跳轉(zhuǎn)到商品詳情頁面，圖片示例和代碼如下：

     
 
 
 
      
  
  
  
  
    1. detailPage() {  
      2. 
  
  
  
  
    2.     router.push({  
      3. 
  
  
  
  
    3.         uri: "pages/shoppingDetailsPage/shoppingDetailsPage"  
      4. 
  
  
  
  
    4.     })  
      5. 
  
  
  
  
    5. }, 
      6.

    滑動容器（swiper）：用戶可以在swiper組件上進行滑動 左右切換圖片，或者3s自動滑動一次，圖片示例和代碼如下：

     
 
 
 
      
  
  
  
  
    1.   
      2. 
  
  
  
  
    2.       
      3. 
  
  
  
  
    3.           
      4. 
  
  
  
  
    4.       
      5. 
  
  
  
  
    5.  
      6.

    跑馬燈組件（marquee）：展示一段單行滾動的文字，圖片示例和代碼如下：

     
 
 
 
      
  
  
  
  
    1.           
      2. 
  
  
  
  
    2.     {{pageInfo.marqueeCustomData}}  
      3. 
  
  
  
  
    3.  
      4.

    對樣式進行動態(tài)雙向綁定，可以修改"次日達"字體的顏色 ，圖片示例和代碼如下：

     
 
 
 
      
  
  
  
  
    1. {{pageInfo.nextDayReach}}  
      2. 
  
  
  
  
    2.   
      3. 
  
  
  
  
    3. export default {  
      4. 
  
  
  
  
    4.     data: {  
      5. 
  
  
  
  
    5.         textColor: '#FF3536',  
      6. 
  
  
  
  
    6.     }  
      7. 
  
  
  
  
    7. } 
      8.

    省市級聯(lián)選擇器和日期選擇器以及dialog自定義彈窗容器的實現(xiàn)，圖片示例和代碼如下：

    點擊選擇會彈出Dialog，頁面會有時間選擇器和省市級聯(lián)選擇器。

    用戶在彈出的時間選擇器上選擇日期，點擊確定，頁面上的數(shù)據(jù)也會同時改變。省市級聯(lián)選擇器，同理。

     
 
 
 
      
  
  
  
  
    1.   
      2. 
  
  
  
  
    2.     
        
      3. 
  
  
  
  
    3.         {{pageInfo.selectRewardTime}}  
      4. 
  
  
  
  
    4.           
      5. 
  
  
  
  
    5.               
      6. 
  
  
  
  
    6.           
      7. 
  
  
  
  
    7.       
      8. 
  
  
  
  
    8.     
        
      9. 
  
  
  
  
    9.         {{pageInfo.selectRewardCity}}  
      10. 
  
  
  
  
    10.           
      11. 
  
  
  
  
    11.               
      12. 
  
  
  
  
    12.           
      13. 
  
  
  
  
    13.       
      14. 
  
  
  
  
    14.  
      15.

    評分彈框(rating)，圖片示例和代碼如下：

    點擊評分，會彈出帶有評分彈框的dialog彈窗容器。

     
 
 
 
      
  
  
  
  
    1.   
      2. 
  
  
  
  
    2.       
      3. 
  
  
  
  
    3.           
      4. 
  
  
  
  
    4.             {{pageInfo.softwareScore}}  
      5. 
  
  
  
  
    5.               
      6. 
  
  
  
  
    6.             {{pageInfo.ratingReason}}  
      7. 
  
  
  
  
    7.               
      8. 
  
  
  
  
    8.               
      9. 
  
  
  
  
    9.                 {{pageInfo.confirm}}  
      10. 
  
  
  
  
    10.                   
      11. 
  
  
  
  
    11.                 {{pageInfo.cancel}}  
      12. 
  
  
  
  
    12.               
      13. 
  
  
  
  
    13.           
      14. 
  
  
  
  
    14.       
      15. 
  
  
  
  
    15.  
      16.

    瀏覽量頁面：chart組件（曲線圖可以實時動態(tài)更新數(shù)據(jù)），圖片示例和代碼如下：

     
 
 
 
      
  
  
  
  
    1.   
      2. 
  
  
  
  
    2.       
      3. 
  
  
  
  
    3.       
      4. 
  
  
  
  
    4.  
      5.

    點擊立即搶購會彈出一個含有進度條（progress）的彈框 ，圖片示例和代碼如下：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2. 1. 
      3.

    5. 回顧和總結(jié)

    本篇Codelab我們介紹了應(yīng)用的主頁面和詳情頁，兩個頁面都展示了豐富的HarmonyOS UI組件如下圖。

    另外，我們還把常用的一些組件運用到到該應(yīng)用里面，比如：

    1.常用的chart圖表組件：用曲線動態(tài)展示不同時間段的瀏覽量。

    2.rating評分條組件：運用到給軟件/該商品打分評價。

    3.選擇器：省市級類選擇器、時間選擇器。

    圖片示例如下：

    6. 恭喜您

    目前你已經(jīng)成功完成了Codelab并且學到了：

    ● 如何使用HarmonyOS UI常用組件。

    ● 如何實現(xiàn)各頁面之間的跳轉(zhuǎn)。

    7. 參考

    gitee源碼

    github源碼

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

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

    https://harmonyos.


    文章標題：基于JS通用組件的鴻蒙購物應(yīng)用開發(fā)
    網(wǎng)址分享：http://m.5511xx.com/article/cohdigp.html

    其他資訊