目錄:
HTML5PLUS 硬件驅動接口,系統調用接口,相當於jQuery
HTML5PLUS官網:http://www.html5plus.org/
使用方法詳見官網 html5+規范:http://www.html5plus.org/doc/h5p.html
蜂鳴聲和震動:

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.css" rel="stylesheet" /> <style> .mui-bar-nav{ background-color: pink; } #first_ul{ margin-top: 0; } .mui-content ul{ margin-bottom: 10px; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">h5plus</h1> </header> <div class="mui-content"> <ul class="mui-table-view" id="first_ul"> <li class="mui-table-view-cell" id="vibrate"> <a class="mui-navigate-right"> 震動 </a> </li> <li class="mui-table-view-cell" id="beep"> <a class="mui-navigate-right"> 蜂鳴聲 </a> </li> </ul> </div> <script src="js/mui.js"></script> <script type="text/javascript"> mui.init(); mui.plusReady(function() { //蜂鳴聲 document.getElementById('beep').addEventListener('tap', function() { plus.device.beep(); }); //震動 document.getElementById("vibrate").addEventListener("tap", function() { plus.device.vibrate(); }); }) </script> </body> </html>
獲取手機通訊錄功能示例(包括打電話功能):

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.css" rel="stylesheet" /> <style> .mui-bar-nav{ background-color: pink; } .mui-content ul{ margin-bottom: 10px; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">h5plus</h1> </header> <div class="mui-content"> <ul class="mui-table-view"> <li class="mui-table-view-cell" id="contacts"> <a class="mui-navigate-right"> 通訊錄 </a> </li> </ul> </div> <script src="js/mui.js"></script> <script type="text/javascript"> mui.init(); mui.plusReady(function() { //通訊錄 document.getElementById("contacts").addEventListener("tap",function(){ mui.openWindow({ url:"xingfudao_contact.html", id:"xingfudao_contact" }); }); }) </script> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.css" rel="stylesheet" /> <style type="text/css"> .mui-bar-nav { background: pink; } .mui-title { color: white; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color:white;"></a> <h1 class="mui-title">通訊錄</h1> </header> <div class="mui-content"> <ul class="mui-table-view" id="cons"> </ul> </div> <script src="js/mui.js"></script> <script type="text/javascript"> mui.init(); mui.plusReady(function() { //獲取通訊錄對象 plus.contacts.getAddressBook( plus.contacts.ADDRESSBOOK_PHONE, function(addressbook) { //對回調結果進行處理 addressbook.find([], function(res) { console.log(JSON.stringify(res)); //創建一個用於存儲每個聯系人li標簽的容器 var li_str = ""; //循環處理res中數據 for (var i = 0; i < res.length; i++) { //判斷每次循環產生的電話號碼是否符合要求 if (res[i].phoneNumbers.length == 0) { continue; } //如果有,就拼接li字符串 li_str += '<li class="mui-table-view-cell" onclick="dial(\'' + res[i].phoneNumbers[0].value + '\')">' + '<a class="mui-navigate-right">' + '<span>' + res[i].displayName + '</span>' + '<span>' + res[i].phoneNumbers[0].value + '</span>' + '</a>' + '</li>'; } //將li標簽字符串嵌入ul標簽中 document.getElementById("cons").innerHTML = li_str; }); }, function(e) { alert("Get address book failed" + e); } ); }); //撥打電話的函數 function dial(number) { //number = 123 123 123 //對傳遞過來的電話號碼進行處理 var telNo = number.replace(/\s*/g, ""); plus.device.dial(telNo); } </script> </body> </html>
獲取手機中的圖片或視頻(一個或多個):

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.css" rel="stylesheet" /> <style> .mui-bar-nav{ background-color: pink; } .mui-content ul{ margin-bottom: 10px; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">h5plus</h1> </header> <div class="mui-content"> <ul class="mui-table-view"> <li class="mui-table-view-cell" id="pick"> <a class="mui-navigate-right"> 相冊 </a> </li> </ul> <!-- 相冊圖片呈現位置 --> <div id="img"> </div> </div> <script src="js/mui.js"></script> <script type="text/javascript"> mui.init(); mui.plusReady(function() { document.getElementById("pick").addEventListener("tap", function() { //單張視頻或圖片文件的選擇 // plus.gallery.pick( // function(path){ // console.log(path); // var allImgExt = ".jpg|.jpeg|.gif|.bmp|.png";//圖片文件的類型 // var extName = path.substring(path.lastIndexOf(".")).toLowerCase();//將所選文件的擴展名截取並轉為小寫 // if(allImgExt.indexOf(extName+"|")==-1){//視頻文件 // document.getElementById("img").innerHTML='<video src="'+path+'" controls="" autoplay="autoplay" width="100%"></video>'; // }else{//圖片文件 // document.getElementById("img").innerHTML='<img src="'+path+'" width="100%"/>'; // } // }, // function(e){ // alert("取消照片選擇"); // }, // {filter:"none"} // ); //多個圖片或視頻文件的選擇 plus.gallery.pick( function(f) { //f表示存儲多個文件路徑的數組 for (var i in f.files) { console.log(f.files[i]); var path = f.files[i]; var allImgExt = ".jpg|.jpeg|.gif|.bmp|.png"; //圖片文件的類型 var extName = path.substring(path.lastIndexOf(".")).toLowerCase(); //將所選文件的擴展名截取並轉為小寫 if (allImgExt.indexOf(extName + "|") == -1) { //視頻文件 document.getElementById("img").innerHTML = document.getElementById("img").innerHTML + '<video src="' + path + '" controls="" autoplay="autoplay" width="100%"></video>'; } else { //圖片文件 document.getElementById("img").innerHTML = document.getElementById("img").innerHTML + '<img src="' + path + '" width="100%"/>'; } } }, function(e) { alert("取消照片選擇"); }, { filter: "none", multiple: true } ); }); }) </script> </body> </html>
APP拍照功能示例:

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.css" rel="stylesheet" /> <style> .mui-bar-nav{ background-color: pink; } .mui-content ul{ margin-bottom: 10px; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">h5plus</h1> </header> <div class="mui-content"> <ul class="mui-table-view"> <li class="mui-table-view-cell" id="camera"> <a class="mui-navigate-right"> 拍照 </a> </li> </ul> <!-- 相冊圖片呈現位置 --> <div id="img"> </div> </div> <script src="js/mui.js"></script> <script type="text/javascript"> mui.init(); mui.plusReady(function() { //拍照 document.getElementById("camera").addEventListener("tap", function() { //獲取攝像頭對象 var cmr = plus.camera.getCamera(); var res = cmr.supportedImageResolutions[0]; //分辨率 var fmt = cmr.supportedImageFormats[0]; //格式 console.log("分辨率:" + res); console.log("格式:" + fmt); cmr.captureImage( function(rs) { var path = "file://" + plus.io.convertLocalFileSystemURL(eval(JSON.stringify(rs))); console.log("圖片路徑:" + path); //動態將圖片展示在id為img的容器中 document.getElementById("img").innerHTML = '<img src="' + path + '" width="100%"/>'; }, function(e) { alert(e.message + "取消拍照"); }, { resolution: res, format: fmt } ); }); }); </script> </body> </html>
音頻處理:

<!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" id="title">正在播放xxxxxx</h1> </header> <div class="mui-content"> <div class="mui-row" style="text-align: center; margin-top: 10px;" > <img src="" id="cover" style="height: 250px;width: 250px; border-radius: 50%;"/> </div> <button type="button" id="pause" class="mui-btn mui-btn-yellow mui-btn-block">暫停</button> <button type="button" id="resume" class="mui-btn mui-btn-green mui-btn-block">繼續</button> <button type="button" id="stop" class="mui-btn mui-btn-red mui-btn-block">停止</button> </div> </body> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init(); var Sdata = null; var myplayer = null; mui.plusReady(function () { Sdata = plus.webview.currentWebview(); document.getElementById("title").innerText = "正在播放" + Sdata.title; document.getElementById("cover").src =window.serv_image + Sdata.cover; myplayer = plus.audio.createPlayer(window.serv_music + Sdata.audio); myplayer.play(); }) document.getElementById('pause').addEventListener('tap',function () { myplayer.pause(); }) document.getElementById('resume').addEventListener('tap',function () { myplayer.resume(); }) document.getElementById('stop').addEventListener('tap',function () { myplayer.stop(); }) </script> </html>
掃描二維碼:

<!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"> <div id="bcid" style="width: 100%;height: 750px;"></div> </div> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init(); var scan = null; mui.plusReady(function () { scan = new plus.barcode.Barcode("bcid"); scan.onmarked = inmarked; scan.start(); }) function inmarked(type,code){ // alert(type +":"+ code) mui.post(window.serv+ '/validate_code',{ device_key:code },function(data){ if(data.code == 0){ //打開綁定玩具流程 創建玩具 mui.openWindow({ url:"bind_toy.html", id:"bind_toy.html", extras:data.data }) }else if(data.code==2){ //掃描的二維碼信息異常 mui.toast(data.msg); mui.back(); }else if(data.code==1){ //神秘代碼 } },'json' ); } </script> </body> </html>
錄音並上傳和發送語言:

<!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" /> <link rel="stylesheet" type="text/css" href="css/chat.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" id="title"></h1> </header> <div class="mui-content" id="chat_list"> <div class="leftd"> <span class="leftd_h"> <img src="avatar/toy.jpg" /> </span> <div class="left speech"> 點擊播放消息 </div> </div> <div class="rightd"> <span class="rightd_h"> <img src="avatar/toy.jpg" /> </span> <div class="right speech"> 點擊播放消息 </div> </div> </div> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" id="talk"> <span class="mui-icon mui-icon-speech"></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({ gestureConfig: { doubletap: false, //默認為false longtap: false, //默認為false swipe: false, //默認為true drag: false, //默認為true hold: true, //默認為false,不監聽 release: true //默認為false,不監聽 } }); var Sdata = null; mui.plusReady(function() { Sdata = plus.webview.currentWebview(); document.getElementById("title").innerText = Sdata.friend_nick; }); var reco = null; var filename = null; document.getElementById('talk').addEventListener('hold', function() { reco = plus.audio.getRecorder(); reco.record({ filename: "_doc/audio/", format: "amr" }, function(path) { console.log(path); createUpload(path); }); }) document.getElementById('talk').addEventListener('release', function() { reco.stop(); }) function createUpload(path) { var task = plus.uploader.createUpload(window.serv + "/uploader", { method: "POST" }, function(t, status) { // 上傳完成 if(status == 200) { console.log(JSON.stringify(t)); filename = JSON.parse(t.responseText); send_str = { "chat": filename.data.filename, "to_user": Sdata.friend_id, "from_user": window.localStorage.getItem("user") }; var index = plus.webview.getWebviewById("HBuilder"); mui.fire(index, 'send_str', send_str); create_chat("self","mama.jpg",path); } } ); task.addFile(path, { key: "recorder" }); task.addData("key", "value"); task.start(); } function create_chat(who, avatar,chat) { var div1class = "leftd"; var spanclass = "leftd_h"; var div2class = "left speech"; if(who == "self") { div1class = "rightd"; spanclass = "rightd_h"; div2class = "right speech"; } if(chat.toString().indexOf("_")>-1){ chat = chat; }else{ chat = window.serv_chat + chat; } var div = document.createElement("div"); div.className = div1class; var span = document.createElement("span"); span.className = spanclass; var img = document.createElement("img"); img.src = "avatar/" + avatar; var div2 = document.createElement("div"); div2.className = div2class; div2.innerText = "點擊播放"; div2.onclick = function(){ var player = plus.audio.createPlayer(chat); player.play(); } div.appendChild(span); span.appendChild(img); div.appendChild(div2); document.getElementById("chat_list").appendChild(div); } document.addEventListener("add_chat",function(data){ create_chat("","toy.jpg",data.detail.filename); }) </script> </html>

from flask import Blueprint,jsonify,send_file,request from settings import CHATS_PATH import os gsa = Blueprint("gsa",__name__) @gsa.route("/uploader",methods=["POST"]) def uploader(): audio = request.files.get("recorder") import os path = os.path.join(CHATS_PATH,audio.filename) audio.save(path) os.system(f"ffmpeg -i {path} {path}.mp3") RET["code"] = 0 RET["msg"] = "上傳音頻文件" RET["data"] = {"filename":f"{audio.filename}.mp3"} return jsonify(RET)

document.addEventListener("send_str", function(data) { var send_str = data.detail // {to_user:"toy123",chat:"123123123.amr.mp3"} ws.send(JSON.stringify(send_str)); });
Mui 布局框架 = 排版用,相當於bootstrap,內部已封裝 HTML5PLUS
Mui官網:https://dev.dcloud.net.cn/mui/
Mui的各功能的使用詳見官網文檔:https://dev.dcloud.net.cn/mui/ui/
注意 UI組件、窗口管理、事件管理、ajax、代碼塊等的使用
代碼塊:組件開發快捷鍵,詳見Mui文檔最下方

部分常用到的代碼塊.方便開發. 組件 觸發字符 mDoctype(mui-dom結構) mdo ctype mBody(主體) mbo dy mScroll(區域滾動容器) msc roll mrefreshContainer(刷新容器) mre fresh mHeader(標題欄) mhe ader mHeader(帶返回箭頭的標題欄) mhe aderwithBack mCheckbox(復選框) mch eckbox mCheckbox(復選框居左) mch eckbox_left mCheckbox(復選框禁用選項) mch eckbox_disabled mIcon(圖標) mic on mOffcanvas(側滑導航-主界面、菜單同時移動) mof fcanvasall mOffcanvas(側滑導航-主界面移動、菜單不動) mof fcanvasmain mOffcanvas(側滑導航-主界面不動、菜單移動) mof fcanvasmenu mOffcanvas(側滑導航-縮放式側滑(類手機QQ)) mof fcanvasscalable mText(文本框) min puttext mText_Search(搜索框) min putsearch mText_Clear(帶清除按鈕的文本框) min putclear mText_Speech(語音輸入) min putspeech mForm(表單) mfo rm mRadio(單選框) mra dio mRadio(單選框居左) mra dio_left mRadio(禁用單選框) mra dio_disable mRadios(默認選中指定項) mra dio_selected mPopover(彈出菜單) mpo pover mprogressbar(進度條-無限循環) mpr ogressbarinfinite mprogressbar(進度條-有准確值) mpr ogressbar mActionsheet(H5模式彈出菜單) mac tionsheet mRange(Label+滑塊) mra ngelabel mSwitch(開關) msw itch mSwitch(開關 - 藍色) msw itch_blue mSwitch(開關Mini) msw itchmini mSwitch(開關Mini - blue) msw itchmini_blue mbadge(數字角標) mba dge mbadge(數字角標無底色) mba dge_inverted mTab(底部選項卡) mta b mTabSegmented(div選項卡) mta bsegmented mTabSegmented(可左右拖動的選項卡) mta bviewpage mPagination(分頁) mpa gination mList(列表) mli st mListMedia(圖文列表圖片居左) mli st_Media_left mListMedia(圖文列表圖片居右) mli st_Media_right mGrid(九宮格) mgr id mGallery-Table(圖文表格) msl ider_gallery_table mGallery(圖片輪播) msl ider_gallery slide(輪播組件) msl ider mactionsheet(操作表) act ionsheet maccordion(折疊面板) mac cordion mnumbox(數字輸入框) mnu mbox mrefreshContainer(刷新容器) mpu llrefresh mButton(按鈕) mbu tton mButton(按鈕無底色,有邊框) mbu tton_outline mButton(塊狀按鈕) mbu tton_block init 組件 觸發字符 mui.init min 創建子頁面( subpage ) minsubpage 預加載頁面( preload ) minpreload 刷新組件( pullRefresh ) minpullRefresh 手勢事件( getures ) mingesture 側滑返回( swipeback ) minswipeback 按鍵綁定(keyeventbind) minkeyevent 重寫窗口關閉邏輯(beforeBack) minbeforeback 設置狀態欄顏色( setStatusbar ) minstatusbar 預加載數量( preloadlimit ) minprelimit js組件 組件 觸發字符 mui.plusReady() mplusready mui.ready mready event 組件 觸發字符 mui.on(事件綁定) mmon mui.off(事件取消) mmoff mui.trigger()(事件觸發) mtrigger mui.fire()(自定義事件) mfire document.getElementById() dg document.querySelector() ds document.querySelector().addEventListener() dsa document.getElementById().addEventListener() dga window.addEventListener() wad document.addEventListener() dad dialog 組件 觸發字符 mui.alert()(彈出框) mdalert mui.confirm()(確認彈出框) mdconfirm mui.prompt()(輸入彈出框) mdprompt mui.toast()(自動消失提示框) mdtoast mui.closePopup()(關閉最外層對話框) mdclosePopup mui.closePopups()(關閉全部對話框) mdclosePopups utils 組件 觸發字符 mui() (mui對象選擇器) mmui mui.each()(數組,對象遍歷) meach mui().each()(DOM遍歷) mmeach mui.extends(對象合並) mextends mui.later() (setTimeOut封裝) mlater mui.scrollTo() (滾動到指定位置) mscrollto mui.os()(判斷當前運行環境) mos ajax 組件 觸發字符 mui.ajax() majax mui.post() mpost mui.get() mget mui.getJSON() mjson webview 組件 觸發字符 mui.open(打開新頁面) mopen mui.currentWebview (當前頁面) mcurrent mui.back()(關閉窗口) mback mui.backFunction()(重寫返回邏輯) mbackfunction mui.backDouble()(雙擊退出應用) mbackDouble mui.backTast(雙擊進入后台) mbacktast mui.preload()(預加載) mpreload plus 組件 觸發字符 plusReady pready plus.accelerometer pacce plus.audio paudio plus.barcode pbarcode plus.camera pcamera plus.contacts pcontacts plus.device pdevice plus.gallery pgallery plus.geolocation pgeolocation plus.io pio plus.key pkey plus.maps pmaps plus.messaging pmessaging plus.nativeObj pnativeObj plus.nativeUI pnativeUI plus.navigator pnavigator plus.orientation porientation plus.payment ppayment plus.proximity pproximity plus.push ppush plus.runtime pruntime
打開一個新的窗口並傳值, mui.openWindow()
:

index.html <script> mui.init(); // mui插件初始化 document.getElementById("setting").addEventListener("tap",function(){ mui.openWindow({ "url":"new.html", // 新頁面的html名字 "id":"new.html", // id用於新頁面接收原頁面的mui.fire而做出響應 styles:{ top:"0px", bottom:"50px" }, // 新頁面與四周的間距 extras:{ name:"666" } // extras 用於向新頁面傳值 }); }); </script> new.html <script> mui.init(); mui.plusReady(function () { var Sdata = plus.webview.currentWebview(); console.log(JSON.stringify(Sdata)); // {name:666} console.log(Sdata.name); // 666 }); </script>
觸發自定義事件:通過mui.fire()
方法可觸發目標窗口的自定義事件:

<!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"> <ul class="mui-table-view" id="content_list"> </ul> </div> <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" 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 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.openWindow({ "url":"new.html", "id":"new.html", styles:{ top:"0px", bottom:"50px" }, extras:{ name:"666" } }); }); document.getElementById('email').addEventListener('tap',function () { var new_page = plus.webview.getWebviewById("new.html"); mui.fire(new_page,'show_alert',{name:"chunsheng"}); }) </script> </body> </html>

<!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"> <ul class="mui-table-view"> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 1 </a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 2 </a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 3 </a> </li> </ul> </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(); console.log(JSON.stringify(Sdata)); console.log(Sdata.name); // 666 }); document.addEventListener("show_alert",function(data){ console.log(JSON.stringify(data.detail.name)); // chunsheng alert("歡迎觀臨"); }) // 接收到來自 index.html 的 mui.fire 中的show_alert,然后做出響應 alert("歡迎觀臨") </script> </body> </html>
mui使用 簡單示例(登錄功能及主頁圖文列表顯示新聞功能):
后端(使用Flask框架 + MongoDB數據庫):

#數據庫配置 import pymongo client = pymongo.MongoClient(host="127.0.0.1",port=27017) # 內部封裝 連接池 MONGO_DB = client["day118"] # 連接一個數據庫

from flask import Flask, request, jsonify, send_file from setting 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() print(user_info) user = MONGO_DB.users.find_one(user_info) if user: return jsonify({"status":200,"msg":f"歡迎{user.get('nickname')}登錄"}) # content-type:app/json else: return jsonify({"status":201,"msg":"用戶名密碼錯誤"}) @app.route("/content_list", methods=["POST"]) def content_list(): res = list(MONGO_DB.content.find({},{"_id":0})) return jsonify(res) @app.route("/get_image/<filename>") def get_image(filename): import os path = os.path.join("tupian", filename) # tupian目錄下放所需圖片 return send_file(path) if __name__ == '__main__': app.run("0.0.0.0", 9527, debug=True)
前端(mui框架 + hbuilder):

<!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"> <ul class="mui-table-view" id="content_list"> </ul> </div> <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 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.144:9527/content_list',{ },function(data){ for (var i = 0; i < data.length; i++) { // console.log(JSON.stringify(data[i])) create_item(data[i]); } },'json' ); }) document.getElementById('home').addEventListener('tap',function () { mui.openWindow({ "url":"index.html", "id":"index.html", }); }) document.getElementById("setting").addEventListener("tap",function(){ mui.openWindow({ "url":"login_my.html", "id":"login_my.html", styles:{ top:"0px", bottom:"50px" }, extras:{ } }); }); 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.144:9527/get_image/"+content.image; var div = document.createElement("div"); div.className="mui-media-body"; div.innerText = content.tilte; 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> </body> </html>

<!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="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.144:9527/login',{ username:username, password:password },function(data){ mui.toast(data.msg); },'json' ); }) </script> </html>
輪播圖功能實現示例(包括每秒自動輪播)--hbuilderx

<!doctype html> <html> <head> <meta charset="utf-8"> <title>xingfudao_index</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.css" rel="stylesheet" /> <link href="css/main.css" rel="stylesheet" /> </head> <body> <header class="mui-bar mui-bar-nav"> <!-- 搜索框 min --> <div class="mui-input-row mui-pull-left mui-search"> <input type="search" class="mui-input-clear" placeholder="請輸入搜索內容" style='background-color: white;' onfocus="this.style.color='gray'"> </div> <span class='mui-pull-right'>預約</span> </header> <!-- 主體 mbo --> <div class="mui-content"> <!-- 輪播圖 msl--> <div id="slider" class="mui-slider" > <div class="mui-slider-group mui-slider-loop"> <!-- 額外增加的一個節點(循環輪播:第一個節點是最后一張輪播) --> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="images/lb4.jpg"> </a> </div> <!-- 第一張 --> <div class="mui-slider-item"> <a href="#"> <img src="images/lb1.jpg"> </a> </div> <!-- 第二張 --> <div class="mui-slider-item"> <a href="#"> <img src="images/lb2.jpg"> </a> </div> <!-- 第三張 --> <div class="mui-slider-item"> <a href="#"> <img src="images/lb3.jpg"> </a> </div> <!-- 第四張 --> <div class="mui-slider-item"> <a href="#"> <img src="images/lb4.jpg"> </a> </div> <!-- 額外增加的一個節點(循環輪播:最后一個節點是第一張輪播) --> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="images/lb1.jpg"> </a> </div> </div> <div class="mui-slider-indicator"> <div class="mui-indicator mui-active"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> </div> </div> </div> <script src="js/mui.js"></script> <script type="text/javascript"> mui.init(); // 獲取當前文檔中輪播圖組件對象 var sliderObj = mui('#slider'); // 輪播圖每秒自動輪播 sliderObj.slider({ interval:1000 }); </script> </body> </html>
九宮格功能示例--hbuilderx
注意:通過定義.mui-col-sm-6
類在大屏(≥400px)設備上會展現為並排的兩列,而.mui-col-xs-12
在小屏(<400px)設備上會覆蓋之前定義的類展現為水平排列

<!-- 九宮格 mgr--> <ul id="grid" class="mui-table-view mui-grid-view mui-grid-9"> <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"> <a href="http://www.baidu.com"> <span class="mui-icon"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xiangji"></use> </svg> </span> <div class="mui-media-body">婚紗拍攝</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"> <a href="#"> <span class="mui-icon"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-feiji"></use> </svg> </span> <div class="mui-media-body">全球旅拍</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"> <a href="#"> <span class="mui-icon"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-jiubei"></use> </svg> </span> <div class="mui-media-body">婚宴酒店</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"> <a href="#"> <span class="mui-icon"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xinniantubiao-shangchuantubiaoku-"></use> </svg> </span> <div class="mui-media-body">婚禮服務</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"> <a href="#"> <span class="mui-icon"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-fengche"></use> </svg> </span> <div class="mui-media-body">婚紗拍攝</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"> <a href="#"> <span class="mui-icon"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shu"></use> </svg> </span> <div class="mui-media-body">全球旅拍</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"> <a href="#"> <span class="mui-icon"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-kechengguwen"></use> </svg> </span> <div class="mui-media-body">婚禮顧問</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"> <a href="#"> <span class="mui-icon"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-rencaiduijie"></use> </svg> </span> <div class="mui-media-body">新人說</div> </a> </li> </ul>
圖文列表功能示例--hbuilderx

<!-- 圖文列表 mli--> <div id="mlist"> <div> <span style="background: red;"> </span> <span class="hs">婚宴酒店</span> <span class="more"> <a href="http://www.baidu.com" class='mui-pull-right'>更多></a> </span> </div> <!-- 圖文列表 --> <ul class="mui-table-view"> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="images/list1.jpg"> <div class="mui-media-body"> <p class="title">【巴厘島】烏干沙悅榕庄酒店 白羽教堂</p> <p class="font_style">周一到周日 | 提前3天預約</p> <p class="font_style"> <span class="after_price">¥42888.0</span> <span class="before_price">門店價:¥42888</span> <span class="sale_num">售出:6</span> </p> </div> </a> </li> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="images/list2.jpg"> <div class="mui-media-body"> <p class="title">【蘇梅島】班達靈岩洲際度假村 沙灘</p> <p class="font_style">周一到周日 | 提前3天預約</p> <p class="font_style"> <span class="after_price">¥31999.0</span> <span class="before_price">門店價:¥31999</span> <span class="sale_num">售出:8</span> </p> </div> </a> </li> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="images/list3.jpg"> <div class="mui-media-body"> <p class="title">【沖繩】烏干沙悅榕庄酒店 白羽教堂</p> <p class="font_style">周一到周日 | 提前3天預約</p> <p class="font_style"> <span class="after_price">¥42888.0</span> <span class="before_price">門店價:¥42888</span> <span class="sale_num">售出:10</span> </p> </div> </a> </li> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="images/list4.jpg"> <div class="mui-media-body"> <p class="title">【巴厘島】烏干沙悅榕庄酒店 白羽教堂</p> <p class="font_style">周一到周日 | 提前3天預約</p> <p class="font_style"> <span class="after_price">¥42888.0</span> <span class="before_price">門店價:¥42888.0</span> <span class="sale_num">售出:2</span> </p> </div> </a> </li> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="images/list5.jpg"> <div class="mui-media-body"> <p class="title">【巴厘島】烏干沙悅榕庄酒店 白羽教堂</p> <p class="font_style">周一到周日 | 提前3天預約</p> <p class="font_style"> <span class="after_price">¥42888.0</span> <span class="before_price">門店價:¥42888.0</span> <span class="sale_num">售出:2</span> </p> </div> </a> </li> </ul> </div>
底部選項卡功能示例(包括點擊切換頁面)--hbuilderx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> <style type="text/css"> .mui-active .mui-icon,.mui-active .mui-tab-label{ color:deeppink; } </style> </head> <body> <!-- 底部選項卡 --> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" href="xingfudao_index.html"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首頁</span> </a> <a class="mui-tab-item" href="xingfudao_contact.html"> <span class="mui-icon mui-icon-contact"></span> <span class="mui-tab-label">通訊錄</span> </a> <a class="mui-tab-item" href="xingfudao_h5plus.html"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">h5plus</span> </a> <a class="mui-tab-item" href="xingfudao_wode.html"> <span class="mui-icon mui-icon-person"></span> <span class="mui-tab-label">我的</span> </a> </nav> <script type="text/javascript"> mui.init(); //實現底部選項卡切換功能 mui.plusReady(function () { //定義一個容器,用於存儲底部選項卡所關聯的頁面 var pages = ["xingfudao_index.html","xingfudao_contact.html","xingfudao_h5plus.html","xingfudao_wode.html"]; //獲取當前窗口對象 var ws = plus.webview.currentWebview(); //設置頁面窗口樣式,給底部選項卡留50px高度 var pageStyle = { top:"0px", bottom:"50px" }; //循環數組,為每個頁面創建webview窗口對象 for(var i = 0;i<pages.length;i++){ //將每次循環提取的頁面創建為webview窗口對象 var item = plus.webview.create(pages[i],pages[i],pageStyle); //將每個webview窗口對象追加至當前ws對象中 ws.append(item); } //設置默認打開窗口 plus.webview.show(pages[0]); //選項卡事件監聽 mui(".mui-bar-tab").on("tap","a",function(){ //獲取被點擊a標簽的href屬性值 var href = this.getAttribute("href"); //展示對應的頁面 plus.webview.show(href); }); }); </script> </body> </html>
mui引用:若要在自己的項目中引入某一個功能,可以先新建一個 hello mui模板 的 5+APP項目,復制那個功能的代碼(包括那個功能引用的css和js等都要復制過來),注意路徑;想要登錄功能可以直接新建mui登錄模板的5+APP項目;h5同理(新建一個hello h5+項目)
hbuilderx app開發流程:
1.新建項目:
文件----新建----項目----5+APP(項目名、路徑、選擇mui項目)----創建
注:若自己新建了一個首頁,如xingfudao_index.html,則要在手機上測試時需要修改配置文件的首頁入口:
2.調試
可以選擇在瀏覽器中運行,也可選擇內置瀏覽器運行或模擬器運行(注:修改文件內容后注意要Ctrl s保存,瀏覽器顯示才會變化)
hbuilderx app打包流程:
1.先登錄hbuilderx
2.基礎配置
3.圖標配置
4.發行---原生APP雲打包
hbuilder app開發流程:
1.下載夜神模擬器安裝;下載hbuilder安裝
安裝Hbuilder , 安裝 Nox 夜神安卓模擬器
hbuilder:https://www.dcloud.io/hbuilderx.html
夜神模擬器:https://www.yeshen.com/
2.夜神模擬器與hbuilder建立連接
1. 打開夜神模擬器,調為手機版
2. 打開hbuilder,新建移動app,選擇mui項目,應用名稱隨便起 如myapp,點擊創建;
3. 在hbuilder中 點擊 工具 -> 選項 -> HBuilder -> 第三方Android模擬器端口改為 62001,然后確定,可以看到左下角提示:手機127.0.0.1:62001已連接上電腦
4.在hbuilder中 選擇 在手機設備上運行或停止應用,選擇第一個:hbuilder基座運行 ,然后會自動在夜神模擬器上安裝手機端hbuilder
其他調試方式,例如真機測試請參考網上http://ask.dcloud.net.cn/article/69
hbuilder app打包流程:
首先得登錄HBuilder,然后再打包