当前位置:

cordova+ionic教程:Ionic浏览器正常真机测试样式错乱解决方法

0

发表时间:2017-09-08    来源:ishouyou.cn

167

cordova开发中用ionic设计的页面浏览器测试都是好的,但用真机测试,就各种奇葩问题,样式各种测试。现在找到解决办法,实际测试无误。一起来看看吧。

为什么ionic真机测试样式会错乱了?

主要原因是ionic官方在开发的时候适配的是google原生的某一个版本的webview内核,Android4.4版本Google使用了Chromium替代Webkit作为WebView内核.

Chromium这个东西是Google的开源项目,基本上几个小时就会有一个新版本,导致了android每个小版本的webview都会存在一定的差异。

还有就是国内安卓系统开发的乱象,因为webview总是有些bug,各大手机生产厂商都会对webview进行修改这就导致了h5和app融合开发的难度,这类框架就需要大量时间针对android调整代码。

要解决这种ionic设计兼容性的问题,只需要集成打包crosswalk即可:

1.安装crosswalk插件

cordova plugin add cordova-plugin-crosswalk-webview

2.Android Support Repository和Google Repository要确保安装成功。不然会出现编译错误。

在Android SDK Manager->Extras中选择Android Support Repository和Google Repository进行安装即可

3.crosswalk插件有可能出现的错误

由于项目的android版本不匹配,android:minSdkVersion=”16” android:targetSdkVersion=”23” ,编译crosswalk的时候,出现了编译错误。这个就需要降低crosswalk的版本了。 删除config.xml的xwalkVersion

4.app编译时出现针对某个cpu的apk,没有通用apk。

1504863637820929.png

有时候就算加了这个也不能编译出通用apk,应该是有些tools识别不了all这个abiFilters,不过没有关系,可以把arm和x86的名字都跟在后面。

5.apk安装时华硕手机出现报错,cpu不兼容。

800 (1).png

Cordova 编译时提供很多cpu的lib包,但是很多都是没有用的。把没用的包删除,重新编译就可以了。

PS: 这样就能解决Cordova ionic安卓环境下的兼容性问题了,运行统一了,性能也有提升了。

ionic安装cordova插件优点就是:支持其他更多html5的功能包括WebGL,WebAudio,WebRTC,Gamepad,WebSocket等等。 运行统一,性能提高

缺点吗?就是包增大了,使用了crosswalk之后大概需要增加10M左右。

不过要解决cordova插件集成导致包增大的问题也是有的。就是使用下面的命令

ionic build android --prod --release

其中,--prod参数是ionic2的打包方式,使用之后.map.js会压缩变小,打包的App变小了,而且启!动!超!级!快!跟原生App相差无几。--release参数是Cordova的打包参数,使用之后App也会变小。所以,正式版App请务必使用这两个参数打包,非常好用!

查看更多精彩内容,请
顶一下:
+1
0