第八十篇 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之MUI,HTML5plus开发移动端app_第1张图片

四、基于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)

你可能感兴趣的:(flask)