-
原 cordova2016-12-21 22:00:21 u012967849 阅读数 918
-
-
Cordova+React+OnsenUI+Redux新闻App开发实战教程
Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。
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 阅读数 270
-
-
Cordova+React+OnsenUI+Redux新闻App开发实战教程
Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。
最近做项目,顺便学学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 阅读数 191
-
-
Cordova+React+OnsenUI+Redux新闻App开发实战教程
Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。
之前学习了
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 阅读数 495
-
-
Cordova+React+OnsenUI+Redux新闻App开发实战教程
Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。
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 阅读数 2633
-
-
Cordova+React+OnsenUI+Redux新闻App开发实战教程
Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。
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 相关内容
-
阅读数 252
-
阅读数 525