如今使用混合开发的公司越来越多，尽管出现了一些新技术，比方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：则加前缀：file:///android_asset/
- 假设html文件存于sdcard：则加前缀：content://com.android.htmlfileprovider/sdcard/
PS：content前缀可能导致异常，直接使用file:///sdcard/ 或者 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()便知不属于同一个线程。解决方式：
mWebView.post(new Runnable() {
@Override
public void run() {
mWebView.loadUrl("javascript:" + data);
}
});代码还未从公司项目中剥离，眼下不上传了，如有错误或者补充，多多不吝赐教。
如今使用混合开发的公司越来越多，尽管出现了一些新技术，比方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：则加前缀：file:///android_asset/
- 假设html文件存于sdcard：则加前缀：content://com.android.htmlfileprovider/sdcard/
PS：content前缀可能导致异常，直接使用file:///sdcard/ 或者 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()便知不属于同一个线程。解决方式：
mWebView.post(new Runnable() {
@Override
public void run() {
mWebView.loadUrl("javascript:" + data);
}
});代码还未从公司项目中剥离，眼下不上传了，如有错误或者补充，多多不吝赐教。
