Cordova入门

公司需要搞跨平台开发，之前的旧项目是采用Ionic（另一种跨平台方案）实现的，当初一头扎进去学习ionic，发现是个大坑，后来才发现，Ionic内部核心也是Cordova实现的，所以又一头扎进去，发现。。。。

无论如何，做下笔记

Cordova安装和配置

因为Cordova是由npm管理的，所以需要安装Nodejs环境，最好是最新的，在安装之前查看一下自己是否已经安装过NodeJs了（终端输入node -v，有输出则有安装）

如果有的话，别管什么版本了，卸载了吧，我保证比你可能会有两个nodejs版本或者安装了一个Ionic1（还有Ionic2，Ionic3）的时候感到轻松。

然后

1. 安装最新的nodejs，他会自动包含npm了
2. 终端npm install cordova -g

安装完毕。over

Cordova创建项目

可以很简单

1. 终端进入你插件项目的目录cd ????
2. 运行ionic create CordovaDemo

CordovaDemo:你项目的名字，项目包名，项目文件夹名

也可以稍微复杂一点

1. 终端进入你插件项目的目录cd ????
2. 运行ionic create CordovaDemo com.cordova.app HelloWorld

CordovaDemo:项目文件夹名

com.first.helloworld:项目包名

Helloworld:项目的名字

创建完毕。over

添加平台

创建的Cordova默认是没有任何平台的，我们需要为项目添加我们需要的平台：

1. 进入目录cd CordovaDemo
2. 添加安卓平台cordova platform add android
3. 添加iOS平台cordova platform add ios

一般就这两个平台了

运行

也是很简单的。运行安卓cordova run android，运行ioscordova run ios

这里需要注意的是运行ios的时候我估计是需要证书等原因，反正我没能够在终端上直接运行的。我的解决办法是，我有XCode（iOS开发工具）~~

直接进入目录进入platforms，可以看到你的安卓和iOS平台，打开iOS里面其实就是一个iOS项目来的了。我们可以直接打开.xcworkspace后缀的文件就会运行xcode了，然后就是我的能做的事情了。

Cordova项目目录结构

刚刚我们安装和配置好一个Cordova项目之后，我们打开项目文件件应该这样的文件结构

一个个来介绍

config.xml

这个文件是cordova项目的配置文件，负责整个项目的一些配置信息，简单看一下我的一个项目的信息：

<?xml version='1.0' encoding='utf-8'?><widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">    <name>HelloCordova</name>    <description>        A sample Apache Cordova application that responds to the deviceready event.    </description>    <author email="[e-mail]" href="http://cordova.io">        Apache Cordova Team    </author>    <content src="index.html" />    <access origin="*" />    <allow-navigation href="http://ionic.local/*" />    <allow-navigation href="http://*/*" />    <allow-navigation href="*" />    <allow-intent href="http://*/*" />    <allow-intent href="https://*/*" />    <allow-intent href="tel:*" />    <allow-intent href="sms:*" />    <allow-intent href="mailto:*" />    <allow-intent href="geo:*" />    <platform name="android">        <allow-intent href="market:*" />    </platform>    <platform name="ios">        <allow-intent href="itms:*" />        <allow-intent href="itms-apps:*" />    </platform>    <engine name="android" spec="^6.2.3" />    <engine name="ios" spec="^4.4.0" />    <plugin name="com.telerik.plugins.nativepagetransitions" spec="git+https://github.com/Telerik-Verified-Plugins/NativePageTransitions.git" />    <plugin name="cordova-plugin-whitelist" spec="^1.3.2" /></widget>

讲一些主要的标签吧：

• widget：id代表项目包名 version代表版本
• name：项目名
• description：项目描述
• author：作者信息
• content：src代表文件入口，默认是www目录下的index.html文件，也可以指定为域名。也就是我们所说的直接一个webview加载网站变身应用了
• allow-navigation：页面跳转的时候是能够在应用内打开的地址（例如：如果上面的入口是baidu.com，如果你没添加这个的话，每次都会打开手机的浏览器打开网页）
• platform：平台
• allow-itent：平台下的服务
• plugin：插件信息

主要修改的东西有：项目的包名（打包时候用到），项目名，入口文件，allow-navigation。其余的一般通过命令行添加自动生成。

hooks

不知道，没用过，看官方介绍吧，我不用这个东西依然能做个项目（简单的）。

说到这里，大家看官网的时候发现可以选择语言的，这里建议选择英文原版，因为。。。。。中文版的是有欠缺的。。。。官网。。。。

node_modules

用过npm都知道这个东西是什么来的了。主要是npm用来解决引入一些包的，可以不用特别在意，使用版本管理器的时候也会忽略这个文件夹内的管理，因为不同平台（mac，window，linus）下的包貌似会不同，他会将依赖的包写入一个文件内，等到下载项目的时候再根据环境导入不同的包。

所以才经常看到从github上面下载一些项目下来，都需要我们npm install了，这句命令就是根据他的文件引入对应环境的包了。

package.json

这个文件是一个描述文件，他是node的产物。简单看一下：

{    "name": "helloworld",    "displayName": "HelloCordova",    "version": "1.0.0",    "description": "A sample Apache Cordova application that responds to the deviceready event.",    "main": "index.js",    "scripts": {        "test": "echo \"Error: no test specified\" && exit 1"    },    "author": "Apache Cordova Team",    "license": "Apache-2.0",    "dependencies": {        "com.telerik.plugins.nativepagetransitions": "git+https://github.com/Telerik-Verified-Plugins/NativePageTransitions.git",        "cordova-android": "^6.2.3",        "cordova-ios": "^4.4.0",        "cordova-plugin-whitelist": "^1.3.2"    },    "cordova": {        "plugins": {            "com.telerik.plugins.nativepagetransitions": {},            "cordova-plugin-whitelist": {}        },        "platforms": [            "android",            "ios"        ]    }}

可以看到，如果是一个原生开发人员，不懂得跨平台开发，不懂得node的，这个文件是看起来比较复杂的（我当初是这样的感觉）。不过其实他不需要我们一个个键值对打出来，他是自动生成的。

platforms

这个文件夹下的就是我们的各个平台的项目了。修改里面的东西需要原生开发经验。

plugins

这个文件夹是cordova的插件目录。

插件的作用：可以通过插件来使用js代码调用原生代码，由于可以通过原生代码调起设备的硬件，所以可以以此来使用js调起设备硬件。

我们所说Cordovad的一个架构应该是这样的

可以看到我们做的就是一个webapp，然后通过安卓或者ios的web控件（iOS的WKWebView或UIWebVIew，安卓就不知道了），来讲整个页面嵌入到原声应用当中，但是我们平常使用的HTML，CSS，JavaScript并不能够调用到设备的摄像头，设备信息，本地存储等功能，那么怎么办呢？这个时候就是我们插件出马了，我之前也自己整理过一个插件的编写，简单的来说就是通过js来调用原生代码（OC，Java）来实现这些功能的。所以编写插件需要原生开发经验，但是我们大部分时候不需要自己去编写，因为有插件库，一般使用的插件都会有的了。

添加插件的命令：

cordova plugin add cordova-plugin-device

推荐一些可能用到的插件：

• cordova-plugin-device 基本设备信息
• cordova-plugin-network-information 网络连接信息
• cordova-plugin-battery-status 电池状态信息
• cordova-plugin-device-motion 加速度信息
• cordova-plugin-device-orientation 指南针信息
• cordova-plugin-geolocation 定位数据
• cordova-plugin-camera 相机
• cordova-plugin-media-capture 媒体捕获
• cordova-plugin-media 媒体播放器
• cordova-plugin-file 访问文件
• cordova-plugin-file-transfer 文件传递
• cordova-plugin-dialogs 消息提示对话框
• cordova-plugin-vibration 振动提醒
• cordova-plugin-contacts 联系人
• cordova-plugin-globalization 全球化
• cordova-plugin-splashscreen 闪屏(启动画面)
• cordova-plugin-inappbrower 浏览器
• cordova-plugin-console 控制台
• cordova-plugin-statusbar 状态栏

res

res也就是Resources了，专门放我们的资源的文件夹。里面一般就icon文件夹代表项目图片，screen文件夹代表项目的开启页面。

www

www文件夹就是我们真正编码的地方了。内部默认一个index.html作为项目的入口文件，其余的三个文件夹css，img，js也不用多说了，真正完成我们一个app的各个页面，各种功能就是在这里实现的了。

接下来主要解释一个index.html和index.js文件吧

index.html

这个文件是我们的默认首页文件，当然他也可以不是我们的首页文件。之前就说过，cordova项目的首页是在 config.xml 文件内的 content 的 src 属性内设置的。默认是 index.html 就是指这个文件了。

内容是：

<html>    <head>        <!--        Customize this policy to fit your own app's needs. For more guidance, see:            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy        Some notes:            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:                * Enable inline JS: add 'unsafe-inline' to default-src        -->        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">        <meta name="format-detection" content="telephone=no">        <meta name="msapplication-tap-highlight" content="no">        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">        <link rel="stylesheet" type="text/css" href="css/index.css">        <title>Hello World</title>    </head>    <body>        <div class="app">            <h1>Apache Cordova</h1>            <div id="deviceready" class="blink">                <p class="event listening">Connecting to Device</p>                <p class="event received">Device is Ready</p>            </div>        </div>        <script type="text/javascript" src="cordova.js"></script>        <script type="text/javascript" src="js/index.js"></script>    </body></html>

一眼看完，没多少东西解释的。
不过这里我觉得唯一要注意的地方，也是我当初刚学纠结的地方。就是引入的cordova.js文件

<script type="text/javascript" src="cordova.js"></script>

这句代码咋眼看上去没什么问题，由于我做项目的时候出现了一点问题，我怀疑是 cordova.js 没加载导致的，所以在找这句代码的时候才发现问题来了。

这个是 www 目录下的文件

忽视 .DS_Store 这个是mac系统的文件，与cordova无关，与项目无关

可以看到<script type="text/javascript" src="js/index.js"></script>这句代码引入的index.js是没有任何问题的。

可是！！！我的cordova.js文件呢？？？引入了一个没有的文件？？？

最终查出来，这个cordova.js文件他是会根据不同的平台而形成不同的cordova.js文件的。。。吐血。。。

可以看到，我最终生成的iOS平台下的目录

其他东西看不懂没关系，看到 www 目录下就好了，index.html 同级下生成了 cordova.js 文件了。

所以，如果遇到这个问题，别纠结这个文件为什么不存在了。

index.js

先看代码

var app = {    // Application Constructor    initialize: function() {        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);    },    // deviceready Event Handler    //    // Bind any cordova events here. Common events are:    // 'pause', 'resume', etc.    onDeviceReady: function() {        this.receivedEvent('deviceready');    },    // Update DOM on a Received Event    receivedEvent: function(id) {        var parentElement = document.getElementById(id);        var listeningElement = parentElement.querySelector('.listening');        var receivedElement = parentElement.querySelector('.received');        listeningElement.setAttribute('style', 'display:none;');        receivedElement.setAttribute('style', 'display:block;');        console.log('Received Event: ' + id);    }};app.initialize();

也不复杂，就一个对象，里面有几个方法罢了。

一开始调用 app.initialize() 方法，那就看这个方法做了什么，简单来说，添加一个事件绑定，当设备准备好之后调用 onDeviceReady 方法，而在这个方法内调用一些事件绑定而已了，一般在这里做的事情就判断一下我们插入的插件是否已经激活，以及做插件对应的事情了。

大概整个cordova项目就是这样的了，接下来总结一下Ionic的项目基本结构，over。