什么是Cordova
    Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来，并依靠符合标准的API绑定去访问每个设备的功能，比如说：传感器、数据、网络状态等。
为什么要用Cordova？
    随着移动互联网的发展，现在基本是APP满天飞，不知在大家印象中，如果我去下载一个APP，那么基本都能看到有两种选择，一种是Android版本，一种是IOS版本。不管我的手机是哪种操作系统，安装完一个APP之后，后续如果有新的版本发布的时候，我还必须去更新，才能享用新版本里的功能。
    那么有没有一种方式，我只需要开发一个APP版本，就能去适配通用的操作系统呢，不仅可以适配Android、IOS，还可以适配其他系统，比如Windows Phone、 Palm WebOS、Blackberry等等**。Cordova就能提供这种能力，代码写一次，就能到处运行，跟我们日常开发网站效果一样，基于写Web APP，根据输出平台要求不同，就能提供不同类型的安装包。**Cordova其设计初衷是希望用户群体能够通过跨平台开发的方法降低原生开发的成本，为此，开发人员需要安装原生开发环境，配置工程，使用html5/CSS3/javascript和原生SDK生成应用。

Apache Cordova适用范围:
- 移动应用开发者，想扩展一个应用的使用平台，而不通过每个平台的语言和工具集重新实现。
- web开发者，想包装部署自己的web App将其分发到各个应用商店门户。
- 移动应用开发者，有兴趣混合原生应用组建和一个WebView(一个特别的浏览器窗口) 可以接触设备A级PI，或者你想开发一个原生和WebView组件之间的插件接口。

Cordova的特点
- 跨平台：同一套代码可以用在不同的平台中(IOS和Android)，减少代码量
- web App包装器：将单页面应用打包成App
- webView和native的桥梁：优雅的实现WbeView和native的沟通


开发方式
- 跨平台(CLI)的工作流：
  如果你想你的App运行在尽可能多的移动操作系统，那么就使用这个工作流，你只需要很少的特定平台开发。 这个工作流围绕这'cordova'CLI(命令行)。CLI是一个高级别的工具，他允许一次构建多个平台的项目，抽象了很多功能性的低级别shell脚本。CLI把公用的web资源复制到每个移动平台的子目录，根据每个平台做必要的配置变化，运行构建脚本生成2进制文件。CLI统一也提供通用接口，将插件应用在app中。除非你有一个以平台为中心的工作流，否则建议你使用跨平台工作流。
- 平台为中心的工作流(企业级的开发):
  如果你专注于构建单独平台的App或者需要需要在底层修改它那么就使用这个工作流吧。你需要使用这种方法，如果你需要你的App混合原生组件和基于Web的Cordova组件, 正如 嵌入WebView讨论的。作为一个经验法则，如果你需要修改SDK中的项目那么使用这个工作流。 这个工作流依靠一组低级别的shell脚本，他们是给每个支持平台量身定做的，还有一个单独的Plugman工具允许你添加插件。 虽然你可以使用这个工作流构建跨平台应用，但通常这是非常困难的，因为缺乏高基本的工具，意思就是是单独的构建生命周期并且插件修改需要对每一个平台进行。

创建一个App
安装Cordova CLI
    npm install -g cordova
创建App
    cordova create path（文件夹名字）id（应用id名字）name（应用名字）
    cordova create hello com.example.hello HelloWorld
cordova create命令生成基于web的应用程序的骨骼，项目的主页是 www/index.html 文件。
项目目录结构
- config.xml ：cordova的配置文件
- hooks目录  
    存放自定义cordova命令的脚本文件。每个project命令都可以定义before和after的Hook，比如：before_build、after_build。  
   Hook可以采用任何编程语言来写，Cordova CLI采用的是Node.js，所以一般都是用它来写。
- platforms目录  
    各个平台的原生代码工程，不要手动修改，因为在build的时候会被覆盖。
- plugins目录  
    插件目录（cordova提供的原生API也是以插件的形式提供的）。
- www目录  
    源代码目录，在cordova prepare的时候会被copy到各个平台工程的assets\www目录中。  
    其中index.html为应用的入口文件

添加平台
    cd Hello
给你的App添加目标平台。我们将会添加'ios'和'android'平台，并确保他们保存在了config.xml中:
    IOS:
    cordova platform add ios --save
    android:
    cordova platform add android --save
    浏览器：
    cordova platform add browser
检查你当前平台设置状况:
    cordova platform ls
**注意:在你使用CLI创建应用的时候， 不要 修改/platforms/目录中的任何文件。当准备构建应用或者重新安装插件时这个目录通常会被重写。

构建的先决条件
    要构建和运行APP，需要安装每个你需要平台的SDK。另外，当你使用浏览器开发你可以添加 `browser`平台，它不需要任何平台SDK。
Andriod平台要求：
- Java开发工具包(JDK)：配置环境变量
- Android SDK：配置环境变量

构建APP
默认情况下, cordova create生产基于web应用程序的骨架，项目开始页面位于www/index.html 文件。任何初始化任务应该在www/js/index.js文件中的deviceready事件的事件处理函数中。
为所有的平台构建
    cordova build
选择限制平台构建:Andriod
    cordova build Android

测试APP
手机插入电脑，在手机上直接测试App:
    cordova run android

添加插件
plugin要添加camera插件，我们需要指定camera的npm包名
    cordova plugin add 插件名
使用 plugin ls (或者 plugin list, 或者 plugin自己)查看当前安装的插件。每个插件现实它的标识:
    cordova plugin ls
    cordova-plugin-camera 2.1.0 "Camera"
    cordova-plugin-whitelist 1.2.1 "Whitelist"

更新Cordova和你的项目
在安装cordova工具之后，你可以运行下面命令更新到最新版本
    npm update -g cordova
用下面语法安装指定版本:
    npm install -g cordova@3.1.0-0.2.0
运行cordova -v查看当前版本。要查找最新的cordova版本，可以运行:
    npm info cordova version
更新完cordova后，更新目标项目的平台:
    cordova platform update android --save
    cordova platform update ios --save

使用cordova打包vue项目
1.建立一个vue项目
2.在vue项目的文件目录中建立一个cordova项目
- 创建cordova项目
      cordova create path（文件夹名字）id（应用id名字）name（应用名字）
      exmple：cordova create myproject com.example.myproject testpro
- cd到cordova文件目录下
      cd myproject
- 添加平台
      cordova platform add android
3.准备打包工作
- 首先修改vue项目的index.html，在head之间加入
       <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">
  注意：加入<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:;">这个可能导致页面样式改变，如果改变则不加，否则还是建议加上。这段主要是防止跨站脚本攻击。
- 在index.html中引入cordova.js
      <body>
          <div id="app"></div>
          <script type="text/javascript" src="cordova.js"></script>
          <!-- built files will be auto injected -->
      </body>
- 修改src下面的index.js为下面的代码
          // The Vue build version to load with the `import` command
          // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
          import Vue from 'vue'
          import App from './App'
          import router from './router'
          Vue.config.productionTip = false
          /* eslint-disable no-new */
          document.addEventListener('deviceready', function() {
              new Vue({
                  el: '#app',
                  router,
                  store,
                  template: '<App/>',
                  components: { App }
              })
              window.navigator.splashscreen.hide()
          }, false)
- 修改config文件夹中的index.js文件，修改build中的
      assetsSubDirectory: 'static',
      assetsPublicPath: '/',
      为
      assetsSubDirectory: '',
      assetsPublicPath: '',
- 运行
      npm run dev

4.打包
- 先在vue项目中运行 npm run build， 执行完成后会生成一个dist文件夹，找到这个文件夹将里面的所有文件复制到你的cordova项目的www文件夹下替换它原有的文件。
- cordova目录中运行 cordova build android会生成一个可执行的apk文件，然后在android studio模拟器中运行

奈斯