一.创建简单app应用

　　①

②

③连接手机

④

二.MUI  各组件的运用

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

三. HTML5plus

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

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

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

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

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

　　1.自定义代码块

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

①

②

③

四.事件

　　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:},   #传值

            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": , "msg": "登录成功"})

    else:

        return jsonify({"code": , "msg": "登录失败"})

if __name__ == '__main__':

    app.run("0.0.0.0", , 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==) {

                    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"] =

        RET["msg"] = "登录成功"

        RET["data"] = user

    else:

        RET["code"] =

        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"] =

        RET["msg"] = "登录成功"

        RET["data"] = user

    else:

        RET["code"] =

        RET["msg"] = "登录失败"

        RET["data"] = {}

    return jsonify(RET)

    # if user_info.get("username") == "a":

    #     return jsonify({"code": , "msg": "登录成功"})

    # else:

    #     return jsonify({"code": , "msg": "登录失败"})

        # 返回标准的JSON格式字符串 - response - Content-Type:application/json

if __name__ == '__main__':

    app.run("0.0.0.0", , debug=True)

　　b.mongodb数据库

from pymongo import MongoClient

mc = MongoClient("127.0.0.1",)

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":,

    "msg":"",

    "data":{}

}

if __name__ == '__main__':

    print(insert_one("", ""))

　　③注:

    webview.currentWebview() 获取当前页面的WebviewObj - 获取当前页面被传递过来的参数

    webview.getWebviewById() 获取ID对应的WebviewObj

    window.localStorage.setItem("key","value") 在本地缓存中存储数据

    window.localStorage.getItem("key") 获取本地缓存中的数据

    window.localStorage.removeItem("key") 删除本地缓存中的数据

HBuilder --- MUI , HTML5的更多相关文章

  1. HBuilder/Mui开发ios使用上拉刷新导致滚动条无法使用的解决方法

    HBuilder/Mui开发的APP使用上拉刷新,当滚动到底部是会触发上拉刷新,加载更多数据.但是ios上确是一个坑,导致滚动条无法滚动. 解决方法 放弃Mui的上拉刷新,自己使用JS实现. var ...

  2. HBuilder mui登录和访问控制教程--转载

    HBuilder mui登录和访问控制教程 mui中提供了登录的模板页,但是对于登录后各个页面的访问控制,刷新等并没有官方的推荐方案.我在这里简单说一种初级的解决方案吧,肯定有不足指出,欢迎批评指正. ...

  3. Hbuilder开发HTML5 APP之WebView

    WebView就是原生的WebView,HBuilder在其上封装了一层,便于Javascript的调用,结构如图: 也可以实现这样的结构: 注意:WebView的使用属性HTML5+规范,所以必须等 ...

  4. HBuilder mui 手机app开发 Android手机app开发 ios手机app开发

    经过一段时间的学习,做公司项目,对mui框架有了更加深入完整的了解,其实刚开始接触HBuilder中的mui框架只是简单的了解,并没有深入的研究,后来由于工作的需求,不得不深入研究,并运用的项目中去. ...

  5. Hbuilder开发HTML5 APP之创建子页面

    折腾了好久,终于看明白怎么创建了: 1.创建个html5的mui页面,在其初始化方法中: mui.init({   subpages:[{    id:"list",   url: ...

  6. 跨平台移动APP开发进阶(三)hbuilder+mui mobile app 开发心酸路

    注:请点击此处进行充电! 1.问题描述:在实现图片轮转时,若将 <script type="text/javascript"> mui("#slider&qu ...

  7. 使用HBuilder+MUI+Flask后端服务器框架+Mongodb数据库开发手机APP

    1.开发准备HBuilder: 1.下载安装HBuilder2.创建APP项目 3.代码示例: <!doctype html> <html lang="en"&g ...

  8. Hbuilder MUI 下拉选择与时间选择器

    一. Hbuilder 下拉选择 <link rel="stylesheet" href="../../../assets/mui/css/mui.picker.m ...

  9. HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面

    创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...

随机推荐

  1. 对SDE中空要素类插入要素，完成后显示的图层特别小

    原因是缺少图层Extent或者Extent发生变化,插入完成后需要对图层的Extent进行更新. 调用IFeatureClassManage. UpdateExtent更新范围 参考链接: https ...

  2. ACC(Attribute Component Capability) 即特质，组件，能力

    这是一种测试计划的替代方法. ACC的指导原则如下: 1. 避免散漫的文字,推荐使用简明的列表.并不是所有的测试人员都想当小说家,也不具备将一个产品的目标或测试需求表达成散文的技能. 2.不必推销.测 ...

  3. 7、Flutter banner_view 轮播图的使用

    1.前言 实现轮播图,效果如下: 2.实现 将采用 banner_view 实现:资源库地址 2.1.yaml 引入依赖 在 pubspec.yaml 声明需要引用的库,执行命令 flutter pa ...

  4. vue cli 3.0创建项目

    .npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...

  5. nfs 共享目录

    依赖的包 yum -y install nfs-utils vim /etc/exports /data/test_nfs 10.125.37.12/16(rw,sync,no_root_squash ...

  6. 使用TCP通信文件上传

    客服端读取本地文件,吧文件上传到服务器,服务器在吧上传的文件保存到服务器硬盘上方法分析1:客户端使用本地字节输入流读取要上传的文件 2:客户端使用网络字节输出流,吧读取到的文件上传到服务器 3:服务器 ...

  7. Oracle 10046

    [10046 SQL]conn username/passwordalter session set tracefile_identifier = 'id_10046';alter session s ...

  8. std::bind 的使用说明

    转自: https://www.cnblogs.com/cmranger/p/4743926.html ///////////////////// std::bind bind是对C++98标准中函数 ...

  9. java生成二维码工具类

    package com.runtime.extend.utils.CodeCreate; import com.google.zxing.*;import com.google.zxing.commo ...

  10. Fiddler抓包【4】_重定向AutoResponder

    1. 文件及图片替换(Enable rules) 目的:允许从本地返回文件,代替服务器响应,而不用将文件发布到服务器[可用正式环境验证本地文件] 步骤一:抓页面http://ir.baidu.com/ ...