最近在項目中要求用 webview 展示幾個界面， 而后台返回的不是 html 而是 json 數據。
起初用 StringBuilder 一個一個拼 html， 后來感覺太繁瑣，拼一個還行，拼多了就無語了，為什么不用 js 模板引擎呢
先看一下效果，經測試速度還可以。
js 模板引擎有很多，像 jquery 創始人寫的微型模板 artTemplate template BaiduTemplate juicer ......
有些依賴於 jqury node.js 等第三方庫， 純原生 js 的也很多。
js 模板引擎在瀏覽器中用的非常多， 在 server 端和 手機端用的相對少一些。
我用 artTemplate 做了個 demo
1 准備 html 模板，引入模板引擎，寫好模板， 不知道 artTemplate 用法的可以先了解一下
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="template.js"></script> <style type="text/css"> body{ letter-spacing:1px; //text-align:center; } .title{ color:#D55F52; padding : 10px 0px 10px 0px; } .subtitle{ background-color:#FAFAFA; padding:2px; margin-top:5px; } .divtop{ background-color:#F0F0F0; margin : 10px 0px 10px 0px; } .divimg{ margin : 10px 0px 10px 0px; } td.tdclass1{ background-color:#C54549; text-align:center; width:100px; height : 22px; color:#FFFFFF; font-size : 12px; } table{ width : 100%; } td.tdclass2{ background-color:#FAFAFA; text-align:center; width:100px; height : 50px; color:#9B9B9B; } td .span1{ font-size : 12px; color : #CB5D60; } </style> <script id="stocktpl" type="text/html"> <div class="title"><%=title%></div> <div class="subtitle"><%=date%> 作者</div> <div class="divtop"> <table> <tr> <td class="tdclass1">評級</td><td class="tdclass1">市值</td><td class="tdclass1">近三月漲幅</td> </tr> <tr> <td class="tdclass2"><%=rating%></td><td class="tdclass2"><%=marketValue%>億 <span class="span1">RMB</span></td><td class="tdclass2"><%=increase%>%</td> </tr> <tr> <td class="tdclass1">最新收盤價</td><td class="tdclass1">目標價</td><td class="tdclass1">預期收益率</td> </tr> <tr> <td class="tdclass2"><%=closingPrice%> <sapn class="span1">RMB</span></td><td class="tdclass2"><%=targetPrice%> <span class="span1">RMB</span></td><td class="tdclass2"><%=expectedReturn%>%</td> </tr> </table> </div> <div class="divimg"> <img src="http://s10.sinaimg.cn/mw690/001HvAkMgy6GWxCZdCp59&690" alt="" href="#"> </div> <div><%=content%></div> </script> </head> <body> <div id="contentTop"></div> <script> /* var data = { "id": 100001, "date": "2014-01-20", "ticker": "300037", "title": "特斯拉的小伙伴，新能源的領頭羊", "abstract": "目前市場主題投資原因在於特斯拉", "rating": "買入", "increase": "15.54", "content": "特斯拉汽車公司，一家生產和銷售電動汽車以及零件的公司，只制造純電動車，成立於2003年，總部設在了美國加州的硅谷地帶[1]。其創始人馬丁·艾伯哈德是硅谷工程師、資深車迷，而投資人是SpaceX，Paypal的創始人埃隆·馬斯克。[2]\n特斯拉汽車公司是世界上第一個采用鋰離子電池的電動車公司。其推出的首部電動車為Roadster[1]。\n特斯拉Tesla汽車集獨特的造型、高效的加速、良好的操控性能與先進的技術為一身，從而使其成為公路上最快且最為節省燃料的車子。[3]特斯拉得名於美國物理學家以及電力工程師尼古拉-特斯拉的塞爾維亞姓。[4]", "stockName": "新宙邦", "stockImageUrl": "http://", "marketValue": "322.0", "closingPrice": "28.47", "targetPrice": "35.6", "expectedReturn": "25.04" }; */ // parse the returned json string var data = JSON.parse(window.java.getJson()); var html = template.render('stocktpl', data); document.getElementById('contentTop').innerHTML = html; </script> </body> </html>
2 java 中從后台取回 json 數據
webview.addJavascriptInterface(new Object() { @JavascriptInterface public String getJson() { return json; } }, "java"); webview.loadUrl("file:///android_asset/stock.html");
3 js 中調 java 拿到數據 parse 成 json 對象, ok 剩下的就讓模板引擎去做了
主要就是 java 和 js 的交互了
var data = JSON.parse(window.java.getJson());
其實和瀏覽器中使用是一樣的。
還有一種思路就是 java 調用 js, java 拿到數據后調用 js 方法並傳入數據， 然后模板引擎刷出界面。
但網上有人說 java 調 js 速度較慢， js 調 java 速度較快，到底哪個快沒有測試過。