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

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

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、成都微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了兴海免费建站欢迎大家使用！

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

https://harmonyos./#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服务，需要使用内网穿透工具

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.视图层代码

 
 
 
 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
         
  
  
  
  
             
  
  
  
  
                 
  
  
  
  
                     
  
  
  
  
                    {{$item.text}}