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这个动作就是最大的限制了，所以，最终封装组件的目标如下

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

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

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

Cordova的基本使用

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

安装nodejs，先要有npm的环境
安装Cordova npm install -g cordova
创建项目 cordova create <path>
具体命令 cordova create 目录名包名项目名
示例 cordova create cordovademo com.yzq.cordovademo CordovaDemo
此时，一个Cordova项目就创建好了
添加平台,注意此时要切到刚到创建好的项目的根目录里，可以自己指定版本，目前最新的就是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插件怎么用以及如何自定义插件

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

Cordova系列之初探Cordova相关推荐

cordova 蓝牙_Ionic通过Cordova插件使用设备能力
1. Cordova插件 App运行在手机上,少不了需要使用手机上的设备能力,比如蓝牙.相机.数据库等等.在之前的文章中我们知道Ionic框架实际上还是一个UI框架,一个基于WEB的框架.那么Ioni ...
vscode中安装webpack_leaflet-webpack 入门开发系列一初探篇（附源码下载）
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载 webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址w ...
android cordova,android项目使用cordova
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 一.导入cordova项目 1.导入CordovaLib library 将cordova工程中的CordovaLib作 ...
cordova自定义android插件,Cordova 自定义插件(Android版本)
Cordova 自定义插件(android) 特别注意 android 项目的包名必须为 com.example.hello,否则编译不会通过. 1.安装命令工具 $ npm i plugman - ...
cordova wifi插件（cordova plugin add cordova-plugin-hotspot）
本文实现的功能: 1.一键切换wifi状态,打开或关闭 2.输入SSID和密码,连接wifi 3.wifi打开时显示当前可用的wifi,但是还未实现点击SSID名连接wifi的功能 4.桌面实现当前w ...
android cordova原理,android 集成Cordova
原生android项目变成混合App,添加cordova依赖,使用cordova功能原创Daidason 最后发布于2019-11-21 15:47:58 阅读数 34 收藏展开一准备一份co ...
cordova打印机插件_phonegap/cordova plugin
蛋疼的是你不能用native去写app,那么只能用个中间件来完成,现在选择无疑是cordova,国内的多用appcan(去年用过,个人感觉除了有点乱之外其他的还ok),先来讲讲cordova插件,因为 ...
php零拷贝,百万并发「零拷贝」技术系列之初探门径
Wiki对零拷贝的定义 "Zero-copy" describes computer operations in which the CPU does not perform th ...
除零中断是什么意思?_百万并发「零拷贝」技术系列之初探门径
Wiki对零拷贝的定义 "Zero-copy" describes computer operations in which the CPU does not perform th ...

Cordova系列之初探Cordova

前言

Cordova系列之初探Cordova相关推荐

最新文章

热门文章