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

android webview 中 js 模板引擎的使用的更多相关文章

  1. android WebView中js的alert()失效

    WebView的设置代码 wv = (WebView) findViewById(R.id.webView1); wv.getSettings().setJavaScriptEnabled(true) ...

  2. Xamarin Android Webview中JS调用App中的C#方法

    参考链接:https://github.com/xamarin/recipes/tree/master/Recipes/android/controls/webview/call_csharp_fro ...

  3. WebView中JS调用Android Method 遇到的坑整理

    WebView是android中常用的一个组件,其作用是展示网页,并让网页和android app进行一些业务逻辑上的交互. 其坑无数,相信用过的都知道,一个一个来解决吧. 1.怎么互调: <! ...

  4. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  5. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  6. JS模板引擎 ：ArtTemplate （2）

    上一篇初略的介绍了一下javascript中的模板引擎,有兴趣的可以戳 这里 . 这一篇将带着大家一起做一个简易的模板引擎, 上一篇介绍到:模板引擎其实做的就是两件事. 根据一定的规则,解析我们所定义 ...

  7. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  8. Filter - Surge.js模板引擎过滤器

    版权所有,转载请注明出处:http://guangboo.org/2014/01/05/filter-surgejs-template-engine 过滤器在surge.js模板引擎中多处用到,其类似 ...

  9. js模板引擎--artTemplate

    js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...

随机推荐

  1. linux 命令学习-网络相关配置

    网络配置相关 网卡配置文件:etc/sysconfig/network-scripts/ifcfg-eth0 DNS 配置文件 etc/resolv.conf 主机配置文件 etc/sysconfig ...

  2. 深入理解java虚拟机（四）垃圾收集算法及HotSpot实现

    垃圾收集算法 一般来说,垃圾收集算法分为四类: 标记-清除算法 最基础的算法便是标记-清除算法(Mark-Sweep).算法分为“标记”和“清除”两个阶段:首先标记处需要收集的对象,在标记完成之后,再 ...

  3. 修复DBGrideh使用TMemTableEh在Footers求平均值为0的Bug

    在一个项目中,使用DBGrideh,当使用自带的内存数据集时,对于Footers添加的求平均值,一直显示为0,其他汇总数据都是可以的,而切换使用TClientDataSet或者TADODataSet, ...

  4. 等等,你可能误解nodejs了–通俗的概括nodejs的真相

    最近刚把产品从cpp平台迁移到nodejs平台了.  很多以前关于nodejs的观念被颠覆了. 这里分享出来, 欢迎大家批评指正. "nodejs是做服务器端开发的, 它一定和web相关,几 ...

  5. python学习之路 三：字符编码

    本节重点 彻底掌握字符编码之前的转换关系 掌握 python2 vs python3 上编码的区别 掌握 python2 和python3 上bytes,str 的区别 补充知识点:三元运算 ​三元运 ...

  6. 题解 UVA11300 【Spreading the Wealth】

    环形均分纸牌问题应该不少人都很熟悉了,而且题解区写的也比较全了...... 我这篇题解主要是介绍一个新的STL--nth_element 以及解答几个其他题解里面有应用但是没有注释的问题.(比如说我第 ...

  7. swoft| 源码解读系列一: 好难! swoft demo 都跑不起来怎么破? docker 了解一下呗~

    title: swoft| 源码解读系列一: 好难! swoft demo 都跑不起来怎么破? docker 了解一下呗~description: 阅读 sowft 框架源码, swoft 第一步, ...

  8. [agc007f] Shik and Copying String 模拟神题

    Description ​ "全"在十分愉快打工,第0天,给了他一个仅有小写字母构成的长度为N的字符串S0,在之后的第i天里,"全"的工作是将Si−1复制一份到 ...

  9. adb命令之pm

    常用的用法: 查看已经安装的包 pm list packages 查看已经安装的包以及apk路径(-3:只看第三方应用: -s:只看系统应用) -f: see their associated fil ...

  10. PHP内核研究 静态变量

    静态变量 它可以是 静态全局变量,如果不调用unset,那么这个静态变量会一直存在,直到程序退出时才由Zend内存管理来释放 它可以是 静态局部变量:在函数里定义,函数执行完后,该静态变量不会消失 它 ...