cordova

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
- 注册账号,登录
image
- 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
      这里写图片描述
      点击进去后会跳出一个页面
      这里写图片描述
发布了61 篇原创文章 · 获赞 50 · 访问量 10万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览