-
原 cordova2016-12-21 22:00:21 u012967849 阅读数 906
-
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 ios6.cordova 插件的使用,cordova任何功能和模块都是插件的形式
有两类插件:
- 系统自带的插件 camera,geolocation
- 找到插件的名称
- 将插件添加到项目里面
cordova plugin add (插件名称)
cordova plugin add cordova-plugin-camera - 通过api使用
navigator.camera.getPicture( function(){},function(){},{})
- 一些本身系统不具备的,必须第三方所提供
- 首页:plugins
点击进去后会跳出一个页面
- 首页:plugins
-
原 Cordova2019-01-18 17:04:13 qq_30856231 阅读数 217
-
最近做项目,顺便学学cordova打包APK,踩过很多坑,最后总结出一份完整的cordova环境配置笔记和APP打包笔记:
简介:
Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。
Cordova还提供了一组统一的JavaScript类库,以及为这些类库所用的设备相关的原生后台代码。检测是否满足构建平台的要求:
cordova requirements
打包常用命令:
cordova create first com.example.first firstApp
cd first
cordova platform add android --save
cordova platform ls
cordova build android
cordova plugin add cordova-plugin-camera
cordova plugin ls项目中配置cordova
npm install -g cordova
cordova-plugin-themeablebrowser插件使用整理
http://blog.csdn.net/u011127019/article/details/55259565
cordova.ThemeableBrowser.open(url,config.browser_target, config.browser_options).addEventListener('loadstart', function(e) { $toast.hide(); }).addEventListener(cordova.ThemeableBrowser.EVT_ERR, function(e) { $toast.show(e.message); });
- 1.此插件可以实现独立窗口打开页面,但是全屏设置好像没有起作用
- 2.此插件可以配置标题栏、关闭按钮、分享按钮,菜单按钮等
- 3.此插件依赖InAppBrowser
APP 兼容性测试
- 腾讯 Wetest
http://wetest.qq.com/cloud/report/result?testid=e4e38b6e48e5c18382e274c29a694e7b
- TestBird
https://www.testbird.com/
报错
-
把android SDK 27 卸载掉
-
android SDK 没下载全,需要检查更新
注意: 打包文件中不能出现中文命名的文件、文件夹 打包路径上,不能有非iscii值,中文路径。
注意更新cordova和android SDK
设置 应用图标(android)
在应用目录下找到
platforms\android\res
目录
在res目录下找到所有有icon.png文件的
然后把icon.png文件覆盖成你的。
命令窗口下执行cordova build android即可生成带有自己图标应用的android程序。【环境搭建:】
1、安装node.js
下载安装node.js,https://nodejs.org/en/,安装cordova时需要使用。安装完成之后在终端(win+r,cmd)执行node -v,
如果看到如下所示的版本号表示安装成功。D:\file\0000 wingconnFile\UI>
node -v
v6.11.2node -v
2.安装java jdk
下载http://www.oracle.com/technetwork/java/javase/downloads/index.html,
【下载】java: jdk-8u151-windows-x64.exe【安装】到C盘, C:\Program Files\Java 下有两个文件夹: jdk1.8.0_151 jre1.8.0_151
【配置环境变量】:
JAVA_HOME : C:\Program Files\Java\jdk1.8.0_151
path : %JAVA_HOME%\bin
CLASSPATH : %JAVA_HOME%\bin【检查】安装是否OK
我用的是:
D:\file\001 ownnote_ktv\cordova\first>java -version
java version “1.8.0_151”
Java™ SE Runtime Environment (build 1.8.0_151-b12)
Java HotSpot™ 64-Bit Server VM (build 25.151-b12, mixed mode)java -version
javac3.安装ant
下载连接:http://ant.apache.org/bindownload.cgi,下载完成之后解压到你想安装的目录,比如D:\ant。然后将目录添加到系统变量里,
步骤如下:右击我的电脑,点击属性,左侧菜单点击高级系统设置,在弹窗中点击环境变量,
然后在用户变量中添加变量ANT_HOME,值为D:\ant,添加变量path,值为D:\ant\bin,添加变量classpath,值为D:\ant\lib。
配置好之后在终端输入ant -v,如果出现如下图所示则表示成功。D:\file\0000 wingconnFile\UI>
ant -v
Unable to locate tools.jar. Expected to find it in D:\software\JDK2\lib\tools.jar Apache Ant(TM) version 1.9.9 compiled on February 2 2017 Trying the default build file: build.xml Buildfile: build.xml does not exist! Build failed > ant -v
4.安装 Android SDK
http://tools.android-studio.org/index.php/sdk/
下载 android-sdk-windows 解压配环境变量
输入命令: 检测是否安装成功,如果有一堆内容,就配置完成了android -h
android adb
android list target5.安装cordova. 在终端执行下面命令
npm install -g cordova
cordova -v测试安装是否成功,终端输入cordova -v,如果出现如下所示提示表示安装成功
D:\file\0000 wingconnFile\UI>
cordova -v
6.0.0- 检测是否满足构建平台的要求: 【编译app前进行检测】
cordova requirements
Requirements check results for android:
Java JDK: installed .
Android SDK: installed
Android target: installed android-23,android-27
Gradle: installed
如果以上都已经完成了,那恭喜你环境配置成功了!提过遇到
Android target: installed failed
Gradle: installed failed
把 android7.查看项目安装的插件
cordova plugin list
cordova plugin ls参考:【cordova官网】 http://cordova.axuer.com/docs/zh-cn/latest/guide/cli/index.html
参考: http://www.cnblogs.com/xiyangbaixue/archive/2016/04/11/5374728.html
【【【【创建第一个应用:】】】】
1.在终端进入你想要创建的目录,执行下面的命令:
cordova create first com.example.first firstApp
CordovaDemo:项目文件夹名
com.first.first:项目包名,first为目录
firstApp:项目,app名称2.添加平台
cd first
cordova platform add android --save
cordova platform ls添加android平台,下载可能会比较慢.
到这里我们的cordova项目就创建好了。6.【可检测是否满足构建平台】
3.编译app
cordova build android
编译android系统,最后如果看到build successful,就可以了
如果报错: 是关于android-sdk的错。接下来就是苦逼的安装各种sdk了。我也不知道咋装,反正我现在还在装…cordova build android
4.运行app
模拟器上运行
cordova emulate android
浏览器上运行
浏览器访问http://localhost:8000即可cordova serve android
真机上运行
cordova run android
恭喜你第一个应用程序完成了!
5、添加插件
cordova plugin add cordova-plugin-camera6、查看插件
cordova plugin lsD:\file\0000 wingconnFile\cordova\eservice>cordova plugin ls cordova-plugin-barcodescanner 0.7.3 "BarcodeScanner" // 二维码扫描插件 cordova-plugin-compat 1.2.0 "Compat" // 为了与以前版本的cordova保持向后兼容 cordova-plugin-device 1.1.7 "Device" // 获取设备基本信息 cordova-plugin-dialogs 1.2.1 "Notificati // 使用本地对话框UI元素 cordova-plugin-geolocation 2.1.0 "Geolocatio // 地理定位插件 cordova-plugin-network-information 1.2.1 "Network Informatio // 获取有关无线连接的信息 cordova-plugin-splashscreen 3.1.0 "Splashscreen" // 启动页面 cordova-plugin-statusbar 2.1.3 "StatusBa // 状态栏设置 cordova-plugin-themeablebrowser 0.2.17 "ThemeableBrowser // cordova-plugin-whitelist 1.3.3 "Whitelis // cordova-plugin-x-toast 2.6.0 "Toast" // cordova-plugin-x5-webview 3.1.0 "X5 WebView Engi //
常用命令:
1、创建应用cordova create first com.example.first firstApp
2、添加平台
cordova platform add android
cordova platform add ios
cordova platform add amazon-fireos
cordova platform add blackberry10
cordova platform add firefoxos3、查看平台
cordova platforms ls
4、删除平台
cordova platform remove android
或者
cordova platform rm android5、添加插件
cordova plugin add cordova-plugin-camera6、查看插件
cordova plugin ls7、打包app
cordova build android
8、运行app
cordova emulate android
cordova serve android
cordova run android总结:
hybrid app相对native app来说开发起来速度快,相对容易,但是没有native那么流畅,性能和体验稍微差些。
并且文件大小相差也很大,同样一个应用native只要几k,二hybrid却要几兆。下面是我自己分别使用cordova和phonegap开发的新闻应用,欢迎大家安装使用。
https://github.com/baixuexiyang/hybrid -
2019-01-10 00:29:56 u010982507 阅读数 186
-
之前学习了
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工程就创建成功了。
-
2016-08-30 20:58:41 yueguanyun 阅读数 490
-
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 阅读数 2631
-
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插件 相关内容

原生cordova插件 相关内容

原生cordova插件 相关内容

原生cordova插件 相关内容

原生cordova插件 相关内容
-
阅读数 245
-
阅读数 524