您现在的位置是：亿华云 > IT科技类资讯

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

亿华云2025-10-08 23:27:52【IT科技类资讯】0人已围观

简介想了解更多内容，请访问：和华为官方合作共建的鸿蒙技术社区https://harmonyos.51cto.com/#zz1.DevEco Studio的最新版开发工具新增预览和调试真的很好用.通过对鸿蒙

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

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

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服务，服务器租用需要使用内网穿透工具

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

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.底部菜单栏通过三元运算符，进行切换，模式效果如下: