和Ionic android端样式错乱问题说再见

Posted 2022-10-30 疼老婆的coder

1.问题分析

最初接收到的信息中得知，ios端的显示正常，android端（锤子）许多界面样式渲染错乱。拿到app后再小米note上也进行安装，结果样式渲染也错乱了，错乱得样子还不一样。据我多年android原生开发的经验，主要原因是ionic官方在开发的时候适配的是google原生的某一个版本的webview内核，Android
4.4 版本 Google 使用了Chromium 替代 Webkit 作为 WebView 内核，Chromium 这个东西是Google的开源项目，基本上几个小时就会有一个新版本，导致了android每个小版本的webview都会存在一定的差异。然后就是国内android系统开发的乱象，因为webview总是有些bug，各大手机生产厂商都会对webview进行修改这就导致了h5和app融合开发的难度，这类框架就需要大量时间针对android调整代码。

基本上解决方案就两个：
1.更改css和js来保证页面更好的兼容，造成的结果，需要大量的时间针对每个系统的手机做一套样式（只要不兼容就得做），时间成本和经济成本（购买测试机）都明显增加。
2.更换统一内核，造成的结果app的size变大。
从上述两个方案来看，第二个明显占据时间和成本上的优势，size在不超过50m的情况下对用户的体验来讲是差不多的。

2.方案选型

由于我本就是做android原生开发的，对webview的内核早有自己的处理方式，当我想更换webview内核的时候发现，获取webview的方法已经被cordova封装进了lib已经修改不了。就无法使用我现有的内核进行修改。 Crosswalk也是提供webview统一内核的公司。最终决定使用crosswalk的ionic插件。

3.方案实施

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

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

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

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

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

到这里所有的问题都已经解决了，如果还有样式问题，只要在一台手机上修改代码就可以了。

带来的问题也比较明显，app启动加载的速度慢了。还是有待研究。