HTML5 Plus應(yīng)用概述

首先新建一個(gè)移動(dòng)App項(xiàng)目，文件-->新建-->移動(dòng)APP

?

HTML5 Plus移動(dòng)App，簡稱5+App，是一種基于HTML、JS、CSS編寫的運(yùn)行于手機(jī)端的App，這種App可以通過擴(kuò)展的JS API任意調(diào)用手機(jī)的原生能力，實(shí)現(xiàn)與原生App同樣強(qiáng)大的功能和性能。

代碼塊

mdo 主題 mhe 標(biāo)題欄 mhe帶箭頭的標(biāo)題欄 msl 圖片輪播 mgr 九宮格 mli 圖文列表居左 mta底部選項(xiàng)卡

夜神模擬器

夜神安卓模擬器(夜神模擬器),是全新一代的安卓模擬器,與傳統(tǒng)安卓模擬器相比,基于android4.4.2,兼容X86/AMD,在性能、穩(wěn)定性、兼容性等方面有著巨大優(yōu)勢。

三、Webview

Webview模塊管理應(yīng)用窗口界面，實(shí)現(xiàn)多窗口的邏輯控制管理操作。通過plus.webview可獲取應(yīng)用界面管理對(duì)象。

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

手勢事件

點(diǎn)擊: tap 單擊屏幕 doublatap 雙擊屏幕長按: longtap 長按屏幕 hold 按住屏幕 release 離開屏幕對(duì)話框 alert 警告框 confirm 確認(rèn)框 prompt 消息對(duì)話框 toast 消息提示框

實(shí)例

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

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

新頁面?zhèn)髦?/span>

打開新頁面 index.html //id為phone綁定tag(點(diǎn)擊)事件 document.getElementById("phone").addEventListener("tap", function() {// 自動(dòng)消失提示框mui.toast("你點(diǎn)擊了電話頁面");mui.openWindow({url:"phone.html",//上面是穿的頁面id:"phone.html",styles:{top:"0px",//新頁面頂部位置bottom:"50px",//新頁面底部位置},// 額外擴(kuò)展參數(shù)extras:{user_id:123456}}) });####phone.html 獲取參數(shù)，并彈框 document.getElementById('btn').addEventListener('tap', function() { //獲得webvies窗口native層實(shí)例對(duì)象 var sdata = plus.webview.currentWebview(); mui.alert(sdata.user_id); })

subpage

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

scroll區(qū)域滾動(dòng)

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

登陸

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

ajex請(qǐng)求

##########ajax請(qǐng)求############ mpo mui框架基于htm5plus的XMLHttpRequest，封裝了常用的Ajax函數(shù)，支持GET、POST請(qǐng)求方式，支持返回json、xml、html、text、script數(shù)據(jù)類型 在login.html 登陸中按鈕觸發(fā)<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############ 通過自定義事件，用戶可以輕松實(shí)現(xiàn)多webview間數(shù)據(jù)傳遞。 通過mui.fire()方法可觸發(fā)目標(biāo)窗口的自定義事件： .fire( target , event , data )data是一個(gè)json數(shù)據(jù)，它的key必須和事件名一致才行！否則Undefined注意：目標(biāo)窗口，必須監(jiān)聽，才有效果！目錄接收參數(shù)時(shí)，使用 data.detail.事件名


修改phone.html

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

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

//如果是 index就是"HBuilder"

// 使用fire事件,發(fā)送一個(gè)數(shù)據(jù)對(duì)象
mui.fire(main,"talk",{talk:"我讓你說啥，你就給我說啥"})

})

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

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

?storage

Storage模塊管理應(yīng)用本地?cái)?shù)據(jù)存儲(chǔ)區(qū)，用于應(yīng)用數(shù)據(jù)的保存和讀取。 應(yīng)用本地?cái)?shù)據(jù)與localStorage、sessionStorage的區(qū)別在于數(shù)據(jù)有效域不同，前者可在應(yīng)用內(nèi)跨域操作，數(shù)據(jù)存儲(chǔ)期是持久化的，并且沒有容量限制。 通過plus.storage可獲取應(yīng)用本地?cái)?shù)據(jù)管理對(duì)象。 getLength: 獲取應(yīng)用存儲(chǔ)區(qū)中保存的鍵值對(duì)的個(gè)數(shù) getItem: 通過鍵(key)檢索獲取應(yīng)用存儲(chǔ)的值 setItem: 修改或添加鍵值(key-value)對(duì)數(shù)據(jù)到應(yīng)用數(shù)據(jù)存儲(chǔ)中 removeItem: 通過key值刪除鍵值對(duì)存儲(chǔ)的數(shù)據(jù) clear: 清除應(yīng)用所有的鍵值對(duì)存儲(chǔ)數(shù)據(jù) key: 獲取鍵值對(duì)中指定索引值的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")// 觸發(fā)fire事件,發(fā)送數(shù)據(jù)// mui.fire(index,"login",{msg:data.msg + data.data.user_id})mui.toast(data.msg + data.data.user_id);//修改或添加鍵值(key-value)對(duì)數(shù)據(jù)到應(yīng)用數(shù)據(jù)存儲(chǔ)中plus.storage.setItem("user", data.data.user_id);mui.openWindow({url: "user_info.html",id: "user_info.html",styles: window.styles,//使用 extras實(shí)現(xiàn)頁面間傳值extras: {// 傳輸user_iduser_id: data.data.user_id}})} else {mui.toast(data.msg)}}, 'json' ); -------------------------------------------------------------- document.getElementById("logout").addEventListener("tap", function() {// 刪除storage里面的user屬性plus.storage.removeItem("user")// 跳轉(zhuǎn)頁面login.htmlmui.openWindow({url: "login.html",id: "login.html",styles: window.styles}) })

?

轉(zhuǎn)載于:https://www.cnblogs.com/zaizai1573/p/10743474.html

總結(jié)

以上是生活随笔為你收集整理的html5+hbuilder+夜神模拟器+webview的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。