[[378172]]

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

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

https://harmonyos.51cto.com/#zz

本文的項目是通過遠(yuǎn)程調(diào)用聚合數(shù)據(jù)制作一個新聞頁面.首先要明確以下幾點:

1.頁面加載的時候 用戶點擊加載瀏覽什么服務(wù)器就加載什么,若一下全部加載出來不僅對頁面布局有負(fù)擔(dān),而且對服務(wù)器的負(fù)載也很大,造成服務(wù)器資源浪費(fèi).

2.思路過程(以制作首頁為例): onInit首先加載拿到首頁數(shù)據(jù);用戶點擊那個菜單加載那個菜單的數(shù)據(jù).

項目過程如下:

1.導(dǎo)入鴻蒙的網(wǎng)絡(luò)請求模塊fetch (上篇文章也講到) 這里需要重點注意的是:一定要到config.json中去看有沒有配置二級域名 不然看不到數(shù)據(jù).例如我這里是v.juhe.cn 下圖:

2.因為鴻蒙沒有可視化窗口 ,因此我們可以制作一個調(diào)試可視化窗口.調(diào)試完成后 再將其去掉 . 這個窗口的目的僅是讓自己通過可視化窗口清楚明了的看到是否成功拿到數(shù)據(jù),便于我們更好的跟蹤和調(diào)試.(點擊事件changemenu跳轉(zhuǎn)到j(luò)s中 將當(dāng)前點擊的菜單項賦值給currentIndex就做制作一個調(diào)試窗口)具體代碼及標(biāo)注以下會詳細(xì)給出. 展示想過如下圖:

模擬器中的字樣來自于聚合數(shù)據(jù)給定的樣式:

js業(yè)務(wù)邏輯層:

import fetch from '@system.fetch'; 
export default { 
    data: { 
        title:'', 
        currentIndex:0, 
        type:"", 
        bookdatas:[],  //申明一個數(shù)組 
       menus:["首頁","新聞","影視","音樂","天氣","生活","體育","電競","娛樂","美食"] 
    }, 
    onInit() { 
         
 
        fetch.fetch({ 
            url:"http://v.juhe.cn/toutiao/index?type=top&key=401162c3e198047abc4d73d6f95aabbe", 
            //v.juhe.cn一定要到config.json中去看有沒有配置二級域名  
            responseType:"json", 
            success:(resp)=>{ 
                let datas=JSON.parse(resp.data);   //轉(zhuǎn)換成json數(shù)據(jù)格式   
                this.title=datas.reason; 
                this.bookdatas=datas.result.data; 
               
 
            } 
 
        } 
) 
 
    }, 
    changemenu(event){ 
           let clickindex=event.index; 
           this.currentIndex=clickindex ; //當(dāng)前點擊的菜單項賦值給currentIndex 
           this.type=typeof clickindex; 
        if(clickindex==0) 
           { 
 
           } 
         else if(clickindex==1) 
          { 
 
          } 
    } 
} 

 頁面渲染:

<div class="container"> 
    <!--鴻蒙沒有橫向和垂直的滾頂視圖組件--> 
    <tabs class="tabs" index="{{currentIndex}}" vertical="false" onchange="changemenu"> 
        <tab-bar class="tab-bar" mode="scrollable"> 
            <block for="{{menus}}"> 
                <text>{{$item}}</text> 
            </block> 
        </tab-bar> 
        <tab-content class="tab-content" scrollable="true"> 
            <div class="oneview"> 
                <list class="listview">              //運(yùn)用列表展示數(shù)據(jù) 
                    <block for="{{bookdatas}}"> 
                        <list-item class="list-item"> 
                            <text>{{$item.title}}</text> 
                        </list-item> 
                    </block> 
                </list> 
            </div> 
            <div class="twoview"> 
                <text>two</text> 
            </div> 
        </tab-content> 
    </tabs> 
     <div class="info"> 
         <text class="txtview">{{currentIndex}} </text>  //返回當(dāng)前標(biāo) 
         <text class="txtview">{{type}} </text>   //返回當(dāng)前下表的數(shù)值類型 
         <text class="txtview">{{title}} </text>   //是否成功獲取數(shù)據(jù) 
     </div> 
</div> 

 css屬性設(shè)置:

.container{ 
    width: 100%; 
    height: 1200px; 
    background-color: palegreen ; 
    display: flex; 
    flex-direction: column; 
} 
.tabs{ 
    width: 100%; 
 
} 
.tab-content{ 
    width: 100%; 
    height: 80%; 
    background-color: green; 
} 
.oneview{ 
    width: 100%; 
    height: 100%; 
    background-color: white; 
} 
.twoview{ 
    width: 100%; 
    height: 100%; 
    background-color: skyblue; 
} 
.info{ 
    width: 100%; 
    height: 20%; 
    border:1px solid red; 
} 
.txtview{ 
    font-size: 50px; 
    color: red; 
} 
.listview{ 
    width: 100%; 
    height: 100%; 
} 
.list-item{ 
    width: 100%; 
    height: 20%; 
    border: 1px solid red; 
} 

 最后再強(qiáng)調(diào)一點 在調(diào)用聚合數(shù)據(jù)的時候代碼的格式一定要和聚合給定的格式相同,通俗的來講就是例如:我這里想獲取的是是result中的data中的title的數(shù)據(jù)(見下圖) 因此我們同樣要將獲取的數(shù)組放到申明的bookdatas數(shù)組中

 

 最終效果圖如下:

這樣項目的大體框架就出來了 其他頁面也是如此.后續(xù)會繼續(xù)優(yōu)化頁面的布局.

©著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請注明出處，否則將追究法律責(zé)任。

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

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

https://harmonyos.51cto.com/#zz