HBuilderx 開發調試Android應用app


目錄:

  一、HTML5PLUS

  二、mui

  三、hbuilderx app開發流程

  四、hbuilderx app打包流程

  hbuilder app開發流程

  六、hbuilder app打包流程

 

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>
蜂鳴聲beep和震動vibrate

    獲取手機通訊錄功能示例(包括打電話功能):

<!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>
xingfudao_h5plus.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>
xingfudao_contact.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>
audio 的簡單使用示例

  掃描二維碼:

<!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>
chat.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)
Flask藍圖
        document.addEventListener("send_str", function(data) {  
            var send_str = data.detail // {to_user:"toy123",chat:"123123123.amr.mp3"}
            ws.send(JSON.stringify(send_str));
        }); 
index.html

 

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>
index.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>
new.html

     mui使用 簡單示例(登錄功能及主頁圖文列表顯示新聞功能):

    后端(使用Flask框架 + MongoDB數據庫):

#數據庫配置

import pymongo
client = pymongo.MongoClient(host="127.0.0.1",port=27017)  # 內部封裝 連接池
MONGO_DB = client["day118"]  # 連接一個數據庫
setting.py
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)
app.py

    前端(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>
index.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>
login.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;">&nbsp;</span>
                    <span class="hs">婚宴酒店</span>
                    <span class="more">
                        <a href="http://www.baidu.com" class='mui-pull-right'>更多&gt;</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,然后再打包

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM