Cordova系列之初探Cordova

前言

最近在做一个Cordova相关的需求,主要工作是对Cordova进行封装,提供一些回调以及事件监听,做成一个组件,方便开发人员使用。
之前只是知道有Cordova这个东西,但是并没有实际用过,因此,先去官网翻了下文档,整了个demo用了一下。
Cordova本地上就是对webview的封装,核心点就是提供了丰富的插件可以让H5跟Native进行通信,很方便的实现两者之间的交互。
如果是一个以Cordova为主的纯混合项目,也就是页面全都是H5开发的,那用起来很方便,完全没有任何问题。但是如果是一个混合项目,只是其中几个页面用到了H5,那么Cordova在Android的开发中还是有一些限制的,总结下来有以下几点

  • 必须继承CordovaActivity,这个是个人认为最让人诟病的地方了,任何一个三方sdk,如果必须强制你要继承他的Activity的话,都是一个不好的设计,因为Java是单继承的,一般我们的项目都会有一套自己统一的的BaseActivity,万不得已的情况下是不会去继承其他Activity的。
  • 灵活性不足 ,遇到一些稍微个性化一点的UI,比如我的页面除了webview还有标题栏,浮动图标等其他跟业务相关的ui,那默认的CordovaActivity就无法处理了。需要自己继承CordovaActivity然后把源码进行修改,这样一来开发成本就比较高了,而且复用性很差。
  • 默认的Api满足日常使用,但是针对一些事件的监听没有提供,需要这些时间监听的话又要去自己写代码,很麻烦。这点倒不是什么大问题,毕竟麻烦点还是能实现的。

分析下来,导致灵活性不足这个问题的根源点就是CordovaActivity,如果没有个性化需求,那继承CordovaActivity确实很简单易用,但是我们的项目需求是千奇百怪的,一定会遇到一些个性化的ui,那继承Activity这个动作就是最大的限制了,所以,最终封装组件的目标如下

  1. 保留默认继承自CordovaActivity的使用方式
  2. 把Cordova的核心能力从CordovaActivity进行抽离,封装成一个View,使其摆脱必须继承Activity的限制,可以像使用Webview控件一样去使用Cordova,适用于一些非常个性化的场景。
  3. 提供基于Activity,Fragment的封装,满足灵活性的前提下让使用人员快速使用Cordova的功能,适用于大部分个性化ui的场景。
  4. 不管是自定义View的方式还是继承Activity或Fragment的方式,都要提供简单易用的api以及回调给使用者,使其可以快速实现业务需求。

要想实现上述目标,首先要对Cordova比较熟悉,然后Cordova的核心代码要理一遍,以免在后续抽离的时候出现问题。

万事开头难,路要一步一步走,饭要一口一口吃,我们先来熟悉下Cordova怎么用。

Cordova的基本使用

Cordova的基本使用也很简单,按照 官方文档 来就行,比较简单,就补赘述了,主要步骤如下

  1. 安装nodejs,先要有npm的环境
  2. 安装Cordova npm install -g cordova
  3. 创建项目 cordova create <path>
    具体命令 cordova create 目录名 包名 项目名
    示例 cordova create cordovademo com.yzq.cordovademo CordovaDemo
    此时,一个Cordova项目就创建好了
  4. 添加平台,注意此时要切到刚到创建好的项目的根目录里,可以自己指定版本,目前最新的就是11.0.0。
    cordova platform add android@^11.0.0

到这里,一个Android平台的Cordova项目就创建好了。
先来看下目录结构
在这里插入图片描述
可以看到,实际上还是一个偏前端的项目,做为一名Android开发者,我们主要关注的是 platforms/android 这个目录,该目录本质上就是一个Android项目,可以直接用Android Studio打开运行。
运行后默认就是这样一个界面了。
在这里插入图片描述

还有一个比较重要的目录就是www目录,这个主要是前端同学比较关注的,他们编码时主要也是操作该目录。
在Android目录中实际上也有一个www目录,跟外层www的目录里的内容是一模一样的,刚才运行时最终加载的h5就是www目录里的h5,实际开发中我们一般是load一个线上的url,因此,该目录主要是为了存放一些需要本地加载的资源以及调试时可以使用。
在这里插入图片描述
还有一个比较重要的文件就是 config.xml,该文件主要是一些Cordova相关的配置,比如默认加载的url,插件的声明等等

下面我们稍微改下代码,比如加载我的博客主页看一下,很简单,直接改下 config.xml中content标签的src即可
在这里插入图片描述
或者我们直接改Activity的代码也是一样的效果
在这里插入图片描述
然后运行看一下,没啥问题。

在这里插入图片描述

到这里,一个非常简单的cordova项目的创建到运行就完成了。

下一篇来看下 Cordova插件怎么用以及如何自定义插件


如果你觉得本文对你有帮助,麻烦动动手指顶一下,可以帮助到更多的开发者,如果文中有什么错误的地方,还望指正,转载请注明转自喻志强的博客 ,谢谢!

猜你喜欢

转载自blog.csdn.net/yuzhiqiang_1993/article/details/129764205
今日推荐