鸿蒙的JS开发部模式14:tabs组件通过Python远程服务构建项目一

 想了解更多内容，鸿蒙请访问：

和华为官方合作共建的发部服务鸿蒙技术社区

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

1.DevEco Studio的最新版开发工具新增预览和调试真的很好用.通过对鸿蒙的tabs和tab-bar组件,tab-content组件动态生成，通过fetch请求python flask服务构建，模式效果图如下：

2.python的组件代码如下，提供了远程的通过web服务，亿华云计算同时通过反向代理服务器nginx提供图片等静态资源的远程服务：

from  flask  import Flask from flask  import jsonify from  flask  import   request import json app=Flask(__name__) @app.route("/data") def  execData():     print("用户发起data的请求，执行execData方法")     data1=("许金扉",构建"李永毅","昌立昊")     return jsonify(data1) @app.route("/querybyname",methods=["POST"]) def  queryByName():     if request.method == POST:        print("用户发起querybyname的请求，执行queryByName方法")        #data2={"许金扉":"一个女学生",项目"李永毅":"一个扬州的男学生","昌立昊":"一个南京的男学生"}        data2 = {"许金扉":{"text":"女学生","img":"common/customer.png"},                 "李永毅": {"text":"男学生","img":"common/emp.png"}, "昌立昊": {"text":"男学生","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("加载首页菜单")         menudatas=[{"text":"首页","selectIcon":"http://lixin.free.idcfengye.com/images/ones.png",                     "icon":"http://lixin.free.idcfengye.com/images/oneu.png"},                    {"text":"分类","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.鸿蒙的远程请求python flask服务，WordPress模板需要使用内网穿透工具

4.同时启动nginx服务和ngrok的鸿蒙内网穿透

5.鸿蒙的业务逻辑层通过配置网络权限和域名安全审核

5.鸿蒙js的业务逻辑层代码

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:"正在加载数据，请稍后",发部服务             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.底部菜单栏通过三元运算符，进行切换，模式效果如下:

 

想了解更多内容，组件请访问：

和华为官方合作共建的通过鸿蒙技术社区

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