1.搭建cordova(phonegap)混合开发环境

cordova需要虚拟机安卓或者iOS
1. 安装cordova到全局 cnpm install cordova -g
2. 创建cordova项目 cordova create MyApp
3. 给项目添加平台支持
- cd MyApp
- cordova platform add ios
4. 运行项目 cordova run ios | android
5. 电脑上面安装cordova desktop
6. 创建项目
7. desktop打开启动项目
8. 在手机上面 安装phonegap developer
9. 连接电脑
10. 直接进行调试

2. cordova helloworld程序

如果希望项目在哪个平台上面进行运行，就要添加项目对平台的支持
cordova platform add android | ios | browser

• hooks
• platforms 当前支持的平台
• plugins 放一些第三方插件
• www 防止当前自己编写html,css,js
• config.xml 当前项目核心配置
• 原生将桥接js注入到webview里面，原生注入的事件在哪个里面

• deviceready：

  • 采用Cordova开发的应用在运行的时候，Cordova提供的通过HTML5调用Native功能并不是立即就能使用的，Cordova框架在读入HTML5代码之后，要进行HTML5和Native建立桥接，在未能完成这个桥接的初始的情况下，是不能调用Native功能的。在Cordova框架中，当这个桥接的初始化完成后，会调用他自身特有的事件，即deviceready事件。

  • 所以首先应该在HTML中注册deviceready的事件监听，在它的CallBack函数中再去使用Cordova的功能。

 document.addEventListener('deviceready',this.onDeviceReady.bind(this), false);

需要注意的是：deviceready事件是在每回读入HTML的时候都会被调用，而不只是应用启动时调用。

什么时候可以调用原生？

• document.addEventListener(‘deviceready’,function(){
  事件监听 事件触发一定要写在事件监听的函数里面
• },false);

3.熟练一些cordova的基本功能

1. 电池状态

 window.addEventListener("batterystatus", function(s){
            alert(s.level);
}, false);

1. 定位，重力加速器

定位：
var myApp = (function(){
    getLocation=function(){
        navigator.geolocation.getCurrentPosition(function(pos){
            alert('ok ~~ can geolocation');
            alert(pos.coords.latitude);
        },function(){},{})
    }
    return{
        getLocation:getLocation,
    }
})()

加速度：
var getAccer=function(){
    navigator.accelerometer.getCurrentAcceleration(
        function(ac){
            alert('x:'+ac.x);
            alert('y:'+ac.y);
            alert('z:'+ac.y);
        },
        function(){},
        {}
    )
}

1. 媒体
2. 震动 状态栏
3. 网络状态
4. 照相机

var btn = document.getElementsByTagName('button')[0];
    btn.ontouchend=function(){
        //1.关于拍照 cordova 里面任何对象都托管在navigator里面
         alert('camera');
         alert(JSON.stringify(navigator));
        navigator.camera.getPicture(
            function(path){
                alert('拍照成功');
                alert(path);
            },
            function(){
                alert('error');
            },
            {
                quality:100,//照片质量0--100
                // destinationType:PictureSourceType.PHOTOLIBRARY,//目标路径   enum枚举  PictureSourceType.PHOTOLIBRARY 放到图片库
                // targetWidth:320,
                // tragetHeight:480,//限定拍摄照片的大小
                // encodingType:png,
                // sourceType:PHOTOLIBRARY,//等于给拍摄好的照片设置的来源
            });
    }

4.把 ionic+angular+cordova整合

1. 为项目添加支持browser(浏览器支持)，Android，iOS支持
2. angularjs,ionic集成进来
3. ionic+angular+cordova在调试状态下可以正常使用
4. 在这种环境中调用和测试原生接口

5.打包 真机调试

www里面资源变成apk,ipa,
1. 在线进行打包
- https://build.phonegap.com
- 注册账号，登录

- new app
- 上传.zip文件
- 打包
2. ios借助于xcode,安卓借助于sdk
切盘到当前目录里面
cordova build android sdk –>java 1.8以上
cordova build ios

6.cordova 插件的使用，cordova任何功能和模块都是插件的形式

有两类插件：

• 系统自带的插件 camera,geolocation
  
  • 找到插件的名称
  • 将插件添加到项目里面
    cordova plugin add (插件名称)
    cordova plugin add cordova-plugin-camera
  • 通过api使用

 navigator.camera.getPicture(
    function(){},function(){},{})

• 一些本身系统不具备的，必须第三方所提供
  
  • 首页：plugins
    
    点击进去后会跳出一个页面
    

1安装nodejs
2安装android studio
（配置环境1java环境2android环境）


3安装全局Cordova
1使用cnpm install -g cordova
2执行cordova create 子项目名 package包名 应用名
cordova create mycordova com.example.hello helloWorld
3 cd到子项目名mycordova
4Cordova platform ls 检查你的电脑支持平台

5 安装安卓 执行Cordova platform add android
6 Cordova build android
（要记得配置安卓环境，）
（需要android studio 中配置需要的AVD,SDK.）
(不然会出现的提示)

7上面完成后， cordova build android还是过不了的，会提示有些包下载不了，向下面这种，直接复制地址，然后放到C:\Users\admin\Desktop\cordova\mycordova\platforms\android\gradle\wrapper 这个文件下。然后再次运行Cordova run android。需要等待一会。下载的东西比较多

8完成之后apk会放到C:\Users\admin\Desktop\cordova\mycordova\platforms\android\build\outputs\apk
这个位置下。

9如果要使用 虚拟机运行， cordova emlate android 这个如果不行（cordova emlate --target=虚拟机名 android）
10 浏览器运行，cordova serve android 浏览器访问地址：http://localhost:8000/

如果遇到问题度娘会帮你的哦。也可以关注qq群821327721。有问题大家都可以帮忙解答

Cordova 插件安装
1 Cordova plugin add Cordova-plugin-bettery-status 等插件失败

2 解决办法，设置npm代理。

chrome调试
Ripple Emulate：使用Google模拟器，可以帮到大部分的调试，除了需要调用手机设备方面的功能除外。

安装 npm install -g ripple-emulator
运行 ripple emulate

之前学习了cordova的使用，也看了很久的cordova源码，其中翻阅了不少博客文章，但是有些文章写的cordova版本都比较旧，而且内容层次也不深，所以现在把cordova源码的学习写成文章，一是加深自己的理解，二是也希望对大家有所帮助。

本文概览

• Cordova的介绍
• Cordova的安装
• 创建Cordova工程

Cordova的介绍

说到Cordova，它还有另一个名字，最开始叫phonegap，后来被Apache收购后，就把核心代码抽离出来，形成了Cordova，这些在网上都能查到，所以不做过多解释。
Cordova官网是：https://cordova.apache.org/

Cordova的安装

Cordova的安装需要使用到npm，所以第一步要安装NodeJs，NodeJs中自带npm。全局安装Cordova使用命令

npm install -g cordova

以前安装的Cordova是6.3.0版本，现在安装的应该是8.1.2。如果以前的电脑上安装过Cordova，现在安装可能会报错，我的就报错了，如下图所示：

从网上查了下资料，解决了这个问题，需要到C:\Users\admin\AppData\Roaming\npm\node_modules\cordova目录下将cordova目录删除，然后再以管理员的身份运行cmd，如下图所示：

然后再执行全局安装Cordova命令，安装成功，然后执行cordova -v查看当前版本号

创建Cordova工程

1、新建一个工作目录，在工作目录中打开控制台，执行命令

cordova create MyApp

会在当前目录下创建一个MyApp的工程，工程目录结构如下：

2、添加Android平台

cordova platform add android

执行完之后会在platforms目录下创建一个android工程，先不要着急用Android Studio打开Android工程，我们先看下Android工程的gradle配置，其中gradle插件配置使用的是3.0.1，gradle的配置使用的是4.1，编译版本使用的是Android的27，所以，如果默认配置与自己电脑上的配置不一致，我们要先改成自己电脑上的配置，然后再打开Android工程进行编译。

• 修改Android工程根目录下的build.gradle文件

classpath 'com.android.tools.build:gradle:3.0.1'

project.ext {
  defaultBuildToolsVersion="26.0.2" //String
  defaultMinSdkVersion=19 //Integer - Minimum requirement is Android 4.4
  defaultTargetSdkVersion=22 //Integer - We ALWAYS target the latest by default
  defaultCompileSdkVersion=26 //Integer - We ALWAYS compile with the latest by default
}

• 修改CordovaLib目录下的build.gradle文件

ext {
    apply from: 'cordova.gradle'
    cdvCompileSdkVersion = 26
    cdvBuildToolsVersion = '26.0.2'
}

dependencies {
    classpath 'com.android.tools.build:gradle:3.0.1'
    classpath 'com.github.dcendents:android-maven-gradle-plugin:1.5'
    classpath 'com.jfrog.bintray.gradle:gradle-bintray-plugin:1.7.3'
}

• 修改App目录下的build.gradle文件

dependencies {
    classpath 'com.android.tools.build:gradle:3.0.1'
}

task wrapper(type: Wrapper) {
    gradleVersion = '4.1.0'
}

• 修改Android工程根目录下的project.properties文件

target=android-26

这些修改完之后，重新编译应用，编译完成后运行，会看到显示界面。到此为止，Cordova工程就创建成功了。

Cordova支持如下移动操作系统：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

Cordova是贡献给Apache后的开源项目，是从PhoneGap中抽出的核心代码，是驱动PhoneGap的核心引擎。你可以把它们的关系想象成类似于Webkit和Google Chrome的关系

环境配置

cordova 是 node.js 的一个插件，可以用npm 分发。所以电脑需要先配置 node.js 环境

node.js 环境配置

常见命令

安装 cordova：

npm install -g cordova

创建应用程序

cordova create hello com.example.hello HelloWorld 

添加平台

cordova platform add android
cordova platform add ios

完成后运行以下命令查看：

cordova platfrom list

移除Android平台支持

cordova platform rm android

运行以下命令编译应用程序：

cordova build

或

cordova build android  //只针对Andorid平台编译

实际上build命令相当于以下两个命令：

cordova prepare android
cordova compile android

启动模拟器：

cordova emulate android

##插件管理
可以用CLI搜索可用的插件：

cordova plugin search bar code // 搜索 bar code

安装插件，比如:

cordova plugin add org.apache.cordova.device                   //设备API
cordova plugin add org.apache.cordova.network-information  //网络（事件）
cordova plugin add org.apache.cordova.battery-status      //电池（事件）
cordova plugin add org.apache.cordova.device-motion     //加速器
cordova plugin add org.apache.cordova.device-orientation     //罗盘
cordova plugin add org.apache.cordova.geolocation         //定位
cordova plugin add org.apache.cordova.camera                 //摄像头
cordova plugin add org.apache.cordova.media-capture     //媒体文件处理
cordova plugin add org.apache.cordova.media                   //媒体文件处理
cordova plugin add org.apache.cordova.file                        //文件访问
cordova plugin add org.apache.cordova.file-transfer          //文件传输
cordova plugin add org.apache.cordova.dialogs                 //对话框
cordova plugin add org.apache.cordova.vibration              //震动
cordova plugin add org.apache.cordova.contacts               //联系人
cordova plugin add org.apache.cordova.globalization       //全球化
cordova plugin add org.apache.cordova.splashscreen       //闪屏
cordova plugin add org.apache.cordova.inappbrowser             //打开新的浏览器窗口
cordova plugin add org.apache.cordova.console                //调试控制台

你可以用以下命令查看所有已经安装的插件

cordova plugin ls

使用以下命令删除插件：

cordova plugin rm org.apache.cordova.console    

或者通过地址来添加插件：

cordova plugin add https://github.com/apache/cordova-plugin-console.git

帮助：

cordova help

更新cordova：

npm update -g cordova

cordova更新完成后，还需要更新项目：

cordova platform update android

Ps: Cordova 从4.3版本开始支持 平台 和 插件 管理

示例：创建一个 cordova 项目

• 第一步 创建 App 目录结构

➜  ~ cd Desktop/cordovaDemo 
➜  cordovaDemo cordova create CordovaTest com.example.Test CordovaTest

Creating a new cordova project.
➜  cordovaDemo 

这就在指定路径下生成了cordova App的目录结构. 顺便说一下create指令的含义

Ps:最好在这里就确定项目名，否则 cordova 改项目名称很麻烦，也不彻底

• 第二步添加 iOS 或者 Android 平台

进入到 App 所在文件夹。执行命令，以 iOS 平台为例

 cd /Users/shinho/Desktop/CordovaTest/CordovaTest 

添加 iOS 平台

cordova platform add ios save

如果需要指定工程版本，在后面添加 @x.x.x 版本号就行

cordova platform add ios@4.4.0

至此 cordova App已经创建成功

App 配置 config.xml

cordova 官网

App 的所有配置都是通过 config.xml进行的，所以对 config.xml 务必有所了解

Config.xml

xml 里面常见的标签配置如：是否允许跨域，自定义插件,浏览器配置等。

#自定义插件

Cordova 完全通过插件的形式完成前端 和 Native 的交互。Native 的主要工作就是寻找或者自定义需要的插件。

Cordova.js 是如何调用插件的？

                function buttonClick(){
                    Cordova.exec(successFunction, failFunction, "Scanplugin", "scan");
                }

                function js 方法(){
                    Cordova.exec(成功回调, 失败回调, " native 类名", "具体的方法名称",["参数"]);
                }

所以前端 JS 调用的是指定 类名下 的具体方法，并有可能携带参数。

类名即是我们的插件名称， 方法就是 插件的 某一个函数

##安装 plugman

安装插件需要先装node.js 插件 plugman

npm install -g plugman

自定义 plugin

➜  ~ cd Desktop/demo/pluginTest 
➜  pluginTest plugman create --name  UtilPlugin --plugin_id cordova.Ym. UtilPlugin --plugin_version 1.0.0

对应命令：

plugman create –name pluginName –plugin_id pluginID –plugin_version version [–path path]

参数说明:

pluginName：插件名称，如MyToast；
pluginID：插件id, 如:org.demo.mytoast；
version：版本号, 如:0.0.1；
path：插件存放的绝对或相对路径；
variable NAME=VALUE：扩展参数，如说明或作者，如woodstream

后来 Cordova 改版，自定义插件 都需要 package.json

plugman createpackagejson /Users/shinho/Desktop/demo/pluginTest/UtilPlugin

plugman createpackagejson <自定义插件路径>. 步骤如下：

➜  UtilPlugin plugman createpackagejson /Users/shinho/Desktop/demo/pluginTest/UtilPlugin
name: (cordova.Ym.) 
version: (1.0.0) 
description: 这是一个自定义的插件
git repository: 
author: 
license: (ISC) 
About to write to /Users/shinho/Desktop/demo/pluginTest/UtilPlugin/package.json:

{
  "name": "cordova.Ym.",
  "version": "1.0.0",
  "description": "这是一个自定义的插件",
  "cordova": {
    "id": "cordova.Ym.",
    "platforms": []
  },
  "keywords": [
    "ecosystem:cordova"
  ],
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes
➜  UtilPlugin 

添加插件支持的平台

plugman platform add --platform_name android
plugman platform add --platform_name ios 

在 src 目录下，会生成 ios 和 android 两个目录和对应的文件。

自定义插件完毕

添加已有的插件

将现有的 App 插件 和 前端配合， 实现快速开发