[转载]cordova入门

一、cordova是什么？ 

原文出处：https://www.cnblogs.com/lishuxue/p/6008678.html

初学Cordova的人，虽然了解一点点，知道Cordova是用来将html, css, js变成app的，但并不知道到底是怎么用的，原理是什么。经常会有这样的困惑：
　　它是一个可以把H5代码变成iOS、安卓等原生代码的东西？
　　它是一个封装了H5浏览器的壳？可以装在iOS、安卓等平台的app，一打开这个APP就会访问我web app的内容？
　　还是一个web前端框架，用户使用手机自带浏览器访问我的web app就可以调用他手机的摄像头和麦克风？

　　1.它不会把你的前端页面变成 ios 原生的 objective-c 或者 android 的 java 代码，你的界面还是以网页形式呈现的，渲染在 Android 的 WebView 或 iOS 的UIWebView 中。
　　2.不太像壳，只是在运行在 WebView 中的 javascript 代码和原生代码之间建了一座沟通的桥梁，通过它可以用js去访问原生应用。
　　3.不是前端框架， bootstrap、angularjs、jqueryUI 这些是前端框架。cordova更像一个工具。

　　简单点理解，Cordova是一个工具，通过它可以将你做的html网页显示在WebView里面，而你网页中用到的JS可以通过他的API去调用原生的东西，比如照相机等。　　

　　但它做出来的app比原生做出来的app好在哪里呢，直白点说，简便，省钱。因为cordova app显示的页面全是你做的html页面，所以说你写一套code，就可以用在Android上，IOS上，以及Web上。不用去分别找Android工程师，IOS工程师。

cordova项目目录：执行cordova create hello com.example.hello HelloWorld，会为我们创建一个cordova项目hello。

二、核心代码分析

原文出处：https://www.cnblogs.com/lishuxue/p/6015420.html

1. MainActivity.java

学过安卓的都知道，Activity在启动的时候会首先调用onCreate方法。

　　loadUrl(launchUrl);会在当前的WebView中去加载首页，当然这个首页是我们自己配置的，在res/xml/config.xml中。<content src="index.html" />。这个路径都是指的assets/www下的路径。

　　这样这个app启动的时候会首先调用这个MainActivity(当然这是在AndroidManifest.xml中配置的)，然后Activity启动的时候会将index.html加载在其WebView中，然后我们就看到了Cordova的页面。

2. index.html

在显示这个index页面的时候，会加载两个js文件。cordova.js就是cordova的api，调用原生内容用的，相当于jar包。

3. index.js

加载index.js之后，程序会首先调用初始化方法，初始化的时候会去绑定事件监听：document.addEventListener('deviceready', this.onDeviceReady, false);

deviceready事件，该事件是在 cordova 载入完成后发生的事件，它表示cordova 加载完成并准备访问，你传进去的回调函数，相当于程序的入口函数。

　　当cordova准备好的时候，会去首先执行你传进去的回调函数，这里是onDeviceReady()。这个方法会改变DOM元素的css样式。

　　最终效果就是，当cordova没有加载完的时候，页面上Apache Cordova下面那里显示的是：Connecting to Device（背景是灰色）。加载完之后，cordova准备好之后，原来显示的消失，现在显示的是：Device is Ready（背景是绿色）

三、cordova插件使用

原文出处：https://www.cnblogs.com/lishuxue/p/6018416.html

演示一个例子，通过cordova插件，去调用摄像头。

1. 插件的安装以及基本信息：

cordova plugin add cordova-plugin-camera

然后它会为我们的hello/plugins文件夹下添加cordova-plugin-camera插件（这个是整个这个插件模块，可用于安卓和ios。卸载插件用cordova plugin remove cordova-plugin-camera）；

　　同时也会在我们的platforms/android/platform_www/plugins下面添加对应的安卓的插件cordova-plugin-camera（这个是根据对应的平台生成的对应的插件内容，只可用于本安卓平台）；

　　也会在我们的资源文件夹assets/www/plugins下添加cordova-plugin-camera插件（这个资源文件夹下的所有的文件，才是真正的app运行的时候调用的，加载的文件）；

　　还会为我们的src下添加org.apache.cordova.camera包以及对应的java文件。

　　为什么要在项目中加这么多，这只是cordova的机制，我们不作重点研究。这三个目录是有不同的作用的，但我们只重点关注assets/www目录下。

　　除了上面这些，加完这个插件也会改变一些其他文件的内容，首先看res/xml/config.xml，最后多了一项配置信息：

feature · name："js中间件通过它调用java方法"。
　 （中间件就是我们的插件对应的一些js文件。我们写的js程序通过这些插件（中间件）去调用Jjava原生内容）
　　param · name："android-package"     value：原生插件类的包类路径。

　　打开assets/www下cordova_plugins.js，发现其中也增加了很多内容：

       id:插件中某个模块或具体功能的id

　　file:这个id对应的js文件（实现这个模块或功能的文件）

　　pluginId:插件的ID，通过这个ID可以进行插件的安装和卸载

　　clobbers:H5或js通过它去调用js中间件（插件）中定义的方法

2. 在代码中如何调用摄像头插件

首先我们修改index.html（指的assets/www下的）

接下来再修改index.js

至此，我们的Cordova摄像头插件已经在代码中调用好了，运行我们的项目，就可以拍照了。（当然，模拟器上是不行的，得用真机）