[[382675]]

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

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

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

1.DevEco Studio的最新版開(kāi)發(fā)工具新增預(yù)覽和調(diào)試真的很好用.通過(guò)對(duì)鴻蒙的tabs和tab-bar組件,tab-content組件動(dòng)態(tài)生成，通過(guò)fetch請(qǐng)求python flask服務(wù)構(gòu)建，效果圖如下：

2.python的代碼如下，提供了遠(yuǎn)程的web服務(wù)，同時(shí)通過(guò)反向代理服務(wù)器nginx提供圖片等靜態(tài)資源的服務(wù)：

from  flask  import Flask 
from flask  import jsonify 
from  flask  import   request 
import json 
 
 
app=Flask(__name__) 
 
 
@app.route("/data") 
def  execData(): 
    print("用戶(hù)發(fā)起data的請(qǐng)求，執(zhí)行execData方法") 
 
    data1=("許金扉","李永毅","昌立昊") 
 
    return jsonify(data1) 
 
@app.route("/querybyname",methods=["POST"]) 
def  queryByName(): 
    if request.method == 'POST': 
       print("用戶(hù)發(fā)起querybyname的請(qǐng)求，執(zhí)行queryByName方法") 
       #data2={"許金扉":"一個(gè)女學(xué)生","李永毅":"一個(gè)揚(yáng)州的男學(xué)生","昌立昊":"一個(gè)南京的男學(xué)生"} 
       data2 = {"許金扉":{"text":"女學(xué)生","img":"common/customer.png"}, 
                "李永毅": {"text":"男學(xué)生","img":"common/emp.png"}, "昌立昊": {"text":"男學(xué)生","img":"common/emp.png"}} 
       # name=request.form.get("cname") 
       # print(name) 
 
       info=request.get_data(as_text=True) 
       print(info) 
       print(type(info)) 
       name=json.loads(info).get("cname") 
       info1=data2.get(name) 
 
       return jsonify(info1) 
 
 
@app.route("/loadmenu",methods=["GET"]) 
def  loadMenu(): 
    if  request.method=="GET": 
        print("加載首頁(yè)菜單") 
 
        menudatas=[{"text":"首頁(yè)","selectIcon":"http://lixin.free.idcfengye.com/images/ones.png", 
                    "icon":"http://lixin.free.idcfengye.com/images/oneu.png"}, 
                   {"text":"分類(lèi)","selectIcon":"http://lixin.free.idcfengye.com/images/cs.png", 
                    "icon":"http://lixin.free.idcfengye.com/images/cu.png"}, 
                   {"text":"閱讀","selectIcon":"http://lixin.free.idcfengye.com/images/rs.png", 
                    "icon":"http://lixin.free.idcfengye.com/images/ru.png"}, 
                   {"text":"我的","selectIcon":"http://lixin.free.idcfengye.com/images/mys.png", 
                    "icon":"http://lixin.free.idcfengye.com/images/myu.png"}] 
 
 
        return  jsonify(menudatas) 
 
 
 
 
 
 
if  __name__=="__main__": 
    app.run(debug=True,port=8500) 

 3.鴻蒙的遠(yuǎn)程請(qǐng)求python flask服務(wù)，需要使用內(nèi)網(wǎng)穿透工具

4.同時(shí)啟動(dòng)nginx服務(wù)和ngrok的內(nèi)網(wǎng)穿透

5.鴻蒙的業(yè)務(wù)邏輯層通過(guò)配置網(wǎng)絡(luò)權(quán)限和域名安全審核

5.鴻蒙js的業(yè)務(wù)邏輯層代碼

import fetch from '@system.fetch'; 
import prompt from '@system.prompt'; 
export default { 
    data: { 
        title: 'World', 
        currentIndex:0, 
        menudatas:[] 
    }, 
    onInit(){ 
 
 
 
        fetch.fetch({ 
           url:"http://aeawqk.natappfree.cc/loadmenu", 
            method:"GET", 
            responseType:"json", 
            success:(resp)=> 
            { 
                this.menudatas=JSON.parse(resp.data); 
 
 
            } 
 
 
        }); 
    }, 
    onShow(){ 
        prompt.showToast({ 
            message:"正在加載數(shù)據(jù)，請(qǐng)稍后", 
            duration:5000 
 
        }); 
    }, 
    changeview(e) 
    { 
        let  cIndex=e.index; 
 
        this.currentIndex=cIndex; 
 
 
    } 
} 

 6.視圖層代碼

<div class="container"> 
    <tabs  class="tabs" index="{{currentIndex}}"  onchange="changeview" vertical="false" > 
        <tab-bar class="tab-bar"  mode="fixed"> 
            <block  for="{{menudatas}}"> 
                <div  class="menuview"> 
                    <image  class="cimg"  src="{{currentIndex==$idx?$item.selectIcon:$item.icon}}"></image> 
                    <text  class="{{currentIndex==$idx?'stxt':'dtxt'}}">{{$item.text}}</text> 
                </div> 
            </block> 
        </tab-bar> 
 
        <tab-content class="tab-content"> 
            <div  class="oneview"> 
 
            </div> 
            <div  class="twoview"> 
 
            </div> 
            <div  class="threeview"> 
 
            </div> 
            <div  class="fourview"> 
 
            </div> 
 
        </tab-content> 
 
    </tabs> 
</div> 

7.樣式代碼

.container { 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
} 
.tabs{ 
    width: 100%; 
} 
.tab-bar{ 
    width: 100%; 
    height: 12%; 
    border-top: 10px  solid  silver; 
    position: fixed; 
    left: 0px; 
    bottom: 0px; 
    z-index:999; 
    background-color: snow; 
 
} 
.menuview{ 
    width: 100%; 
    height: 100%; 
/**border: 5px  solid  black;**/ 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 15px; 
} 
.cimg{ 
    width: 70px; 
    height: 70px; 
} 
.tab-content{ 
    width: 100%; 
 
} 
.oneview{ 
    width: 100%; 
    height: 100%; 
    background-color: palegreen; 
} 
.twoview{ 
    width: 100%; 
    height: 100%; 
    background-color: palegoldenrod; 
} 
.threeview{ 
    width: 100%; 
    height: 100%; 
    background-color: papayawhip; 
} 
.fourview{ 
    width: 100%; 
    height: 100%; 
    background-color: powderblue; 
} 
.stxt{ 
    color: black; 
} 
.dtxt{ 
    color: silver; 
} 

 8.底部菜單欄通過(guò)三元運(yùn)算符，進(jìn)行切換，效果如下:

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

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

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