从八个方面让你快速了解cordova(二)

2,144 阅读4分钟

在《从八个方面让你快速了解cordova(一)》(链接:juejin.cn/post/684490… ) 中已经介绍了cordova的架构和使用场景等四个方面的内容,本文将从第五点继续讲解cordova的安装、hooks使用、事件机插件的使用。

五、cordova安装与启动

1、要求安装的组件:
1)安装node.js
2)安装java jdk
3)安装android SDK
4)安装Gradle

2、cordova安装步骤
1)npm install-g cordova //安装cordova
2)cordova creat path 工程id 工程名 //创建cordova项目
3)cordova platform add/remove android/browser //添加或删除支持的平台
4)cordova build android //编译安卓平台代码
5)cordova run--emulator/android //执行模拟器或安卓代码

如果需要检查安装组件是否符合要求可以使用cordova requirements命令,如下:

出现如上问题,是android sdk的版本不对,要求28版本,安装的是29版本,可以在 android studio中下载28版本的SDK。

3、安装目录

1)、hooks目录
存放自定义cordova命令的脚本文件。每个project命令都可以定义before和after的Hook,比如:before_build、after_build。
2)、platforms目录
各个平台的原生代码工程,不要手动修改,因为在build的时候会被覆盖
3)、plugins目录
插件目录
4)、www目录
源代码目录,在cordovaprepare的时候会被copy到各个平台工程的assets\www目录中。其中index.html为应用的入口文件

特定平台工程和Cordova工程都包含了configxml文件: Cordova工程中的configxml,是一些跨平台的通用配置。 特定平台工程中的configxml,除了包含通用配置,还有一些平台的特性化配置,比如:引用插件、插件的加载执行方式等等。

4、cordova启动流程
启动步骤如下:
a、启动原生代码
b、splash screen,刷新屏幕
c、加载html,顺序执行js代码
d、等待$(ducument).ready()执行,但执行完后cordova的插件不一定可用,因为cordova.js是异步执行的。
e、注册deviceready事件,该事件触发表明所有cordova api已经全部完成加载,此时使用cordova插件才是安全的。

六、hooks开发

   Hooks本身是一些脚本代码,可以使用任何语言(例如:bat,shell等),用来自定义Cordova CLI命令。 所有的脚本文件必须放在CordovaCLI命令对应的before或after文件夹中。如:
hooks/before_xxx
hooks/after_xxx
其中xxx就是Cordova对应的命令,比如:run、build等。
添加步骤:
1、修改全局config.xml文件,在对应的platform节点下添加hook:
<platform name-"android">
    <hook type="before_run" src="hooks/before_run/android/beforeRun.sh"/>
 
2、项目根路径before_run"src="hooks/before_run/android/beforeRun.sh 3、编写hook脚本 此时可以在beforeRun.sh编写你想要的逻辑了。

七、cordova事件

各平台支持的事件如上表:
Deviceready:  cordova api全部加载完毕以后触发该事件,只有该事件触发后,调用api才是安全的。
Pause: 后台挂起事件
Resume: 挂起后返回事件
Backbutton: 返回事件
其它事件也类似。

调用事件的代码比较简单:
注册deviceready事件如下,只有注册了deviceready事件后,其它事件如pause事件和插件才可用;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
   document.addEventListener("pause", onPause, false);
   function onPause() {
   //挂起后逻辑
   }
}

八、cordova插件

插件有很多,如电池、相机、震动、媒体、网络、设备等,但每个插件的使用和调用类似,这里以电池插件为例。

安装与卸载电池插件命令:
   cordova plugin add/remove cordova-plugin-battery-status

电池插件提供了3个监听事件:
   batterystatus
   batterycritical
   batterylow

对于batterystatus事件,调用方式如下,回调函数中会返回一个status对象,这个对象包含status.level和status.isPlugged两个参数,前者表示电池状态,即电量百分比,后者表是否在充电状态。

总结

   cordova是一个热度非常高的跨平台开发框架,他的主要功能是让我们在快速开发web应用的同时能随时调用手机硬件资源,非常适合已经开发好服务器端web工程,希望能快速移植到移动端发布的场景,使用起来也非常容易上手。