ExMobi+Agile Lite開發內置瀏覽器APP
微信對內置瀏覽器的定製封裝，使得H5的流量入口再次從新被定義。在原生程序中使用H5也成爲很是必要的一種搭配。這也得益於H5對於簡單的瀏覽性質的內容能夠很好的進行展示和傳播。javascript
因爲在實際項目中有須要在移動端使用到H5，而大部分H5頁面都是來源於網絡的，因此這裏嘗試使用ExMobi+Agile Lite來開發一個內置瀏覽器的功能。css
相對於傳統的瀏覽器功能，因爲移動端具備豐富的本地能力能夠調用，好比：二維碼掃描、本地存儲、各種第三方SDK分享等等，讓移動端的瀏覽器能夠更加個性化。html
而咱們通常看到的移動端瀏覽器功能一般包括：java
1.輸入地址跳轉頁面或者輸入關鍵字搜索。jquery
2.更夠掃描二維碼讀取地址信息等進行展現。web
3.可以前進、後退、刷新頁面等基本導航操做。瀏覽器
4.能夠收藏某些頁面微信
5.能夠將頁面進行社會化分享。網絡
更大一些的瀏覽器還能夠作本身的門戶，有本身的用戶體系等等。app
選擇ExMobi + Agile Lite，主要是因爲ExMobi有強大的UI展示能力能夠支持原生UI和webview的多窗口混合展示，以及豐富的本地能力以及與第三方SDK集成的接口，能夠方便調用攝像頭、GPS、第三方SDK等能力，而Agile Lite做爲開源、靈活的H5框架，對H5門戶的UI和交互處理很是便捷，並且它內置了不少操做ExMobi本地能力的JS橋接類。
因爲如今處於起步階段，暫時功能作到1/2/3，首頁的門戶也比較簡單，後續會把各個部分和多窗口支持起來。
目前代碼很簡單，只須要兩個頁面，若干圖片和Agile Lite框架就能夠。
先上效果圖再上源碼：
首頁門戶，目前只是一些熱門的網站的連接，後續能夠藉助ExMobi服務端的集成能力抓爬和採集一些熱門的資訊/新聞/天氣等信息進行展示，還能夠結合企業系統把企業的一些待辦信息在此進行展現，造成一個以h5爲入口的企業門戶。
點擊門戶的淘寶icon就會跳轉打開淘寶手機版頁面。固然若是作爲企業使用，也能夠經過門戶來打開獨立的app程序而不單單是H5連接地址。
若是用戶輸入的是關鍵字，自動調用百度進行搜索，後續規劃中會搭建一個內部搜索系統，能夠對內部信息和系統進行查詢，返回符合企業信息的數據，展現的內容相較於百度搜索會更加豐富，能夠是圖文/音頻/連接/app等，甚至還有一些實時的推送消息。
目前的瀏覽器客戶端還很簡單，只有兩個頁面，一個是UIXML，一個是HTML頁面，其中UIXML頁面做爲程序首頁展示一個原生窗口和部分原生UI，中間放置一個webview組件指向HTML頁面展現門戶。
UIXML頁面的代碼以下：
<header> <div style="border-size:0; background-color: #ffffff;"> <input type="text" id="urlDom" style="width:80%;border-size: 0;" prompt="請輸入網址或關鍵字"></input> <div style="width: 20%; text-align: right; padding:0 6 0 0;" id="goBtn" href="doGo()"> <img class="footer_menu" src="res:image/app/ic_menu_search_holo_light.png"></img> </div> <hr/> </div> </header> <body style="padding:0;margin:0;" onload="doLoad()"> <webview id="wvDom" url="" plusready="doReady()" backmonitor="true"></webview> </body> <footer style="padding:10 0;"> <div style="width: 25%; text-align: center;"> <img class="footer_menu" id="backBtn" href="doBack()" src="res:image/app/back.png"></img> </div> <div style="width: 25%; text-align: center;"> <img class="footer_menu" id="forwardBtn" href="doForward()" src="res:image/app/forward.png"></img> </div> <div style="width: 25%; text-align: center;"> <img class="footer_menu" id="refreshBtn" href="doRefresh()" src="res:image/app/ refresh.png"></img> </div> <div style="width: 25%; text-align: center;"> <img class="footer_menu" id="scalBtn" href="doScal()" src="res:image/app/qrcode.png"></img> </div> </footer>
這裏充分利用的了ExMobi的UIXML原生組件進行佈局，構建原生的窗口，在窗口頂部和底部放置原生的按鈕組件以及支持h5的webview組件，經過JS來達到原生UI與h5的交互，實現前進、後退、刷新、掃描、搜索等功能，這個頁面裏執行了一些函數，以下：
var BMC = function(options){
this.opts = {
wvDom : document.getElementById(options.wvDom),
firstUrl : options.firstUrl
};
};
BMC.prototype.utils = {};
BMC.prototype.utils.checkURL = function(URL){
var str= URL||'';
var Expression = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
var objExp = new RegExp(Expression);
return objExp.test(str);
};
BMC.prototype.utils.showToast = function(msg){
var toast = new Toast();
toast.setText(msg);
toast.setDuration(1000);
toast.show();
};
BMC.prototype.getOpts = function(){
return this.opts;
};
BMC.prototype.init = function(){
var opts = this.opts;
opts.wvDom.loadUrl(opts.firstUrl);
};
BMC.prototype.go = function(url){
if(!url){
alert('請輸入網址');
return;
}
if(this.utils.checkURL(url)){
this.opts.wvDom.loadUrl(url);
}else if(this.utils.checkURL('http://'+url)){
this.opts.wvDom.loadUrl('http://'+url);
}else{
this.opts.wvDom.loadUrl('http://m.baidu.com/s?word='+EncryptionUtil.urlEncode(url, 1));
}
};
BMC.prototype.refresh = function(){
this.opts.wvDom.refresh();
};
BMC.prototype.back = function(){
if(!this.opts.wvDom.canBack()){
this.utils.showToast('已是第一頁了');
return;
}
this.opts.wvDom.back();
};
BMC.prototype.forward = function(){
if(!this.opts.wvDom.canForward()){
this.utils.showToast('已是最後一頁了');
return;
}
this.opts.wvDom.forward();
};
function doLoad(){
var url = 'res:page/www/index.html';
var bmc = new BMC({
wvDom : 'wvDom',
firstUrl : url
});
window.doReady = function(){
var opts = bmc.getOpts();
var url = opts.wvDom.getUrl();
var urlDom = document.getElementById('urlDom');
urlDom.value = url.indexOf('file')==0?'':url;
opts.wvDom.executeScript('document.addEventListener("backmonitor",function(){ nativePage.executeScript("doCheckBack()"); history.go(-1);}, false);');
}
window.doGo = function(){
var url = document.getElementById('urlDom').value;
bmc.go(url);
};
window.doBack = function(){
bmc.back();
};
window.doForward = function(){
bmc.forward();
};
window.doRefresh = function(){
bmc.refresh();
};
window.decode = new Decode();
window.doScal = function(){
decode.onCallback = decodeCallback;/*設置解碼結束回調函數*/
decode.startDecode();/*開始解碼*/
};
window.decodeCallback = function(){
if(!decode.isSuccess()){/*返回解碼是否成功*/
bmc.utils.showToast('二維碼錯誤');
}else{
bmc.go(decode.result);
}
};
window.doCheckBack = function(){
var opts = bmc.getOpts();
if(!opts.wvDom.canBack()) close();
}
bmc.init();
}
能夠看出，代碼中主要操做的就是ExMobi的webview組件，以達到對h5頁面的控制。、
再來看看HTMML頁面代碼：
<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>首頁</title>
<link rel="stylesheet" href="assets/agile/css/agile.layout.css">
<link rel="stylesheet" href="assets/agile/css/flat/flat.component.css">
<link rel="stylesheet" href="assets/agile/css/flat/flat.color.css">
<link rel="stylesheet" href="assets/agile/css/flat/iconline.css">
<link rel="stylesheet" href="assets/agile/css/flat/iconlogo.css">
</head>
<body >
<div id="section_container">
<section id="icon_logo_section" data-role="section" class="active">
<article data-role="article" id="main_article" data-scroll="verticle" class="active" style="top:0px;bottom:0px;">
<div class="scroller padded text-center">
<div class="grid" data-col="3">
<div class="grid-cell" data-href="http://www.qq.com">
<div class="grid-img bg-alizarin"><span class="iconfont iconlogo-logo-qq"></span></div>
<label class="grid-label">騰訊</label>
</div>
<div class="grid-cell" data-href="http://www.taobao.com">
<div class="grid-img bg-carrot"><span class="iconfont iconlogo-logo-taobao"></span></div>
<label class="grid-label">淘寶</label>
</div>
<div class="grid-cell" data-href="http://m.baidu.com">
<div class="grid-img bg-peter-river"><span class="iconfont iconlogo-logo-baidu"></span></div>
<label class="grid-label">百度</label>
</div>
<div class="grid-cell" data-href="http://m.weibo.cn">
<div class="grid-img bg-wet-asphalt"><span class="iconfont iconlogo-logo-sinaweibo"></span></div>
<label class="grid-label">微博</label>
</div>
<div class="grid-cell" data-href="http://weixin.qq.com/">
<div class="grid-img bg-nephritis"><span class="iconfont iconlogo-logo-wechat"></span></div>
<label class="grid-label">微信</label>
</div>
<div class="grid-cell" data-href="http://www.fhss.com.cn/">
<div class="grid-img bg-orange"><span class="iconfont iconlogo-logo-starrysky"></span></div>
<label class="grid-label">烽火</label>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
</section>
</div>
<!--- third --->
<script src="assets/third/jquery/jquery-2.1.3.min.js"></script>
<script src="assets/third/jquery/jquery.mobile.custom.min.js"></script>
<script src="assets/third/iscroll/iscroll-probe.js"></script>
<script src="assets/third/arttemplate/template-native.js"></script>
<!-- agile -->
<script type="text/javascript" src="assets/agile/js/agile.js"></script>
<!-- app -->
<script type="text/javascript" src="assets/app/js/app.js"></script>
<script>
$('[data-href]').on(A.options.clickEvent, function(){
location.href = $(this).data('href');
return false;
})
</script>
</body>
</html>
因爲功能比較簡單，主要是引用了Agile Lite框架的基本JS和CSS進行佈局。
咱們能夠看到，在UIXML中的佈局既有UIXML原生組件，也能夠由webview組件展現H5，可讓原生UI和H5界面展示更好的融合在一塊兒，相互搭配。
而UIXML中也調用了ExMobi提供的二維碼掃描JS API，後面要作的本地收藏、社會化分享等ExMobi都有很好的支持。特別是ExMobi特有的支持的多窗口模式，一個應用中能夠打開多個UIXML文件，也就是一個一個獨立的窗口，而且都具備原生窗口的生命週期事件繼承，可讓頁面之間的交互更加靈活。
後續的新功能再更新咯。
相關文章
- 1. 判斷qq內置瀏覽器和微信內置瀏覽器
- 2. web開發之瀏覽器（一）----常見瀏覽器及內核
- 3. 瀏覽器開發
- 4. eclipse 重啓/打開內置瀏覽器
- 5. C# 開發Chrome內核瀏覽器(WebKit.net)
- 6. swing內嵌瀏覽器的開發
- 7. Eclipse 內置瀏覽器
- 8. Unity3d內置瀏覽器
- 9. 瀏覽器內打開QQ
- 10. eclipse開發工具技巧之打開內置瀏覽器
- 更多相關文章...
- • Eclipse 內置瀏覽器 - Eclipse 教程
- • XSLT 瀏覽器 - XSLT 教程
- • PHP開發工具
- • Docker容器實戰(七) - 容器眼光下的文件系統
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 判斷qq內置瀏覽器和微信內置瀏覽器
- 2. web開發之瀏覽器（一）----常見瀏覽器及內核
- 3. 瀏覽器開發
- 4. eclipse 重啓/打開內置瀏覽器
- 5. C# 開發Chrome內核瀏覽器(WebKit.net)
- 6. swing內嵌瀏覽器的開發
- 7. Eclipse 內置瀏覽器
- 8. Unity3d內置瀏覽器
- 9. 瀏覽器內打開QQ
- 10. eclipse開發工具技巧之打開內置瀏覽器