cordova_cordoav-CSDN博客

本文链接：https://blog.csdn.net/u012967849/article/details/53791892

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的基本功能

电池状态

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

定位，重力加速器

定位：
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(){},
        {}
    )
}

媒体
震动状态栏
网络状态
照相机

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整合

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

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
  
  点击进去后会跳出一个页面