cordova
2016-12-21 22:00:21 u012967849 阅读数 764

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
      这里写图片描述
      点击进去后会跳出一个页面
      这里写图片描述
Cordova
2019-04-06 19:07:09 weixin_44285123 阅读数 36

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

2019-01-10 00:29:56 u010982507 阅读数 132

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

本文概览

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

Cordova的介绍

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

Cordova的安装

Cordova的安装需要使用到npm,所以第一步要安装NodeJsNodeJs中自带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工程就创建成功了。
在这里插入图片描述

2016-08-30 20:58:41 yueguanyun 阅读数 455
Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。
Cordova还提供了一组统一的JavaScript类库,以及为这些类库所用的设备相关的原生后台代码。

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

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

2016-06-08 09:46:21 zlin3007 阅读数 2586

1、安装 npm install -g  cordova        等待

2、查看版本   cordova -v

3、 cordova create <工程路径> <包名> <工程名>   

cordova create 001_01 "com.test01.net" test01   

生成后目录结构:


config.xml:主要是cordova的一些配置,比如:项目使用了哪些插件、应用图标icon和启动页面SplashScreen,还有平台的配置。 

hooks:存放自定义cordova命令的脚本文件。每个project命令都可以定义before和after的Hook,比如:before_build、after_build。没怎么用过,不展开了。

platforms:平台目录,各自的平台代码就放在这里,可以放一下平台专属的代码,现在这个目录应该是空的,后面会介绍如何创建平台。

plugins:插件目录,安装的插件会放在这里。后面会有专门的文章介绍开发插件。

www:最重要的目录,存放项目主题的HTML5和JS代码的目录。app一开始打开的就是这个目录中index.html文件。


4、添加android平台    cordova platforms add android  

5、导入platforms下 的过程到eclipese就完成


常用命令

命令 说明
cordova create <工程路径> <包名> <工程名> 创建cordova工程,例如:cordova create helloworld_prj "org.zhangyafei.helloworld" "helloworld"
cordova build android 给cordova项目添加android平台。
cordova run android
编译和运行项目。
cordova install android
将编译好的应用程序安装到模拟器上。
cordova plugin add <插件完全限定名> 给项目添加插件。
cordova plugin remove <插件完全限定名> 删除插件。
cordova plugin list
查看插件列表。
cordova platforms add android 
添加平台支持。
cordova build android
编译代码
cordova emulate android
在模拟器上运行(前提是创建好AVD)
cordova serve android
在浏览器运行 
cordova run android
通过USB直接安装到真机


cordova App脚手架

阅读数 195

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