cordova
来源:互联网 发布:学生网络诈骗事例 编辑:程序博客网 时间:2024/05/17 04:47
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
点击进去后会跳出一个页面
- 首页:plugins
- Cordova
- cordova
- Cordova
- Cordova
- cordova
- cordova
- Cordova
- Cordova
- cordova
- Cordova
- Cordova
- Cordova
- Cordova
- cordova
- cordova
- cordova
- 学习cordova
- cordova介绍
- 【最小生成树】Prim算法和Kruskal算法的区别对比
- 《合成孔径雷达成像——算法与实现》之【12】仿真图5.17
- Leetcode 371 Sum of Two Integers
- 逻辑位运算小结5
- JTable列排序
- cordova
- Qt打开,保存,另存为图片
- 剪月亮
- 欧拉计划 37
- N-Queens
- BIOS低地址1M 内存分布图
- 【Codeforces 652 B z-sort 】
- HDU 1517 A Multiplication Game(巴什博弈)
- 用一个简单示例演示在python中调用C及C++