第八十篇 Flask之MUI,HTML5plus开发移动端app
一、mui
官方文档：https://dev.dcloud.net.cn/mui/window/
1. mui适用场景说明：
为解决HTML5在低端Android机上的性能缺陷，mui引入了原生加速，其中最关键的就是webview控件，因此mui若要发挥其全部能力，需和5+ App配合适用，若脱离5+ App，mui功能会受限，主要涉及三个部分： webview窗口相关,第三方扩展插件(语音输入),Touch事件相关(pc端无此事件)
2. DOM使用规则
html初始样式
触发代码块:md
固定栏靠前
所谓的固定栏，也就是带有.mui-bar属性的节点，都是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）;这些元素使用时需遵循一个规则：放在.mui-content元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content之前，否则固定栏会遮住部分主内容；
一切内容都要包裹在mui-content中
除了固定栏之外，其它内容都要包裹在.mui-content中，否则就有可能被固定栏遮罩
始终为button按钮添加type属性
若button按钮没有type属性，浏览器默认按照type=submit逻辑处理，这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。
页面初始化：必须执行mui.init方法
mui在页面初始化时，初始化了很多参数配置，比如：按键监听、手势监听等，因此mui页面都必须调用一次mui.init()方法；
页面跳转：抛弃href跳转
建议使用mui.openWindow方法打开一个新的webview，mui会自动监听新页面的loaded事件，若加载完毕，再自动显示新页面；
打开新窗口并传递数据：
atag.onclick = function() {
mui.openWindow({
url: "player.html",
id: "player.html",
extras: data,
})
};
新窗口接收数据：
mui.init()
mui.plusReady(function() {
vdata = plus.webview.currentWebview();
console.log(JSON.stringify(vdata));
})
点击：忘记click
快速响应是mobile App实现的重中之重，研究表明，当延迟超过100毫秒，用户就能感受到界面的卡顿，然而手机浏览器的click点击存在300毫秒延迟（至于为何会延迟，及300毫秒的来龙去脉，请自行谷百），mui为了解决这个问题，封装了tap事件，因此在任何点击的时候，请忘记click及onclick操作，统统使用如下代码：
复制代码
代码块触发:dga
document.getElementById('pause').addEventListener('tap', function() {
player.pause();
})
加载子页面
mui.init({
subpages: [{
url: "main.html",
id: "main.html",
styles: {
top: "0px",
bottom: "50px"
}
}]
})
发送post请求
触发代码块:mpost
mui.post(win_serv + "/content_list", {
name: "tian"
}, function(data) {
// console.log(JSON.stringify(data));
for(var i = 0; i < data.length; i++) {
createtag(data[i]);
}
}, 'json');
fire事件
用于传递参数，发送端发送数据，接收端接收数据。
发送端:发送的页面，发送的函数,发送的参数
var index = plus.webview.getWebviewById("HBuilder");
mui.fire(index, "send_music", {
"to_user": "toy123",
"music": win_serv + "/send_audio/" + vdata.audio
})
接收端：
接收端：发送的函数,回调函数接收参数
document.addEventListener("send_music",function(data){
console.log(JSON.stringify(data.detail));
})
二、HTML5plus
1.简介
HTML5 Plus简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App可以通过扩展的JS API任意调用手机的原生能力，实现与原生App同样强大的功能和性能。
2.应用
Webview
Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。
currentWebview
获取当前窗口的WebviewObject对象
// 获取当前Webview窗口对象
var ws=plus.webview.currentWebview();
console.log( "当前Webview窗口："+ws.getURL() );
扫码
Barcode模块管理条码（一维码和二维码）扫描识别，支持常见的一维码（如EAN13码）及二维码（如QR码）。通过调用设备的摄像头对条码进行扫描识别，扫描到条码后进行解码并返回码数据内容及码类型。
Barcode模块可使得Web开发人员能快速方便调用设备的摄像头进行条码扫描识别，而不需要安装额外的扫描插件。规范建议条码识别引擎的支持规范定义的所有条码常量类型。
void plus.barcode.scan(path, successCB, errorCB, filters);
参数：
path: ( String ) 必选 要扫码的图片路径
必须是本地文件路径，如URLType类型（如以"_www"、"_doc"、"_documents"、"_downloads"开头的相对URL路径）或者系统绝对路径。
successCB: ( BarcodeSuccessCallback ) 必选 扫码识别成功回调函数
成功识别到条码（一维码或二维码）时触发，回调函数中返回码类型及码数据。
errorCB: ( BarcodeErrorCallback ) 可选 扫码识别失败回调函数
扫码识别中发生错误时触发，回调函数中返回错误码及错误描述信息。
filters: ( Array ) 可选 条码类型过滤器
条码类型常量数组，默认情况支持QR、EAN13、EAN8类型。 通过此参数可设置扫码识别支持的条码类型（注意：设置支持的条码类型越多，扫描识别速度可能将会降低）。
// 从图片中扫码识别
function scanImg() {
plus.barcode.scan( '_www/barcode.png', function(type,result) {
console.log("Scan success:("+type+")"+result);
}, function(e){
console.log("Scan failed: "+JSON.stringify(e));
} );
}
三、使用Hbuilder和手机模拟器软件
链接：https://pan.baidu.com/s/1WBOFv-5qpCqQsQXlDbULvQ
提取码：i8bs
Hbuilder配置和用法
https://www.runoob.com/w3cnote/hbuilder-intro.html
手机模拟器用法
可以下载夜神模拟器,在Hbuilder中:工具选项中修改端口，可以建立连接
四、基于Flask搭建登录验证界面
index.html
......
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init()
mui.ready(function () {
document.getElementById('settings').addEventListener('tap',function () {
mui.openWindow({
url:"settings.html",
id:"settings",
extras:{
name:"tian",
age:"26",
},
});
});
document.getElementById('login').addEventListener('tap',function () {
mui.openWindow({
url:"login.html",
id:"login",
});
})
});
</script>
login.html
......
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init()
mui.plusReady(function () {
document.getElementById('login').addEventListener('tap',function () {
username=document.getElementById("username").value;
pwd=document.getElementById("pwd").value;
//console.log(username);
mui.post('http://192.168.188.2:5000/login',{
"username":username,
"pwd":pwd
},function(data){
console.log(JSON.stringify(data));
// console.log(data.data.username)
if (data.hasOwnProperty("data")) {
mui.openWindow({
url:"user_info.html",
id:"user_info.html",
styles:{
top:"0px",
bottom:"50px"
},
extras:data
});
} else{
mui.toast(data.data)
}
},'json'
);
})
})
</script>
uer_info.html
......
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init()
mui.plusReady(function () {
var tdata = plus.webview.currentWebview();
document.getElementById("username").innerText = tdata.data.username;
document.getElementById("status").innerText = tdata.msg;
})
</script>
app.py
flask后端
# -*- coding: UTF-8 -*-
""""=================================================
@Project -> File ：Django -> 二叉树之有序列表
@IDE ：PyCharm
@Author ：爱跳水的温文尔雅的laughing
@Date ：2020/4/2 21:56
@Desc ：
=================================================="""
from flask import Flask,request,jsonify
app = Flask(__name__)
@app.route("/login",methods=["POST"]) #此处只需要接收手机端发送的消息，不需要返回页面，所以只用POST请求
def login():
username = request.form.get("username")
pwd = request.form.get("pwd")
ret_dict = {
"code": 0,
"msg": "登录成功",
"data": {
"user_id": 666,
"username": username,
"nickname": "xiaowangba"
}
}
if username=="tian" and pwd=="123":
return jsonify(ret_dict)
else:
return jsonify({"msg":"登录失败"})
if __name__ == '__main__':
app.run("0.0.0.0",5000,debug=True)