手機內嵌html5頁面開發(根據MUI框架)
1. 先安裝開發工具HBuilder:工具內內嵌的有tomcat(自動啓動加載),可連接手機直接打包成 app發佈到手機上
2. 在HBuilder中導入MUI常用頁面效果實例 (當前文件夾下的hello-mui) 附:文檔說明地址http://dev.dcloud.net.cn/mui/ui/
3.操作手機硬件H5+則參考網址:http://www.html5plus.org/doc/h5p.html
常用方法
1.打開新頁面傳值
發送:
mui.openWindow({
url:'info.html',
id:'info.html',
extras:{
name:'mui',
version:'0.5.8'
}
});
接收:
var self = plus.webview.currentWebview();
var name = self.name;
var version = self.version;
2.已經打開頁面之間的傳值(自定義事件)
發送:
當前頁面: var currentView=plus.webview.currentWebview();
當前子頁面:var cView=plus.webview.currentWebview().children()[0];
當前父頁面:var cView=plus.webview.currentWebview().parent();
當前頁面的創建頁面:var cView=plus.webview.opener();
起始頁面:var launchView=plus.webview.getLaunchWebview();
根據id獲得頁面: var index=plus.webview.getWebviewById("backHtml");
mui.fire(webView,"index_home",{
"areaName":name
});
接收端
window.addEventListener('index_home', function(event) {
var areaNamehtml = document.getElementById("areaName");
areaNamehtml.innerHTML=event.detail.areaName;
});
//可以單獨定義方法名
window.addEventListener("swipeleft",closeMenu);
function closeMenu () {}
3.頁面事件綁定
使用html5統一寫法document.getElementById("button").addEventListener('tap事件代碼見下方',
function() {
alert(1);
});
2.列表類綁定事件
mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
//獲取id
var id = this.getAttribute("id");
//進行處理
//...
})
注意:MUI的TAP事件在部分手機上會執行2次
事件代碼:
分類 | 參數 | 描述 |
點擊 | tap | 單擊屏幕 |
doubletap | 雙擊屏幕 | |
長按 | longtap | 長按屏幕 |
hold | 按住屏幕 | |
release | 離開屏幕 | |
滑動 | swipeleft | 向左滑動 |
swiperight | 向右滑動 | |
swipeup | 向上滑動 | |
swipedown | 向下滑動 | |
拖動 | dragstart | 開始拖動 |
drag | 拖動中 | |
dragend | 拖動結束 |
4.本地存儲參數(與服務器端session類似)注:只能存儲字符串,數字存不進
存值:
plus.storage.setItem('uuid', result.uuid);
取值:
plus.storage.getItem('uuid);
5. Ajax 請求使用
mui.post('http://server-name/login.php',{
username:'username',
password:'password'
},function(data){
//服務器返回響應，根據響應結果，分析是否登錄成功；
...
},'json');
2.
mui.ajax(url, {
data: {},
dataType: 'json', //服務器返回json格式數據
type: 'post', //HTTP請求類型
timeout: 10000, //超時時間設置爲10秒；
success: function(data) {
},
error: function(xhr, type, errorThrown) {
//異常處理；
plus.nativeUI.closeWaiting();
plus.nativeUI.toast("檢查更新失敗，請稍後再試");
console.log(type);
}
});
6.關閉,刷新,返回,加載中
關閉:
var ws=plus.webview.currentWebview();
plus.webview.close(ws);//可以是窗口對象或者id
mui.back();//當前頁面關閉
刷新:
location.reload();
加載中
plus.nativeUI.showWaiting("加載中");
plus.nativeUI.closeWaiting();
7.監控返回操作,刷新上一個頁面
mui.plusReady(function() {
var old_back = mui.back;
mui.back = function() {
var opener = plus.webview.currentWebview().opener();
opener.reload()
old_back();
}
});
8.首頁模擬選項卡點擊切換
var defaultTab = document.getElementById("defaultTab");//選項卡id
//模擬首頁點擊
mui.trigger(defaultTab, 'tap');
//切換選項卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if(defaultTab !== current) {
current.classList.remove('mui-active');
defaultTab.classList.add('mui-active');
}