cordova远程网页调用原生api引发的总结

最近有朋友问我:

    你们的app是用h5做的,他本质上不就是个网站吗,那么你为什么不把这个网站放到服务器上,就可以不用更新app了呀!

问的我一愣,我们来看看这个问题吧。首先第一点,webview这玩意是h5混合应用发展起来的根基

一、h5框架的选择

        之前刚开始做h5项目的时候我们用的是dcloud的框架,工具叫hbuilder,前端组件库叫mui,话说hbuilder这东西还真挺好用的,边写边调试,效率挺高,兼容性问题能直接在手机上看得到,这样问题就比较少,dcloud的api能直接操作webview,当时我们基本上是一个页面一个webview,最多的时候是一个页面四个webview拼接在一起,玩的很6哈,当你使用一门技术和一个工具越久的时候,你就会发现越来越多的坑:

    1、dcloud类似的国内h5框架代码都不是开源的,他们的原生api是由公司组织自己维护的,这样就导致api的更新速度慢(这点其实还是能忍受的,毕竟我们最常使用的拍照啊,相册啊什么的没什么大问题)

    2、这玩意在android机器上有点卡,而且官方决定不会更新webview的内核(其实这不怪dcloud,是安卓的webview内核太垃圾了,尤其是在安卓4.4以下的系统上,那体验简直了!)

基于目前我们的用户群体很多还是维保人员,保安人员等,他们的手机真的好不到哪去,所以我们转投了cordova的怀抱

tips:现在安卓手机越来越好了,4.4以下的系统马上就会被消灭,我个人还是很看好dcloud的

cordova这玩意算是混合应用的鼻祖了,官方会提供一些强大的基本的api,其他的的api很多都是大型程序员相亲网站上的单身汪们提供的,我们一接触这玩意感觉是真爽啊,与国际接轨的赶脚,而且,可以使用crosswork插件来更改安卓webview内核,安卓机迎来了春天,ios还可以使用wkwebview,优化内存,爽的飞起,好了,打住,照例,我们吐槽一下这玩意的坑:

    1、调试是真心麻烦啊,虽然安卓可以用chrome调试,依然非常非常的麻烦,这下不一样了,从用户体验差换成了程序员体验差

2、我们遇到了一些很严重的问题,由于插件是不同的人开发的,它们之间冲突了,互不兼容,这次之后,我对cordova的喜爱一下子变成了恐慌(这点很严重,感觉不会再爱了,但是一码归一码,cordova本身还是很好用的框架)

    3、cordova操作webview不方便,严格意义上说是不好操作不是不能,下面详细说一下

二、cordova加载远程网页调用原生api

参考文章:https://www.jianshu.com/p/31b28b8661c5

https://www.jianshu.com/p/0fd4e99acef3

        扯得有点远了,我们拉回正题,这个问题分两步:

    1、创建新的webview窗口

为什么非要创建新窗口呢,如果在我们的网页主体里面加上一个iframe,加载远程网页就行了,但是和iframe通讯很麻烦,虽然可以用postmessage,但是真的很麻烦,而且iframe的页面事件穿透比如手指滑动事件就会有很多奇奇怪怪的问题,我吃过亏也不想再用这种方式,说回创建新webview窗口,使用cordova-plugin-inappbrowser就可以了,done(记得加白名单)

    2、新窗口加载远程网页并调用原生api

                问题来了,新建窗口里面的网页调用不了cordova.js,请参考上面的文章,里面有关键的一句:

这个需求不容易搞定,因为inappbrowser的实现默认是不允许使用cordova的任何资源,只是提供用新webview实例来加载一个纯的网页,所以需要对inAPPbrowser进行改造

两篇文章里面都解决了这个问题,大牛是真的厉害,说实话,我还没试,应该没什么问题的

下面是一些其他的小玩意

        混合app和原生的比较:

用户体验上 原生>react  native>混合app,自然,开发成本上成反比(react  native是用原生组件渲染页面的,所以体验还不错)

所以,对个人发展来说,会混合app,并且会写一些简单的android和ios原生是极好的

最后一句:技术没有最好的,只有最适合当前公司和项目的

你可能感兴趣的:(cordova远程网页调用原生api引发的总结)