新聞中心
想了解更多內(nèi)容,請(qǐng)?jiān)L問(wèn):

網(wǎng)站建設(shè)哪家好,找創(chuàng)新互聯(lián)!專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、成都微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了興海免費(fèi)建站歡迎大家使用!
和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos./#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("用戶發(fā)起data的請(qǐng)求,執(zhí)行execData方法")
- data1=("許金扉","李永毅","昌立昊")
- return jsonify(data1)
- @app.route("/querybyname",methods=["POST"])
- def queryByName():
- if request.method == 'POST':
- print("用戶發(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":"分類","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.視圖層代碼
{{$item.text}}
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):
和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos./#zz
新聞標(biāo)題:鴻蒙的JS開(kāi)發(fā)部模式14:tabs組件通過(guò)Python遠(yuǎn)程服務(wù)構(gòu)建項(xiàng)目一
網(wǎng)頁(yè)URL:http://www.5511xx.com/article/dhsiiij.html


咨詢
建站咨詢
