android webview 中 js 模板引擎的使用

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近在项目中要求用 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 速度较快，到底哪个快没有测试过。