新聞中心
想了解更多內(nèi)容,請訪問:

網(wǎng)站建設(shè)哪家好,找創(chuàng)新互聯(lián)!專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、成都微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了興海免費(fèi)建站歡迎大家使用!
和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos./#zz
1.DevEco Studio的最新版開發(fā)工具新增預(yù)覽和調(diào)試真的很好用.通過對鴻蒙的tabs和tab-bar組件,tab-content組件動態(tài)生成,通過fetch請求python flask服務(wù)構(gòu)建,效果圖如下:
2.python的代碼如下,提供了遠(yuǎn)程的web服務(wù),同時通過反向代理服務(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的請求,執(zhí)行execData方法")
- data1=("許金扉","李永毅","昌立昊")
- return jsonify(data1)
- @app.route("/querybyname",methods=["POST"])
- def queryByName():
- if request.method == 'POST':
- print("用戶發(fā)起querybyname的請求,執(zhí)行queryByName方法")
- #data2={"許金扉":"一個女學(xué)生","李永毅":"一個揚(yáng)州的男學(xué)生","昌立昊":"一個南京的男學(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("加載首頁菜單")
- 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.鴻蒙的遠(yuǎn)程請求python flask服務(wù),需要使用內(nèi)網(wǎng)穿透工具
4.同時啟動nginx服務(wù)和ngrok的內(nèi)網(wǎng)穿透
5.鴻蒙的業(yè)務(wù)邏輯層通過配置網(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ù),請稍后",
- 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.底部菜單欄通過三元運(yùn)算符,進(jìn)行切換,效果如下:
想了解更多內(nèi)容,請訪問:
和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos./#zz
當(dāng)前名稱:鴻蒙的JS開發(fā)部模式14:tabs組件通過Python遠(yuǎn)程服務(wù)構(gòu)建項目一
轉(zhuǎn)載來于:http://m.5511xx.com/article/dhsiiij.html


咨詢
建站咨詢
