微信对内置浏览器的定制封装，使得H5的流量入口再次重新被定义。在原生程序中使用H5也成为非常必要的一种搭配。这也得益于H5对于简单的浏览性质的内容可以很好的进行展现和传播。
由于在实际项目中有需要在移动端使用到H5，而大部分H5页面都是来源于网络的，所以这里尝试使用ExMobi+Agile Lite来开发一个内置浏览器的功能。
相对于传统的浏览器功能，由于移动端具有丰富的本地能力可以调用，比如：二维码扫描、本地存储、各类第三方SDK分享等等，让移动端的浏览器可以更加个性化。
而我们一般看到的移动端浏览器功能通常包括：
1.输入地址跳转页面或者输入关键字搜索。
2.更够扫描二维码读取地址信息等进行展示。
3.能够前进、后退、刷新页面等基本导航操作。
4.可以收藏某些页面
5.可以将页面进行社会化分享。
更大一些的浏览器还可以做自己的门户，有自己的用户体系等等。
选择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页面的代码如下：
1<header> 2 <div style="border-size:0; background-color: #ffffff;"> 3 <input type="text" id="urlDom" style="width:80%;border-size: 0;" prompt="请输入网址或关键字"></input> 4 <div style="width: 20%; text-align: right; padding:0 6 0 0;" id="goBtn" href="doGo()"> 5 <img class="footer_menu" src="res:image/app/ic_menu_search_holo_light.png"></img> 6 </div> 7 <hr/> 8 </div> 9 10 </header> 11 12 <body style="padding:0;margin:0;" onload="doLoad()"> 13 <webview id="wvDom" url="" plusready="doReady()" backmonitor="true"></webview> 14 </body> 15 <footer style="padding:10 0;"> 16 <div style="width: 25%; text-align: center;"> 17 <img class="footer_menu" id="backBtn" href="doBack()" src="res:image/app/back.png"></img> 18 </div> 19 <div style="width: 25%; text-align: center;"> 20 <img class="footer_menu" id="forwardBtn" href="doForward()" src="res:image/app/forward.png"></img> 21 </div> 22 <div style="width: 25%; text-align: center;"> 23 <img class="footer_menu" id="refreshBtn" href="doRefresh()" src="res:image/app/ refresh.png"></img> 24 </div> 25 <div style="width: 25%; text-align: center;"> 26 <img class="footer_menu" id="scalBtn" href="doScal()" src="res:image/app/qrcode.png"></img> 27 </div> 28 </footer>
这里充分利用的了ExMobi的UIXML原生组件进行布局，构建原生的窗口，在窗口顶部和底部放置原生的按钮组件以及支持h5的webview组件，通过JS来达到原生UI与h5的交互，实现前进、后退、刷新、扫描、搜索等功能，这个页面里执行了一些函数，如下：
1var BMC = function(options){ 2 this.opts = { 3 wvDom : document.getElementById(options.wvDom), 4 firstUrl : options.firstUrl 5 }; 6 }; 7 8 BMC.prototype.utils = {}; 9 BMC.prototype.utils.checkURL = function(URL){ 10 var str= URL||''; 11 var Expression = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/; 12 var objExp = new RegExp(Expression); 13 return objExp.test(str); 14 }; 15 16 BMC.prototype.utils.showToast = function(msg){ 17 var toast = new Toast(); 18 toast.setText(msg); 19 toast.setDuration(1000); 20 toast.show(); 21 }; 22 23 BMC.prototype.getOpts = function(){ 24 return this.opts; 25 }; 26 27 BMC.prototype.init = function(){ 28 var opts = this.opts; 29 opts.wvDom.loadUrl(opts.firstUrl); 30 }; 31 32 BMC.prototype.go = function(url){ 33 if(!url){ 34 alert('请输入网址'); 35 return; 36 } 37 if(this.utils.checkURL(url)){ 38 this.opts.wvDom.loadUrl(url); 39 }else if(this.utils.checkURL('http://'+url)){ 40 this.opts.wvDom.loadUrl('http://'+url); 41 }else{ 42 this.opts.wvDom.loadUrl('http://m.baidu.com/s?word='+EncryptionUtil.urlEncode(url, 1)); 43 } 44 }; 45 46 BMC.prototype.refresh = function(){ 47 this.opts.wvDom.refresh(); 48 }; 49 50 BMC.prototype.back = function(){ 51 if(!this.opts.wvDom.canBack()){ 52 this.utils.showToast('已经是第一页了'); 53 return; 54 } 55 this.opts.wvDom.back(); 56 }; 57 58 BMC.prototype.forward = function(){ 59 if(!this.opts.wvDom.canForward()){ 60 this.utils.showToast('已经是最后一页了'); 61 return; 62 } 63 this.opts.wvDom.forward(); 64 }; 65 66 function doLoad(){ 67 var url = 'res:page/www/index.html'; 68 var bmc = new BMC({ 69 wvDom : 'wvDom', 70 firstUrl : url 71 }); 72 73 window.doReady = function(){ 74 var opts = bmc.getOpts(); 75 var url = opts.wvDom.getUrl(); 76 var urlDom = document.getElementById('urlDom'); 77 urlDom.value = url.indexOf('file')==0?'':url; 78 79 opts.wvDom.executeScript('document.addEventListener("backmonitor",function(){ nativePage.executeScript("doCheckBack()"); history.go(-1);}, false);'); 80 } 81 82 window.doGo = function(){ 83 var url = document.getElementById('urlDom').value; 84 bmc.go(url); 85 }; 86 87 window.doBack = function(){ 88 bmc.back(); 89 }; 90 91 window.doForward = function(){ 92 bmc.forward(); 93 }; 94 95 window.doRefresh = function(){ 96 bmc.refresh(); 97 }; 98 99 window.decode = new Decode(); 100 window.doScal = function(){ 101 decode.onCallback = decodeCallback;/*设置解码结束回调函数*/ 102 decode.startDecode();/*开始解码*/ 103 }; 104 105 window.decodeCallback = function(){ 106 if(!decode.isSuccess()){/*返回解码是否成功*/ 107 bmc.utils.showToast('二维码错误'); 108 }else{ 109 bmc.go(decode.result); 110 } 111 }; 112 113 window.doCheckBack = function(){ 114 var opts = bmc.getOpts(); 115 if(!opts.wvDom.canBack()) close(); 116 } 117 118 bmc.init(); 119 }
可以看出，代码中主要操作的就是ExMobi的webview组件，以达到对h5页面的控制。、
再来看看HTMML页面代码：
1<!-- HTML5文件 --> 2<!DOCTYPE html> 3<html> 4 <head> 5 <meta charset="utf-8"/> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 7 <title>首页</title> 8 <link rel="stylesheet" href="assets/agile/css/agile.layout.css"> 9 <link rel="stylesheet" href="assets/agile/css/flat/flat.component.css"> 10 <link rel="stylesheet" href="assets/agile/css/flat/flat.color.css"> 11 <link rel="stylesheet" href="assets/agile/css/flat/iconline.css"> 12 <link rel="stylesheet" href="assets/agile/css/flat/iconlogo.css"> 13 </head> 14 <body > 15 <div id="section_container"> 16 <section id="icon_logo_section" data-role="section" class="active"> 17 <article data-role="article" id="main_article" data-scroll="verticle" class="active" style="top:0px;bottom:0px;"> 18 <div class="scroller padded text-center"> 19 <div class="grid" data-col="3"> 20 <div class="grid-cell" data-href="http://www.qq.com"> 21 <div class="grid-img bg-alizarin"><span class="iconfont iconlogo-logo-qq"></span></div> 22 <label class="grid-label">腾讯</label> 23 </div> 24 25 26 <div class="grid-cell" data-href="http://www.taobao.com"> 27 <div class="grid-img bg-carrot"><span class="iconfont iconlogo-logo-taobao"></span></div> 28 <label class="grid-label">淘宝</label> 29 </div> 30 31 <div class="grid-cell" data-href="http://m.baidu.com"> 32 <div class="grid-img bg-peter-river"><span class="iconfont iconlogo-logo-baidu"></span></div> 33 <label class="grid-label">百度</label> 34 </div> 35 36 <div class="grid-cell" data-href="http://m.weibo.cn"> 37 <div class="grid-img bg-wet-asphalt"><span class="iconfont iconlogo-logo-sinaweibo"></span></div> 38 <label class="grid-label">微博</label> 39 </div> 40 41 <div class="grid-cell" data-href="http://weixin.qq.com/"> 42 <div class="grid-img bg-nephritis"><span class="iconfont iconlogo-logo-wechat"></span></div> 43 <label class="grid-label">微信</label> 44 </div> 45 46 <div class="grid-cell" data-href="http://www.fhss.com.cn/"> 47 <div class="grid-img bg-orange"><span class="iconfont iconlogo-logo-starrysky"></span></div> 48 <label class="grid-label">烽火</label> 49 </div> 50 <div class="clearfix"></div> 51 </div> 52 </div> 53 54 </article> 55 </section> 56 </div> 57 58 <!--- third ---> 59 <script src="assets/third/jquery/jquery-2.1.3.min.js"></script> 60 <script src="assets/third/jquery/jquery.mobile.custom.min.js"></script> 61 <script src="assets/third/iscroll/iscroll-probe.js"></script> 62 <script src="assets/third/arttemplate/template-native.js"></script> 63 <!-- agile --> 64 <script type="text/javascript" src="assets/agile/js/agile.js"></script> 65 <!-- app --> 66 <script type="text/javascript" src="assets/app/js/app.js"></script> 67 <script> 68 $('[data-href]').on(A.options.clickEvent, function(){ 69 location.href = $(this).data('href'); 70 return false; 71 }) 72 </script> 73 </body> 74</html>
由于功能比较简单，主要是引用了Agile Lite框架的基本JS和CSS进行布局。
我们可以看到，在UIXML中的布局既有UIXML原生组件，也可以由webview组件展示H5，可以让原生UI和H5界面展现更好的融合在一起，相互搭配。
而UIXML中也调用了ExMobi提供的二维码扫描JS API，后面要做的本地收藏、社会化分享等ExMobi都有很好的支持。特别是ExMobi特有的支持的多窗口模式，一个应用中可以打开多个UIXML文件，也就是一个一个独立的窗口，并且都具有原生窗口的生命周期事件继承，可以让页面之间的交互更加灵活。
后续的新功能再更新咯。