整体内容介绍：
- 跨平台技术的由来
- 跨平台技术简介
- cordova 简介
- cordova 结构(重点)
- cordova 安装与启动(重点)
- corodva 事件
- corodva 插件
- 总结
一、跨平台技术的由来
传统的纯原生开发已经不能满足日益增长的业务需求。主要表现在如下两个方面。
- 动态化内容需求增大。当需求发生变化时，纯原生应用需要通过版本升级来更新内容，但应用上架、审核是需要周期的，这个周期对高速变化的互联网时代来说是很难接受的，所以，对应用动态化(不发版也可以更新应用内容)的需求就变得迫在眉睫了。
- 业务需求变化快，开发成本变大。由于原生开发一般都要维护 Android、iOS两个
开发团队，版本迭代时，无论人力成本还是测试成本都会变大。
总结一下，纯原生开发主要面临动态化和开发成本两个问题，而针对这两个问题，又诞生了一些跨平台的动态化框架。
二、跨平台技术简介
根据其原理，主要可分为如下三类：
- 混合开发：H5(HTML5)+原生( Cordova、 uni-app、微信小程序)。
- Javascript开发+原生渲染(React Native、Weex、快应用)。
- 自绘UI+原生( QT Mobile、 Flutter)。
混合开发主要原理：是将APP需要动态变动的一部分内容通过H5来实现，使用原生的 webview 加载 H5 页面，通过桥接文件来调用原生插件实现原生插件功能（比如摄像头）。
RN 的原理：在React-native文件中编写的代码，会在内存中生成虚拟DOM对象（其实就是一个JS对象），然后再通过javaScriptCore（IOS自带，安卓不是，所以RN打包后安卓的包比苹果大）映射成原生控件树。
Flutter 的原理：使用自己的高性能渲染引擎来绘制 UI，但是依然避免不了写原生代码。
image.png
image.png
三、cordova 简介
2011年，Adobe把PhoneGap的核心代码贡献给了Apache软件基金会，但保留了PhoneGap的商标所有权。Apache将PhoneGap核心代码命名为Apache Callback项目，后又更名为Apache Cordova。
cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台（android、ios、windows等）开发。应用在每个平台的具体执行被封装了起来，并依靠符合标准的API绑定去访问每个设备的功能，比如说：传感器、数据、网络状态。
而PhoneGap是cordova的发行版本。
Ionic也集成了ApacheCordova框架，可以直接用Ionic的命令来调用Apache Cordova的创建，编译，打包等功能。
四、cordova 结构
image.png
从图中，我们可以看到它提供了Web APP、WebView、Cordova Plugins。
Web App
这是存放应用程序代码的地方，体现是你的具体业务逻辑模块。应用的实现是通过web页面，默认的本地文件名称是是index.html，这个本地文件应用CSS,JavaScript,图片，媒体文件和其他运行需要的资源。应用执行在原生应用包装的WebView中，这个原生应用是你分发到app stores中的。
WebView
Cordova启用的WebView可以给应用提供完整用户访问界面。在一些平台中，他也可以作为一个组件给大的、混合应用，这些应用混合和Webview和原生的应用组件。
Cordova Plugins
插件是Cordova生态系统的重要组成部分。他提供了Cordova和原生组件相互通信的接口并绑定到了标准的设备API上，这使你能够通过JavaScript调用原生代码。
五、cordova 安装与启动
1、要求安装的组件：
- 安装node.js
- 安装java jdk
- 安装android SDK
- 安装Gradle
2、cordova安装步骤
- npm install-g cordova //安装cordova
- cordova creat path 工程id 工程名 //创建cordova项目
- cordova platform add/remove android/browser //添加或删除支持的平台
- cordova build android //编译安卓平台代码
- cordova run--emulator/android //执行模拟器或安卓代码
如果需要检查安装组件是否符合要求可以使用cordova requirements命令。
3、cordova 启动流程
启动步骤如下：
- 启动原生代码
- splash screen,刷新屏幕
- 加载html，顺序执行js代码
- 等待$(ducument).ready()执行，但执行完后cordova的插件不一定可用，因为cordova.js是异步执行的。
- 注册deviceready事件，该事件触发表明所有cordova api已经全部完成加载，此时使用cordova插件才是安全的。
六、corodva 事件
image.png
各平台支持的事件如上表：
- Deviceready: cordova api全部加载完毕以后触发该事件，只有该事件触发后，调用api才是安全的。
- Pause: 后台挂起事件
- Resume: 挂起后返回事件
- Backbutton: 返回事件
其它事件也类似,调用事件的代码比较简单.
注册deviceready事件如下，只有注册了deviceready事件后，其它事件如pause事件和插件才可用;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("pause", onPause, false);
function onPause() {
//挂起后逻辑
}
}
七、corodva 插件
插件有很多，如电池、相机、震动、媒体、网络、设备等，但每个插件的使用和调用类似，这里以电池插件为例。
安装与卸载电池插件命令：
cordova plugin add/remove cordova-plugin-battery-status
电池插件提供了3个监听事件：
- batterystatus
- batterycritical
- batterylow
对于batterystatus事件，调用方式如下，回调函数中会返回一个status对象，这个对象包含status.level和status.isPlugged两个参数，前者表示电池状态，即电量百分比，后者表是否在充电状态。
[图片上传失败...(image-411d6b-1669025323896)]
总结
cordova是一个热度非常高的跨平台开发框架，他的主要功能是让我们在快速开发web应用的同时能随时调用手机硬件资源，非常适合已经开发好服务器端web工程，希望能快速移植到移动端发布的场景，使用起来也非常容易上手。同时 Cordova 也有用户体验相对较差的问题。
没有完美的跨端技术，只有适合的场景。脱离适用场景去谈跨端技术没有什么意义，我们需要结合具体的场景和现实情况选择最优的方案。
参考链接：
https://www.cnblogs.com/cr330326/p/7082821.html
https://juejin.cn/post/6844903684032167944
https://juejin.cn/post/6844904084416233480
网友评论