关于Cordova封装H5站点遇到的坑

倘若存在移动网页，然后需要APP，但是只是作为一种存在介质的话，cordova来将其封装打包，最为合适，但是当真正去做还是会有坑。
将其封装为APP，主要使用到了这个插件cordova-plugin-inappbrowser

坑1-文件下载

在实际APP中，点击下载，发现没反应，几次都不行，推断有问题，在GitHub插件pr中检索download,果然，发现有相关问题，如下图，仔细看了下，得到以下两点信息

• 首先这个下载问题，的确是这个插件的事，本质原因是安卓手机下载，就意味着文件要存储在手机上，而这是需要授权的，所以插件必须要声明文件存储权限，然后看了下插件的源码，果然，根本没有存储权限
• 是pr，说明已经解决，并且提交，申请合并主干了，但是由于pr是打开状态，说明还没合并主干，那么通过npm，cordova安装的都不行了，因为官方版本不行，所以只能根据提交记录找到提交记录作者的fork状态下的插件即可，然后下载下来丢到项目中对应插件下，重新添加平台，构建打包，发现，果然解决啦。
  
  

解决问题的插件分支，点击下载

坑2-启动画面-splashscreen

按照启动动画默认的设置，实际运行，发现启动动画消失后会有长时间的白屏问题，分析发现，是inappbrowser在打开网页的时候是会有一段时间的白屏，那么这个就造成很不好的体验，需要实现启动动画一直显示，然后如果事件监听到网页加载完成了，就手动关闭启动动画，这样子是最好，查看插件官方文档，有这么个参数配置
<preference name="AutoHideSplashScreen" value="false" />
按照配置说明是设置为false,就不会自动关闭，需要手动关闭
但是实际配置后，添加平台，运行，发现不起作用，查看pr,果然有人提PR，

又是open状态，没招。

最终只是绕路解决，想到的方案是配置文件中将splashscreen的时效设置为0，然后手动启动和关闭，但是因为启动会自动消失，所以写定时器循环，不断的show，保证splash不消失，具体代码如下

• config.xml

  <preference name="ShowSplashScreenSpinner" value="false"/>
  <preference name="SplashScreenDelay" value="0"/>
  <preference name="FadeSplashScreen" value="false"/>
  <preference name="FadeSplashScreenDuration" value="0"/>

• index.js

  onDeviceReady: function () {
      // this.receivedEvent('deviceready');
      var url = 'http://apache.org';
      var target = '_blank';
      var options = "location=no,toolbar=no";
      var intervalID = window.setInterval(function () {
              console.log('navigator.splashscreen.show()');
              navigator.splashscreen.show();
          }, 500
      );
      inAppBrowserRef = cordova.InAppBrowser.open(url, target, options);
      inAppBrowserRef.addEventListener('loadstart', loadStartCallBack);
      inAppBrowserRef.addEventListener('loadstop', loadStopCallBack);
  
      function loadStartCallBack() {
          // inAppBrowserRef.hide();
      }
  
      function loadStopCallBack() {
          // inAppBrowserRef.show();
          if (navigator.splashscreen) {
              clearInterval(intervalID);
              //         // We're done initializing, remove the splash screen
              navigator.splashscreen.hide();
              console.warn('Hiding splash screen');
          }
      }
  },

  测试效果还不错

总结

• Apache基金会缺钱，缺人，这些插件都是常年累月没人更新，这样造成很多问题无法及时解决，久而久之的话，这些开源技术也就不会有人使用了
• Google、Github、Stackoverflow，很多时候问题都是在这上面寻找，都是可以找到相关问题的描述，大众点的问题，一般都会有人提出了解决方案
• Cordova本身这个技术，热度看来在减少，毕竟Reactive Native很成熟，NativeScript也在崛起，类似需求，其实用别的也能实现。