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

开发
文章由鸿蒙社区产出,想要了解更多内容请前往:51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com/#zz

[[382675]]

 想了解更多内容,请访问:

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

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

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


2.python的代码如下,提供了远程的web服务,同时通过反向代理服务器nginx提供图片等静态资源的服务:

  1. from  flask  import Flask 
  2. from flask  import jsonify 
  3. from  flask  import   request 
  4. import json 
  5.  
  6.  
  7. app=Flask(__name__) 
  8.  
  9.  
  10. @app.route("/data"
  11. def  execData(): 
  12.     print("用户发起data的请求,执行execData方法"
  13.  
  14.     data1=("许金扉","李永毅","昌立昊"
  15.  
  16.     return jsonify(data1) 
  17.  
  18. @app.route("/querybyname",methods=["POST"]) 
  19. def  queryByName(): 
  20.     if request.method == 'POST'
  21.        print("用户发起querybyname的请求,执行queryByName方法"
  22.        #data2={"许金扉":"一个女学生","李永毅":"一个扬州的男学生","昌立昊":"一个南京的男学生"
  23.        data2 = {"许金扉":{"text":"女学生","img":"common/customer.png"}, 
  24.                 "李永毅": {"text":"男学生","img":"common/emp.png"}, "昌立昊": {"text":"男学生","img":"common/emp.png"}} 
  25.        # name=request.form.get("cname"
  26.        # print(name
  27.  
  28.        info=request.get_data(as_text=True
  29.        print(info) 
  30.        print(type(info)) 
  31.        name=json.loads(info).get("cname"
  32.        info1=data2.get(name
  33.  
  34.        return jsonify(info1) 
  35.  
  36.  
  37. @app.route("/loadmenu",methods=["GET"]) 
  38. def  loadMenu(): 
  39.     if  request.method=="GET"
  40.         print("加载首页菜单"
  41.  
  42.         menudatas=[{"text":"首页","selectIcon":"http://lixin.free.idcfengye.com/images/ones.png"
  43.                     "icon":"http://lixin.free.idcfengye.com/images/oneu.png"}, 
  44.                    {"text":"分类","selectIcon":"http://lixin.free.idcfengye.com/images/cs.png"
  45.                     "icon":"http://lixin.free.idcfengye.com/images/cu.png"}, 
  46.                    {"text":"阅读","selectIcon":"http://lixin.free.idcfengye.com/images/rs.png"
  47.                     "icon":"http://lixin.free.idcfengye.com/images/ru.png"}, 
  48.                    {"text":"我的","selectIcon":"http://lixin.free.idcfengye.com/images/mys.png"
  49.                     "icon":"http://lixin.free.idcfengye.com/images/myu.png"}] 
  50.  
  51.  
  52.         return  jsonify(menudatas) 
  53.  
  54.  
  55.  
  56.  
  57.  
  58.  
  59. if  __name__=="__main__"
  60.     app.run(debug=True,port=8500) 

 3.鸿蒙的远程请求python flask服务,需要使用内网穿透工具


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



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


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

  1. import fetch from '@system.fetch'
  2. import prompt from '@system.prompt'
  3. export default { 
  4.     data: { 
  5.         title: 'World'
  6.         currentIndex:0, 
  7.         menudatas:[] 
  8.     }, 
  9.     onInit(){ 
  10.  
  11.  
  12.  
  13.         fetch.fetch({ 
  14.            url:"http://aeawqk.natappfree.cc/loadmenu"
  15.             method:"GET"
  16.             responseType:"json"
  17.             success:(resp)=> 
  18.             { 
  19.                 this.menudatas=JSON.parse(resp.data); 
  20.  
  21.  
  22.             } 
  23.  
  24.  
  25.         }); 
  26.     }, 
  27.     onShow(){ 
  28.         prompt.showToast({ 
  29.             message:"正在加载数据,请稍后"
  30.             duration:5000 
  31.  
  32.         }); 
  33.     }, 
  34.     changeview(e) 
  35.     { 
  36.         let  cIndex=e.index
  37.  
  38.         this.currentIndex=cIndex; 
  39.  
  40.  
  41.     } 

 6.视图层代码

  1. <div class="container"
  2.     <tabs  class="tabs" index="{{currentIndex}}"  onchange="changeview" vertical="false" > 
  3.         <tab-bar class="tab-bar"  mode="fixed"
  4.             <block  for="{{menudatas}}"
  5.                 <div  class="menuview"
  6.                     <image  class="cimg"  src="{{currentIndex==$idx?$item.selectIcon:$item.icon}}"></image> 
  7.                     <text  class="{{currentIndex==$idx?'stxt':'dtxt'}}">{{$item.text}}</text> 
  8.                 </div> 
  9.             </block> 
  10.         </tab-bar> 
  11.  
  12.         <tab-content class="tab-content"
  13.             <div  class="oneview"
  14.  
  15.             </div> 
  16.             <div  class="twoview"
  17.  
  18.             </div> 
  19.             <div  class="threeview"
  20.  
  21.             </div> 
  22.             <div  class="fourview"
  23.  
  24.             </div> 
  25.  
  26.         </tab-content> 
  27.  
  28.     </tabs> 
  29. </div> 

7.样式代码

  1. .container { 
  2.     display: flex; 
  3.     flex-direction: column
  4.     width: 100%; 
  5. .tabs{ 
  6.     width: 100%; 
  7. .tab-bar{ 
  8.     width: 100%; 
  9.     height: 12%; 
  10.     border-top: 10px  solid  silver; 
  11.     position: fixed; 
  12.     left: 0px; 
  13.     bottom: 0px; 
  14.     z-index:999; 
  15.     background-color: snow; 
  16.  
  17. .menuview{ 
  18.     width: 100%; 
  19.     height: 100%; 
  20. /**border: 5px  solid  black;**/ 
  21.     display: flex; 
  22.     flex-direction: column
  23.     align-items: center; 
  24.     padding: 15px; 
  25. .cimg{ 
  26.     width: 70px; 
  27.     height: 70px; 
  28. .tab-content{ 
  29.     width: 100%; 
  30.  
  31. .oneview{ 
  32.     width: 100%; 
  33.     height: 100%; 
  34.     background-color: palegreen; 
  35. .twoview{ 
  36.     width: 100%; 
  37.     height: 100%; 
  38.     background-color: palegoldenrod; 
  39. .threeview{ 
  40.     width: 100%; 
  41.     height: 100%; 
  42.     background-color: papayawhip; 
  43. .fourview{ 
  44.     width: 100%; 
  45.     height: 100%; 
  46.     background-color: powderblue; 
  47. .stxt{ 
  48.     color: black; 
  49. .dtxt{ 
  50.     color: silver; 

 8.底部菜单栏通过三元运算符,进行切换,效果如下:

 

想了解更多内容,请访问:

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

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

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2021-03-09 09:35:09

鸿蒙HarmonyOS应用开发

2021-03-02 14:34:48

鸿蒙HarmonyOS应用开发

2021-02-26 14:13:48

鸿蒙HarmonyOS应用开发

2021-02-20 12:34:53

鸿蒙HarmonyOS应用开发

2021-04-23 16:08:08

鸿蒙HarmonyOS应用

2017-07-17 15:50:17

微服务Docker架构

2021-01-22 17:23:32

鸿蒙HarmonyOS应用

2021-02-20 09:52:02

鸿蒙HarmonyOS应用开发

2021-08-24 14:57:27

鸿蒙HarmonyOS应用

2009-06-01 19:40:37

云计算 tivoli

2018-01-31 15:45:07

前端Vue.js组件

2022-10-25 15:12:24

自定义组件鸿蒙

2022-10-26 15:54:46

canvas组件鸿蒙

2020-11-11 11:56:05

HarmonyOS

2015-04-14 11:10:22

PaaSCloudFoundrBuildpack

2021-02-25 15:14:12

鸿蒙HarmonyOS应用开发

2020-12-24 12:01:16

鸿蒙HarmonyOS应用开发

2022-06-30 13:56:05

Rating鸿蒙

2021-02-23 09:52:42

鸿蒙HarmonyOS应用开发

2020-11-11 12:13:59

JS
点赞
收藏

51CTO技术栈公众号