HBuilder --- MUI , HTML5

時間 2019-11-08

標籤 hbuilder mui html5 html 欄目 HTML5 简体版

原文原文鏈接

一.建立簡單app應用

　　①javascript

②css

③鏈接手機html

④前端

二.MUI 各組件的運用

　　http://dev.dcloud.net.cn/mui/snippet/html5

三. HTML5plus

　　參考文檔: http://www.html5plus.org/java

    用來調用操做系統中的硬件驅動 + 系統調用

    硬件驅動 - 攝像頭 麥克風 閃光燈 揚聲器 GPS 藍牙 指紋 硬件

    系統調用 - 通信錄 相冊 文件管理 窗口管理 地圖 短信 本地緩存

    三方     - 三方登陸 三方支付 三方推送

　　1.自定義代碼塊

  mui.plusReady()    頁面加載完成以後執行的的命令   (mpl)

①web

②ajax

③mongodb

四.事件

　　1.手勢事件

①基本格式數據庫

②手勢事件配置

mui.init({
  gestureConfig:{
   tap: true, //默認爲true
   doubletap: true, //默認爲false
   longtap: true, //默認爲false
   swipe: true, //默認爲true
   drag: true, //默認爲true
   hold:false,//默認爲false，不監聽
   release:false//默認爲false，不監聽
  }
});

③分類

　　2.自定義事件

①自定義事件窗口

②執行命令的窗口

五.窗口管理

　　1.打開新頁面

//tap爲mui封裝的單擊事件，可參考手勢事件章節
document.getElementById('info').addEventListener('tap', function() {
  //打開關於頁面
  mui.openWindow({
    url: 'examples/info.html', 
    id:'info'
  });
});

打開新窗口
        mui.openWindow({
            url:"html.html",
            id:"html.html",
            extras:{name:1},   #傳值    
            styles:{}    #佈局
        })

　　2.頁面之間傳值 (webview)

①

②

　　3.建立子頁面

(自動加載到主頁面)

mui.init({
    subpages:[{
      url:your-subpage-url,//子頁面HTML地址，支持本地地址和網絡地址
      id:your-subpage-id,//子頁面標誌
      styles:{
        top:subpage-top-position,//子頁面頂部位置
        bottom:subpage-bottom-position,//子頁面底部位置
        width:subpage-width,//子頁面寬度，默認爲100%
        height:subpage-height,//子頁面高度，默認爲100%
        ......
      },
      extras:{}//額外擴展參數
    }]
  });

六.登陸頁面(先後端分離)

　　1.簡單版

　　①前端

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
</head>
<body>
    
    <form class="mui-input-group">
    <div class="mui-input-row">
        <label>用戶名</label>
    <input type="text" id="username" class="mui-input-clear" placeholder="請輸入用戶名">
    </div>
    <div class="mui-input-row">
        <label>密碼</label>
        <input type="password" id="pwd" class="mui-input-password" placeholder="請輸入密碼">
    </div>
    <div class="mui-button-row">
        <button type="button" class="mui-btn mui-btn-primary" id="login_btn">登陸</button>
        <button type="button" class="mui-btn mui-btn-danger" >註冊</button>
    </div>
</form>

    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    mui.init()

    document.getElementById('login_btn').addEventListener('tap',function () {
            var username = document.getElementById("username").value;
             var pwd = document.getElementById("pwd").value;
             mui.post('http://192.168.14.35:9527/login',{    # ajax的簡版
                     username:username,
                    password:pwd
                 },function(data){
                 console.log(JSON.stringify(data));
                mui.toast(data.msg);
                 },'json'
             );
    })
    </script>
</body>
</html>

　　②後端

from flask import Flask, request, jsonify

app = Flask(__name__)


@app.route("/login", methods=["POST", "GET"])
def login():
    user_info = request.form.to_dict()
    print(user_info)#{username:""""",password:""""""}


    if user_info.get("username") == "a":
        return jsonify({"code": 0, "msg": "登陸成功"})
    else:
        return jsonify({"code": 1, "msg": "登陸失敗"})

if __name__ == '__main__':
    app.run("0.0.0.0", 9527, debug=True)

　　2.自動登陸

　　①前端

　　a.主頁面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
</head>
<body>
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首頁</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">電話</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">郵件</span>
        </a>
        <a class="mui-tab-item" id="login_user">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">設置</span>
        </a>
    </nav>
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        
        var user_info = null;
        
        mui.init({
            subpages:[{
              url:'main.html',
              id:'main.html',
              styles:{
                top:"0px",
                bottom:"50px"
              },
              extras:{}
            }]
        });
        
        mui.plusReady(function () {
            console.log(window.localStorage.getItem("user_id"));            
            mui.post('http://192.168.14.200:9527/auto_login',{
                    "user_id":window.localStorage.getItem("user_id")
                },function(data){
                    console.log(JSON.stringify(data));
                    user_info = data.data;
                },'json' 
            );  
        })  

        
        document.getElementById('login_user').addEventListener('tap',function () {
            
            if (window.localStorage.getItem("user_id")) {
                mui.openWindow({
                      url:'user_info.html',
                      id:'user_info.html',
                      styles:{
                        top:"0px",
                         bottom:"50px"
                      },
                      extras:user_info
                    })
            } else{
                 mui.openWindow({
                   url:'login.html',
                   id:'login.html',
                   styles:{
                     top:"0px",
                     bottom:"50px"
                   },
                   extras:{}
                 })
            }

        })

    </script>
</body>
</html>

　　b.登陸頁面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">用戶登陸</h1>
    </header>
    <div class="mui-content">
        <form class="mui-input-group">
    <div class="mui-input-row">
        <label>用戶名</label>
        <input type="text" id="username" class="mui-input-clear" placeholder="請輸入用戶名">
    </div>
    <div class="mui-input-row">
        <label>密碼</label>
        <input type="password" id="pwd" class="mui-input-password" placeholder="請輸入密碼">
    </div>
    <div class="mui-button-row">
        <button type="button" class="mui-btn mui-btn-primary" id="login_btn" >登陸</button>
        <button type="button" class="mui-btn mui-btn-danger" >註冊</button>
    </div>
</form>
    </div>
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    mui.init();
    document.getElementById('login_btn').addEventListener('tap',function () {
         var username = document.getElementById("username").value;
         var pwd = document.getElementById("pwd").value;
        mui.post('http://192.168.14.200:9527/login',{
                username:username,
                password:pwd
            },function(data){
                console.log(JSON.stringify(data));
                mui.toast(data.msg);
                if (data.code==0) {
                    window.localStorage.setItem("user_id",data.data._id);
                    mui.openWindow({
                      url:'user_info.html',
                      id:'user_info.html',
                      styles:{
                        top:"0px",
                         bottom:"50px"
                      },
                      extras:data.data
                    })
                }
            },'json'
        );
    })
    
    </script>
</body>
</html>

　　c.另外一頁面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title" id="title">用戶詳情</h1>
    </header>
    <div class="mui-content">
        <button type="button" class="mui-btn mui-btn-red mui-btn-block" id="logout_btn">退出登陸</button>
    </div>
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    mui.init()
    mui.plusReady(function () {
        var Sdata = plus.webview.currentWebview();
        document.getElementById("title").innerText = 
        Sdata.username;
    });
    
    document.getElementById('logout_btn').addEventListener('tap',function () {
        window.localStorage.removeItem("user_id");
        mui.openWindow({
                   url:'login.html',
                   id:'login.html',
                   styles:{
                     top:"0px",
                     bottom:"50px"
                   },
                   extras:{}
                 })
    })
    </script>
</body>
</html>

　　②後端

　　a.主程序

from flask import Flask, request, jsonify
from setting import MONGODB,RET
from bson import ObjectId

app = Flask(__name__)


@app.route("/login", methods=["POST", "GET"])
def login():
    user_info = request.form.to_dict()
    print(user_info)#{username:""""",password:""""""}
    user = MONGODB.users.find_one(user_info)

    if user:
        user["_id"] = str(user["_id"])
        RET["code"] = 0
        RET["msg"] = "登陸成功"
        RET["data"] = user
    else:
        RET["code"] = 1
        RET["msg"] = "登陸失敗"
        RET["data"] = {}

    return jsonify(RET)


@app.route("/auto_login", methods=["POST", "GET"])
def auto_login():
    user_info = request.form.to_dict()
    print(user_info)#{username:""""",password:""""""}
    user = MONGODB.users.find_one({"_id":ObjectId(user_info.get("user_id"))})

    if user:
        user["_id"] = str(user["_id"])
        RET["code"] = 0
        RET["msg"] = "登陸成功"
        RET["data"] = user
    else:
        RET["code"] = 1
        RET["msg"] = "登陸失敗"
        RET["data"] = {}

    return jsonify(RET)

    # if user_info.get("username") == "a":
    #     return jsonify({"code": 0, "msg": "登陸成功"})
    # else:
    #     return jsonify({"code": 1, "msg": "登陸失敗"})
        # 返回標準的JSON格式字符串 - response - Content-Type:application/json

if __name__ == '__main__':
    app.run("0.0.0.0", 9527, debug=True)

　　b.mongodb數據庫

from pymongo import MongoClient

mc = MongoClient("127.0.0.1",27017)
MONGODB = mc["myHelloWorld"]

def insert_one(u,p):
    user_info = {"username":u,"password":p}
    res = MONGODB.users.insert_one(user_info)

    return res.inserted_id

# 協議
RET={
    "code":0,
    "msg":"",
    "data":{}
}


if __name__ == '__main__':
    print(insert_one("123", "456"))

　　③注:

    webview.currentWebview() 獲取當前頁面的WebviewObj - 獲取當前頁面被傳遞過來的參數
    webview.getWebviewById() 獲取ID對應的WebviewObj
    
    window.localStorage.setItem("key","value") 在本地緩存中存儲數據
    window.localStorage.getItem("key") 獲取本地緩存中的數據
    window.localStorage.removeItem("key") 刪除本地緩存中的數據

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。