cordova入门介绍

原创于 2019-10-26 11:34:01 发布 · 595 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了Cordova移动应用开发框架，它是一个包裹js、html、css的原生壳，用于创建混合App。内容包括Cordova的定义、移动端开发分类、Cordova架构、安装环境、项目创建步骤、基础事件监听、启动流程以及插件使用示例，如电池状态、摄像头和振动功能的实现。

真机调试的配置：https://www.jianshu.com/p/732ffe02a110
cordova详解及介绍：https://blog.csdn.net/a940659387/article/details/49639285
cordova+vue开发APP上手指南：https://www.jianshu.com/p/2e9bebb73d37

1.Cordova是什么？
一个移动应用开发的框架，本质是包裹js html css原生的壳。(可安装、可访问原生接口摄像头、麦克风等)
2.移动端开发的分类
（1）原生App(安卓（Java）， ios（object c 、swift）)
特点：性能好，页面流畅
无法跨平台，升级麻烦
(2) webApp (浏览器)
特点：利用webview包装内置网页，开发时间短
用户体验差，加载速度慢（主要是js解释器的转译）
(3) 混合App(Hybrid App， webApp + 原生壳（安卓或IOS）)
特点：跨平台，便于移植，开发速度快，成本低，可以达到接近native APP的感觉
性能上比native APP差些
3.cordova的架构
在这里插入图片描述
4.安装环境
（1）node
（2）cordova cli: npm i -g cordova
（3）jdk(1.8)
（4）android studio(android SDK)
5.创建项目
（1）cordova create 文件名反向域名地址（包名）项目名
（2）进入文件夹， Cordova platform add android(添加android运行时)
（3）cordova build , cordova run android(打开手机开发者模式，点击允许USB安装)
6.cordova的基础事件监听
（1）deviceready: 设备api就绪，可以调用底层设备，相关设备的事件和插件都得放在该事件之后才可调用

document.addEnvetListener('deviceready',  function(){
    console.log('设备api准备就绪，可以进行其它方法的调用')
})

(2) pause: app在挂起状态会被触发

document.document.addEventListener('pause',  function(){
     console.log('应用程序被挂起')
})

（3）resume: app退出或挂起后再次返回时触发

document.addEventListener('resume', function(){
	 console.log('应用程序又回来了')
})

（4）backbutton: 返回按键被点击

 document.addEventListener('backbutton', function(){
	 console.log('返回键被点击')
})

7.cordova启动流程
（1）原生代码启动
（2）splashscreen
（3）load html
（4）顺序执行javasCript => cordova.js
（5） $(document).ready()执行，cordova中的事件不一定可用
（6）注册deviceready事件
8.插件的使用
cordova的功能的实现主要依赖于插件提供
下面介绍三种插件的使用：
1.电池状态
（1）安装：cordova plugin add cordova-plugin-battery-status
（2）使用：电池状态主要有三个监听事件：
batterystatus: 电池状态发生变化，至少1%电量变化。或者充电状态变化
batterycritical: 电池电量到了临界值触发
batterylow：电池电量比较低时触发
都会返回一个status的对象，其中的:
status.level: 表示当前电量
status.isPlugged:表示是否正在充电
2.摄像头（相册）的调用
（1）安装：cordova plugin add cordova-plugin-camera
（2）摄像头提供navgator.camera对象，主要的内部方法为：

navgator.camer.gitPicture(success(返回fileUrl参数，此处为相片在设备中的绝对路径), error, option)

通过该函数的option设置，可以配置图片的内容：

option：{
quality: 0 - 100     图片质量 ，范围为0到100， 默认值为50
destinationType: 返回的图片格式（路径/ base64的字符串）， 默认值camera.destinationType.FILEURL,返                                    回文件路径
sourceType: 图片来源（手机拍摄或相册读取），默认camera.PictureSourceType.CAMERA（1）
targetWidth和targetHeight:  可以设置图片宽高，保存图片原有比例，不会失真变形（比如原有图片为200，400）但此处设置为100，100，最终得到图片的宽高为 100， 200
}

3.振动
（1）安装：cordova plugin add cordova-plugin-vibration
（2）主要方法为：

   navigator.vibrate(time)  time表示振动的时间,最长5秒

传人的参数也可以是数组：

  navigator.vibrate([3000, 1000, 3000]) 表示振动三秒停一秒再振动三秒

振动停止：

navigator.vibrate(0)或者  navigator.vibrate([])