HBuilder --- MUI , HTML5
一.创建简单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的更多相关文章
- HBuilder/Mui开发ios使用上拉刷新导致滚动条无法使用的解决方法
HBuilder/Mui开发的APP使用上拉刷新,当滚动到底部是会触发上拉刷新,加载更多数据.但是ios上确是一个坑,导致滚动条无法滚动. 解决方法 放弃Mui的上拉刷新,自己使用JS实现. var ...
- HBuilder mui登录和访问控制教程--转载
HBuilder mui登录和访问控制教程 mui中提供了登录的模板页,但是对于登录后各个页面的访问控制,刷新等并没有官方的推荐方案.我在这里简单说一种初级的解决方案吧,肯定有不足指出,欢迎批评指正. ...
- Hbuilder开发HTML5 APP之WebView
WebView就是原生的WebView,HBuilder在其上封装了一层,便于Javascript的调用,结构如图: 也可以实现这样的结构: 注意:WebView的使用属性HTML5+规范,所以必须等 ...
- HBuilder mui 手机app开发 Android手机app开发 ios手机app开发
经过一段时间的学习,做公司项目,对mui框架有了更加深入完整的了解,其实刚开始接触HBuilder中的mui框架只是简单的了解,并没有深入的研究,后来由于工作的需求,不得不深入研究,并运用的项目中去. ...
- Hbuilder开发HTML5 APP之创建子页面
折腾了好久,终于看明白怎么创建了: 1.创建个html5的mui页面,在其初始化方法中: mui.init({ subpages:[{ id:"list", url: ...
- 跨平台移动APP开发进阶(三)hbuilder+mui mobile app 开发心酸路
注:请点击此处进行充电! 1.问题描述:在实现图片轮转时,若将 <script type="text/javascript"> mui("#slider&qu ...
- 使用HBuilder+MUI+Flask后端服务器框架+Mongodb数据库开发手机APP
1.开发准备HBuilder: 1.下载安装HBuilder2.创建APP项目 3.代码示例: <!doctype html> <html lang="en"&g ...
- Hbuilder MUI 下拉选择与时间选择器
一. Hbuilder 下拉选择 <link rel="stylesheet" href="../../../assets/mui/css/mui.picker.m ...
- HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面
创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...
随机推荐
- es6的对象新增的方法
Object.is 可以看成是=== 的加强版, 其修正了 === 的 NaN 不等于自身, 以及 +0 等于 -0 另外说下, == 会自动转型, 但是 Object.is 也是如果类型不一致也是不 ...
- 队列->队列的表示和实现
文字描述 队列是和栈相反,队列是一种先进先出(first in first out,缩写FIFO)的线性表,它只允许在表的一端进行插入,而在另一端进行删除.和生活中的排队相似,最早进入队列的元素最早离 ...
- weblogic8控制台禁止（允许）访问配置方法
由于现网上对外网开放,而weblogic控制台的信息和管理比较敏感,如果weblogic控制台被破解账户和密码登录, 面临的风险将是非常的大,所以一般现网部署时,要禁用掉weblogic控制台的访问. ...
- linux 几种服务类型
采集来自于 https://blog.csdn.net/hguisu/article/details/7453390 https://blog.csdn.net/limo120621/article/ ...
- c++简单程序设计 实验一
实验内容: 2-28 实现一个简单的菜单程序,运行时显示“Menu:A(dd) D(elete) S(ort) Q(uit),Selete one:”提示用户输入.A表示增加,D表示删除, S表示排序 ...
- 关于Linux与Windows的在服务器的一些区别
我们平时说学习运维要依托于Linux系统,因为在服务器领域Linux基本取得了市场,那么Linux在服务器领域与Windows相比有哪些优势呢?我们来看下:我们选择服务器主要是成本,安全稳定,这两大方 ...
- IDE中使用System.getProperty()获取一些属性
使用环境:一般在项目首页或者项目后端配置中会使用到一些属性获取: package com.liuyc.study.utils; /** * 获取当前操作系统中或者当前环境中的一些默认配置 * @aut ...
- jpa 使用笔记
1,嵌套类查询 List<Person> findByAddress_ZipCode(ZipCode zipCode); ZipCode是Address属性的内部属性. 2,jpa in ...
- vue知识总结
vue: 渐进式JavaScript 框架 Vue项目构建 npm install -g vue vue init webpack-simple my-project cd my-project np ...
- JAVA 11初体验
JAVA 11初体验 随着JAVA没半年发布一次新版本,前几天JAVA 11隆重登场.在JAVA 11中,增加了一些新的特性和api, 同时也删除了一些特性和api,还有一些性能和垃圾回收的改进. 作 ...