如今使用混合开发的公司越来越多,尽管出现了一些新技术,比方Facebook的react native、阿里的weex,但依旧阻挡不了一些公司採用h5的决心。当然,这也是从多方面考虑的选择。


  在三年前就使用过html5混合开发,当时做的是一款贵金属软件,涨跌五线谱、乾坤交易,还有各个股市的信息,那时候还是上波牛市爆发的前夕,哎……


  近期公司让用h5混合开发。一些页面和功能有h5分担,最初时候放在本地assets目录下,后来因为前端同事频繁改动和更新。再加上数据安全方面考虑,决定把包放在server。採用接口返回字段,推断是否须要下载更新。接下来就谈下开发中遇到的几个坑。给自己做个笔记,也分享给须要的朋友。


  首坑:Android系统


  对于h5的混合开发,Android系统就是个大坑,三年前接入h5点时候,那时候好多手机卡的跟ppt似的,4.0后Google进行了一些优化,效率上确实好了非常多。但后面又来了一系列巨坑。比方4.3之前一个内核,4.3一个单独内核,4.3之后又是一个内核,原生的WebView没法做到总体兼容,最后採取了一个方案。使用大企鹅的x5内核,长处例如以下:


  里面类名和方法名,和原生的名称差点儿是一样的,使用更方便


  QQ和微信都是採用x5内核,内核共享。不须要单独下载


  兼容性相对较好


  二坑:DownloadManager。


  最初的方案是採用系统下类DownloadManager,既然是系统提供的,非常多码友肯定认为非常OK的。可是爆破部队瞎搞,三星的手机系统却把DownloadManager的api删了。这尼玛就恶心了,你还是继续玩爆炸吧……


  三坑:webview载入不显示


  之前放在assets的时候。页面显示的非常6,换成下载到本地读取,竟然不显示了,打印下路径,没问题。那就能够确定问题出在了载入过程了。查了下资料发现。能够是用loadData。这样的方法须要先将html文件读取出来。以字符串传入loadData,能够展示页面,可是不会引用css、js等文件。也能够使用loadUrl。只是须要注意,这里因为是使用本地数据,所以传入的url须要做些处理,比如:


  假设html文件存于assets:则加前缀:


  假设html文件存于sdcard:则加前缀:


  PS:content前缀可能导致异常,直接使用 或者 file:/sdcard也能够


  四坑:特殊字符的转义


  有一个页面。iOS同事那边一直显示正常,Android这边怎么都出不来,相同页面不同数据的页面就显示页面。当时就认为非常奇怪,不应该是h5点问题。要不iOS也不会显示,打印了URL一看,擦,URL中有一个”%”,转义后便OK了。当然,依据须要另一些特殊字符也须要转义。”%”仅仅是一个个例。


  五坑:部分手机报错不显示


  A WebView method was called on thread ‘JavaBridge’。 All WebView methods must be called on the same thread。


  这是因为部分手机WebView中方法必须在同一个线程。通过打印Thread.currentThread()便知不属于同一个线程。解决方式:


  代码还未从公司项目中剥离,眼下不上传了,如有错误或者补充,多多不吝赐教。

相关文章

9个鲜为人知的HTML功能 小白怎么学习HTML5?新手入门必看 阿里巴巴常用的12个后端开发工具 sharepoint搭建文档服务器,SharePoint?Server教程 语义化标签与HTML5新增的布局标签 vector教程:如何进行项目 JetBrains PhpStorm v2021.2.0中文激活版 HTML5教程之新元素 前端基础入门:HTML5基础语法与标签 HTML5——SVG基础入门 android是前端还是后端 嵌入式开发要学哪些技能? 使用fiddler对手机APP进行抓包 HTML5薪资正一路飙升 如何才能学好HTML5开发 零基础如何迅速学习前端? html5中怎么利用canvas元素创建画布 实现html5移动端自适应布局的方法分享 HTML5移动应用开发 最佳HTML5应用开发工具有哪些? HTML5 移动页面自适应手机屏幕四类方法 html5手机网站常用的9个CSS属性 什么是web前端开发标准 Android开发用过的十大框架 Android混合开发,html5自己主动更新爬过的坑 HTML5中的移动开发框架有哪些? 分享5个主流的HTML5开发工具 HTML5开发培训教程学习之动效制作 网页开发HTML5 快速开发基于 HTML5 网络拓扑图应用 如何零基础入门前端开发? html5零基础入门学习教程(零基础学员必看) jquery删除ajax请求的方法 jquery中ajax中的参数,jquery中的ajax参数 jQuery AJAX 方法success()后台传来的4种数据详解 jquery中ajax常用的方法,jQuery ajax框架常用方法总结 jQuery AJAX中readyState与status的区别与联系 jquery ajax.then,神奇的then方法 jQuery validate+artdialog+jquery form实现弹出表单思路详解 ajax用来做什么的,jQuery是什么? java jquery ajax视频,【Ajax】之jQuery中的Ajax jquery中ajax应用之通用ajax()函数的实例 BootStrop前端框架入门教程详解 jQuery WEUI Select jquery是什么意思?jquery和js的区别是什么? 巧用案例学习jQuery框架三种事件绑定方式 jQuery 基础知识总结 引入JQuery.min.js文件 几款常用的高质量web前端框架 Jquery和bootstrap有哪些区别 easyui 验证 ajax提交表单提交表单提交