能夠打開攝像頭
能夠打開麥克風 - 打開揚聲器
能夠打開操做系統的相冊,通信錄,短信彩信
能夠打開陀螺儀,指南針javascript
能夠從這裏看到所可以擁有的功能css
Mui 前端佈局框架 = 排版用 (至關於bootstrap)
HTML5PLUS 硬件驅動接口,系統調用接口 (有jQuery功能)html
新建APP前端
修改端口html5
啓動java
至關於bootstrap,但mui又封裝了jQuery web
經常使用代碼塊ajax
mdo 頁面結構mongodb
mhe 標題欄數據庫
mbo 頁面主體
mta 底部欄
msl 圖片輪播
mgr 九宮格
mli 列表
使用代碼塊快速搭建
index.html
<body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">標題</h1> </header> <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='setting'> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">設置</span> </a> </nav> </body> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init() document.getElementById('setting').addEventListener('tap',function () { //監聽點擊事件 mui.toast('你點擊我了') ; //自動消失的提示框 var s = {'user':'liu'}; console.log(JSON.stringify(s)); mui.openWindow({ //打開新窗口 'url':'setting.html', //跳轉的頁面 'id':'setting', styles:{ top:"0px", bottom:"50px" }, extras:{ //往新窗口傳值 name:"666" } }) }) </script>
新窗口文件接收原窗口數據
<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() console.log(JSON.stringify(Sdata)); }) </script>
index.html
<body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">標題</h1> </header> <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" id='email'> <span class="mui-icon mui-icon-email"></span> <span class="mui-tab-label">郵件</span> </a> <a class="mui-tab-item" id='setting'> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">設置</span> </a> </nav> </body> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init() mui.plusReady(function () { }) document.getElementById('setting').addEventListener('tap',function () { mui.toast('你點擊我了') ; //自動消失的提示框 var s = {'user':'liu'}; console.log(JSON.stringify(s)); mui.openWindow({ 'url':'setting.html', //跳轉的頁面 'id':'setting', styles:{ top:"0px", bottom:"50px" }, extras:{ name:"666" } }) }) document.getElementById('email').addEventListener('tap',function () { var setting_page = plus.webview.getWebviewById('setting'), // 查找指定標識的WebviewObject窗口,這裏的setting是id mui.fire(setting_page,'show_alert',{name:'liuliu'}) }) </script>
setting.html
<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() console.log(JSON.stringify(Sdata)); }) document.addEventListener('show_alert',function(data){ alert('歡迎光臨') }) //監聽整個DOM對象 </script>
點擊進入設置窗口、而後再點擊郵件,那麼郵件的事件就會傳遞過來
實現點擊事件跳轉窗口到登陸頁面,登陸頁面點擊登陸發起與後端的交互,後端獲取到數據到數據庫中查詢,並返回到手機端
from flask import Flask,request,jsonify from data_mongo import MONGO_DB app = Flask(__name__) @app.route('/login',methods=['POST']) def login(): username = request.form.get('username') #從前端請求中獲取數據 password = request.form.get('password') user_info = request.form.to_dict() user = MONGO_DB.data.find_one(user_info) #數據庫查詢 if user: return jsonify({'status':200,'msg':f"歡迎{user.get('username')}登陸"}) else: return jsonify({'status':201,'msg':'用戶名密碼錯誤'}) if __name__ == '__main__': app.run('0.0.0.0',9527,debug=True)
import pymongo client = pymongo.MongoClient(host='127.0.0.1',port=27017) MONGO_DB = client['login']
<body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <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='password' 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 mui-action-back" >取消</button> </div> </form> </div> </body> <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 password = document.getElementById('password').value; mui.post('http://192.168.13.146:9527/login',{ //ajax請求 username:username, password:password },function(data){ console.log(JSON.stringify(data)); mui.toast(data.msg); },'json' ); }) </script>
<nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" id="home"> <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" id='email'> <span class="mui-icon mui-icon-email"></span> <span class="mui-tab-label">郵件</span> </a> <a class="mui-tab-item" id='setting'> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">設置</span> </a> </nav> <script type="text/javascript"> mui.init() document.getElementById('home').addEventListener('tap',function () { mui.openWindow({ 'url':'login.html', //跳轉的頁面 'id':'login', }); }); </script>
建立數據
準備圖片
from flask import Flask,request,jsonify,send_file from data_mongo import MONGO_DB app = Flask(__name__) @app.route('/login',methods=['POST']) def login(): username = request.form.get('username') password = request.form.get('password') user_info = request.form.to_dict() user = MONGO_DB.data.find_one(user_info) if user: return jsonify({'status':200,'msg':f"歡迎{user.get('username')}登陸"}) else: return jsonify({'status':201,'msg':'用戶名密碼錯誤'}) @app.route('/content_list',methods=['POST']) #獲取新聞列表數據 def content_List(): res = list(MONGO_DB.contents.find({},{'_id':0})) return jsonify(res) @app.route('/get_image/<filename>') #獲取新聞列表圖片 def get_image(filename): import os path = os.path.join('image',filename) return send_file(path) if __name__ == '__main__': app.run('0.0.0.0',9527,debug=True)
import pymongo
client = pymongo.MongoClient(host='127.0.0.1',port=27017) MONGO_DB = client['login']
<!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"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">標題</h1> </header> <div class="mui-content"> <ul class="mui-table-view" id='content_list'> </ul> </div> </body> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init() mui.plusReady(function () { //窗口一加載就執行 mui.post('http://192.168.13.146:9527/content_list',{ },function(data){ for (var i =0;i< data.length;i++){ // console.log(JSON.stringify(data[i])); create_item(data[i]);//獲取到數據,執行下面的函數 } },'json' ); }) function create_item(content){ var li = document.createElement('li'); //建立標籤 li.className="mui-table-view-cell mui-media"; //設置標籤屬性 var a = document.createElement('a'); var img = document.createElement('img') img.className="mui-media-object mui-pull-left"; img.src = 'http://192.168.13.146:9527/get_image/'+content.image; //請求圖片 var div = document.createElement('div'); div.className = "mui-media-body"; div.innerText=content.title; var p = document.createElement('p'); p.className="mui-ellipsis"; p.innerText=content.text; li.appendChild(a); a.appendChild(img); a.appendChild(div); div.appendChild(p); document.getElementById("content_list").appendChild(li); } </script> </html>
HTML5plus: http://www.html5plus.org/
Mui :http://dev.dcloud.net.cn/mui/