html5+hbuilder+夜神模擬器+webview

HTML5 Plus應用概述

首先新建一個移動App項目，文件-->新建-->移動APP

 

HTML5 Plus移動App，簡稱5+App，是一種基於HTML、JS、CSS編寫的運行於手機端的App，這種App可以通過擴展的JS API任意調用手機的原生能力，實現與原生App同樣強大的功能和性能。

代碼塊

mdo 主題
mhe 標題欄 mhe帶箭頭的標題欄
msl 圖片輪播
mgr 九宮格
mli 圖文列表居左
mta底部選項卡

夜神模擬器

夜神安卓模擬器(夜神模擬器),是全新一代的安卓模擬器,與傳統安卓模擬器相比,基於android4.4.2,兼容X86/AMD,在性能、穩定性、兼容性等方面有着巨大優勢。

三、Webview

Webview模塊管理應用窗口界面，實現多窗口的邏輯控制管理操作。通過plus.webview可獲取應用界面管理對象。

http://www.html5plus.org/doc/zh_cn/webview.html

手勢事件

點擊:
tap 單擊屏幕
doublatap 雙擊屏幕

長按:
longtap 長按屏幕
hold 按住屏幕
release 離開屏幕

對話框
alert 警告框
confirm 確認框
prompt 消息對話框
toast 消息提示框

實例

<script type="text/javascript">
mui.init();
//擴展API加載完成事件
mui.plusReady(function () {

})
//id為phone綁定tag(點擊)事件
document.getElementById('phone').addEventListener('tap',function () {
mui.toast('你點擊了 電話頁面');
})

新頁面傳值

打開新頁面 index.html
//id為phone綁定tag(點擊)事件
document.getElementById("phone").addEventListener("tap", function() {
    // 自動消失提示框
    mui.toast("你點擊了電話頁面");
    mui.openWindow({
        url:"phone.html",//上面是穿的頁面
        id:"phone.html",
        styles:{
          top:"0px",//新頁面頂部位置
          bottom:"50px",//新頁面底部位置
        },
        // 額外擴展參數
        extras:{
            user_id:123456
        }
    })
});

####phone.html 獲取參數，並彈框
document.getElementById('btn').addEventListener('tap', function() {
//獲得webvies窗口native層實例對象
var sdata = plus.webview.currentWebview();
mui.alert(sdata.user_id);
})

subpage

##############子頁面相當於在html中使用iframe，所有的瀏覽器都支持################
main.index 身體    index.底部部   muns
添加:
注意：mui.init里面是一個對象，必須先寫{}，再寫 subpage。否則沒有下面的效果！
        mui.init({
            // 子頁面
            subpages: [{
                url: "main.html",
                id: "main.html",
                styles: {
                    top: "0px", //新頁面頂部位置
                    bottom: "50px", //新頁面底部位置
                },
            }]
        });

scroll區域滾動

main.html
#############滾動################
    <script type="text/javascript">
        mui.init();
        mui('.mui-scroll-wrapper').scroll();  //初始化滾動
    </script>

登陸

############登陸###############
新增login.html代碼
在index 設置中添加事件
        document.getElementById("login").addEventListener("tap", function() {
            mui.openWindow({
                url: "login.html",
                id: "login.html",
                styles: window.styles
            })
        })

ajex請求

##########ajax請求############
mpo
mui框架基於htm5plus的XMLHttpRequest，封裝了常用的Ajax函數，支持GET、POST請求方式，支持返回json、xml、html、text、script數據類型
在login.html 登陸中按鈕觸發
    <script type="text/javascript">
        var server='http://192.168.14.173:5000'
        mui.init();
        document.getElementById("login").addEventListener("tap", function() {
            var uname = document.getElementById("username").value;
            var pwd = document.getElementById("pwd").value;
            
            mui.post(
                server + "/login", {
                    username: uname,
                    password: pwd
                },
                function(data) {
                    mui.toast(data);
                    
                }
            );
        });
    </script>

--------------------后端代碼-----------------
@app.route("/login",methods=['POST','GET'])
def login():
username=request.form.get("username")
password=request.form.get("password")
if username=='tang'and password=='123':
return '歡迎'
if __name__ == '__main__':
app.run("0.0.0.0",5000,debug=True)

自定義事件fire

##########自定義事件fire############
通過自定義事件，用戶可以輕松實現多webview間數據傳遞。
通過mui.fire()方法可觸發目標窗口的自定義事件：
.fire( target , event , data )

data是一個json數據，它的key必須和事件名一致才行！否則Undefined

注意：目標窗口，必須監聽，才有效果！

目錄接收參數時，使用 data.detail.事件名


修改phone.html

document.getElementById("btn").addEventListener("tap", function() {

// 獲取目標窗口id
var main = plus.webview.getWebviewById("main.html");

//如果是 index就是"HBuilder"

// 使用fire事件,發送一個數據對象
mui.fire(main,"talk",{talk:"我讓你說啥，你就給我說啥"})

})

=========index取值==========

document.addEventListener("talk",function(data){
// 顯示獲取的值
mui.toast(data.detail.talk);
})

 storage

Storage模塊管理應用本地數據存儲區，用於應用數據的保存和讀取。
應用本地數據與localStorage、sessionStorage的區別在於數據有效域不同，前者可在應用內跨域操作，數據存儲期是持久化的，並且沒有容量限制。
通過plus.storage可獲取應用本地數據管理對象。
getLength: 獲取應用存儲區中保存的鍵值對的個數
getItem: 通過鍵(key)檢索獲取應用存儲的值
setItem: 修改或添加鍵值(key-value)對數據到應用數據存儲中
removeItem: 通過key值刪除鍵值對存儲的數據
clear: 清除應用所有的鍵值對存儲數據
key: 獲取鍵值對中指定索引值的key值
mui.post(
    server + "/login", {
        username: uname,
        password: pwd
    },
    function(data) {
        // 由於后端返回的是json，這里需要反序列化
        console.log(JSON.stringify(data));
        if(!data.code) {
            // index頁面的WebviewById為HBuilder
            //                      var index = plus.webview.getWebviewById("HBuilder")
            // 觸發fire事件,發送數據
            //                      mui.fire(index,"login",{msg:data.msg + data.data.user_id})
            mui.toast(data.msg + data.data.user_id);
            //修改或添加鍵值(key-value)對數據到應用數據存儲中
            plus.storage.setItem("user", data.data.user_id);
            mui.openWindow({
                url: "user_info.html",
                id: "user_info.html",
                styles: window.styles,
                //使用 extras實現頁面間傳值
                extras: {
                    // 傳輸user_id
                    user_id: data.data.user_id
                }
            })

        } else {
            mui.toast(data.msg)
        }
    }, 'json'
);
--------------------------------------------------------------
document.getElementById("logout").addEventListener("tap", function() {
    // 刪除storage里面的user屬性
    plus.storage.removeItem("user")
    // 跳轉頁面login.html
    mui.openWindow({
        url: "login.html",
        id: "login.html",
        styles: window.styles
    })
})