HBuilder --- MUI , HTML5

2024-03-02 15:08:28

一.创建简单app应用
二.MUI 各组件的运用
三. HTML5plus
四.事件
五.窗口管理
六.登录页面(前后端分离)

一.创建简单app应用

第一步

第二步

第三步链接手机

第四步

二.MUI 各组件的运用

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

三. HTML5plus

　　参考文档: http://www.html5plus.org/

 用来调用操作系统中的硬件驱动 + 系统调用

 硬件驱动 - 摄像头 麦克风 闪光灯 扬声器 GPS 蓝牙 指纹 硬件

 系统调用 - 通讯录 相册 文件管理 窗口管理 地图 短信 本地缓存

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

　　1.自定义代码块

mui.plusReady()    页面加载完成之后执行的的命令   (mpl)

①

②

③

四.事件

　　1.手势事件

1.基本格式

2.手势事件配置

mui.init({
  gestureConfig:{
   tap: true, //默认为true
   doubletap: true, //默认为false
   longtap: true, //默认为false
   swipe: true, //默认为true
   drag: true, //默认为true
   hold:false,//默认为false，不监听
   release:false//默认为false，不监听
  }
});

3.分类

　　2.自定义事件

1.自定义事件窗口

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.简单版

　　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>

　　2.后端

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.自动登录

　　1. 前端

　　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>

2.后端

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"))

3.注:

    webview.currentWebview() 获取当前页面的WebviewObj - 获取当前页面被传递过来的参数
    webview.getWebviewById() 获取ID对应的WebviewObj
    
    window.localStorage.setItem("key","value") 在本地缓存中存储数据
    window.localStorage.getItem("key") 获取本地缓存中的数据
    window.localStorage.removeItem("key") 删除本地缓存中的数据

码农公寓

一.创建简单app应用

第一步

第二步

第三步链接手机

第四步

二.MUI 各组件的运用

三. HTML5plus

1.自定义代码块

四.事件

1.手势事件

2.自定义事件

五.窗口管理

1.打开新页面

2.页面之间传值 (webview)

3.创建子页面

六.登录页面(前后端分离)

1.简单版

2.自动登录

相关文章

　　1.自定义代码块

　　1.手势事件

　　2.自定义事件

　　1.打开新页面

　2.页面之间传值 (webview)

　　3.创建子页面

　　1.简单版