android跨平台开发系列之-综合运用webview和html5结合（三）

最新推荐文章于 2025-03-25 19:51:22 发布

_ArcticOcean

最新推荐文章于 2025-03-25 19:51:22 发布

阅读量1.6k

点赞数

分类专栏： Android APP/UI开发 Android Webview开发

本文链接：https://blog.youkuaiyun.com/sky_pjf/article/details/52422785

版权

Android APP/UI开发同时被 2 个专栏收录

48 篇文章

订阅专栏

Android Webview开发

8 篇文章

订阅专栏

本文介绍了一种C语言框架与HTML5结合的开发方法，通过JNI调用C层解析mobi格式文件并注入JS函数实现特定功能。讨论了如何在Android环境中利用webview加载本地HTML，并介绍了具体的JS函数实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其实我是最近在开发中用到webview的时候才得出的一些使用webview的一些心得体会；记录一下，把知识整合一下，方便以后查阅

最近的一个需求是这样子的：C语言框架是别人写好了的，github上面clone下来的，然后我又专门研究了一下AndroidStudio的JNI自动开发，官方文档说的很详细，方法很多，前面的博客有写到一些这方面的资料，我采用的是采用gradle中的experimental方式，具体操作可以看之前的博客。AndroidStutio JNI/NDK开发(easy) http://blog.youkuaiyun.com/sky_pjf/article/details/52247494；

通过libmobi解析到了mobi格式文本中的html数据等，并且把图片和css资源拿到了本地储存起来，并且将html文本内容数据由JNI从C底层被调用到了Java层，最后通过Java写入到了一个本地html地址，然后这里引出了html5和android结合开发的历程，写入到本地html的同时，我在之中注入了一些js函数方法，比如我在这里面重新注入一个回到第一个a标签的js函数：

String comment = mobi.openMobi(mFilePath + mFileName, dirname);

String result = comment.replace("</html>","<script>function toCatalog() {\n" +
                "        var getPos = function (o) {//取元素坐标\n" +
                "            var  y = 0;\n" +
                "            do {\n" +
                "                y += o.offsetTop;\n" +
                "            } while (o = o.offsetParent);\n" +
                "            return y;\n" +
                "        }\n" +
                "        var allTag = document.getElementsByTagName(\"a\");\n" +
                "        for (var i = 0; i < allTag.length; i++) {\n" +
                "            if (allTag[i].getAttribute(\"href\") != null) {\n" +
                "                window.scrollTo(0, getPos(allTag[i]));//遍历所有a标签，找到第一个带有href属性的，获取高度，并跳出循环\n" +
                "                break;\n" +
                "            }\n" +
                "        }\n" +
                "    }</script></html>");

这样就相当于从C获得的mobi原生html网页给新增了一个toCatalog()函数;

外部调用的话很灵活，只需要调用

mWebView.loadUrl("javascript:(function(){toCatalog();})()");

即可，这样就能由android层决定调用JS这个方法的时机了。

总结：

因为webview本身在android里面封装的api太少了，灵活性很低，所以需要配合javascript进行功能扩展，以便支持更多的webview原生浏览器功能。

我觉得在混合开发中，还是一个不错的选择吧。

epub解析html分页的问题 -- 很好的 js 和webview 实践的资料

http://stackoverflow.com/search?q=epub+html+pages

http://stackoverflow.com/questions/18964259/how-to-split-up-epub-html-into-pages-according-to-screen-size

http://stackoverflow.com/questions/3636052/html-book-like-pagination?tab=active#tab-top