-
cordova
2019-08-23 15:44:38cordova 对应gradle版本 E:\npm\MyApp\platforms\android\gradle\wrapper gradle-wrapper.properties 里面有一个gradle 版本 cordova requirements npm install -g cordova cordova platform add andr...AndroidStudio 修改安卓28
cordova 对应gradle版本 E:\npm\MyApp\platforms\android\gradle\wrapper gradle-wrapper.properties 里面有一个gradle 版本
cordova requirementsnpm install -g cordova
cordova platform add android //cordova platform rm android
cordova build android
cordova emulate android
cordova run android
https://www.w3cschool.cn/cordova/cordova_first_application.html
https://segmentfault.com/a/1190000013159076?utm_source=tag-newestgradle插件的安装
https://www.cnblogs.com/leilei0327/p/7054652.htmlhttp://life.tom.com/shcs/201808/1933740017.html
https://www.w3cschool.cn/cordova/cordova_first_application.html
https://www.cnblogs.com/doscanner/p/5630601.html
C:\Windows\System32>npm install -g cordova
-
Cordova
2019-04-06 19:07:091安装nodejs 2安装android studio (配置环境1java环境2android环境) ...2执行cordova create 子项目名 package包名 应用名 cordova create mycordova com.example.hello helloWorld 3 cd到子项目名...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 -
CORDOVA
2018-10-31 17:21:04、cordova提供了一组设备相关的API,通过这组API,移动应用能够以js访问原生的设备更能,如摄像头,麦克风等。 2>、cordova提供了一组统一的js移动类库,以及为这些类库所用的设备相关的原生...Cordova是一个工具,通过它可以将你做的html网页显示在WebView里面,而你网页中用到的JS可以通过他的API去调用原生的东西,比如照相机等。
一、1>、cordova提供了一组设备相关的API,通过这组API,移动应用能够以js访问原生的设备更能,如摄像头,麦克风等。
2>、cordova提供了一组统一的js移动类库,以及为这些类库所用的设备相关的原生后台代码。
3>、cordova支持如下操作系统:iOS,Android,Ubuntu phone os,blackberry,Windows phone,Plan WEBOS,bada和symbian。二、Cordova/PhoneGap关系
Cordpva是贡献給Apache后的开源项目,是从PhoneGap中抽出的核心代码,是驱动PhoneGap的核心引擎。尓可以把它们的关系想象成类于Webkit和Google Chrome的关系。三、 安装Cordova
创建app:
cordova create CordovaProject io,cordova.hellocordova CordovaApp
//cordova create test com.cordova.test test ( 创建cordova工程<文件夹名> <包名> <app名> )
添加平台:
cordova platform add android (也可以把android换成|I0S)
构建和运行:
cordova build android/ios/browser
启动模拟器:
cordova emulate android/ios/browser
运行程序:
cordova run android/ios/browser
检查你当前平台设置状况:
cordova platform ls
检测你是否满足构建平台的要求:
cordova requirements
[检测结果:]
JAVA JDK可以从:http://www.oracle.com/technetwork/java/javase下载。四、文件名及作用
hooks :存放自定义cordova命令的脚本文件。每个project命令都可以定义before和after的Hook,比如: before_ build after_ build。 没用过,不展开了。
platforms :平台目录,各自的平台代码就放在这里,可以放一下平台专属的代码,现在这个目录应该是空的,后面介绍如何创建平台。
plugins :插件目录,安装的插件会放在这里。后面有文章绍开发插件。
www :最重要的目录,存放项目主题的HTML5和JS代码的目录。app-开始打开的就是这个目录中index.htm文件。
config.xml:主要是cordova的一些配置,比如:项目使用了哪些插件、应用图标icon和启动页面SplashScreen ,修改app的版本,名字等信息,还有平台的配置。五、安装Android Studio
Start a new Android Studio project --- 创建一个新的Android项目
Open an existing Android Studio Project --- 打开已有的Android Studio项目
Import an Android code sample ---导入Android代码样例
Check out project from Version Control --- 从版本控制库中获取项目(团队开发)
Import project(Eclipse ADT, Gradle, etc.) --- 导入其他开发环境中的项目
Configure --- 设置。你可以在这里导入导出配置文件、管理插件和SDK,以及更新等等。六、打开项目运行时 开 platforms -->android(配置模拟器)
七、分析运行:
打开scr下com.example.hello下的MainActivity.java。
Activity在启动的时候会首先调用onCreate方法。(安卓有关)loadUrl(launchUrl);会在当前的WebView中去加载首页,当然这个首页是我们自己配置的,在res/xml/config.xml中。<content src="index.html" />。这个路径都是指的assets/www下的路径。
这样这个app启动的时候会首先调用这个MainActivity(当然这是在AndroidManifest.xml中配置的),然后Activity启动的时候会将index.html加载在其WebView中,然后我们就看到了Cordova的页面。八、index页面里,会加载两个js文件。cordova.js就是cordova的api,调用原生内容用的,相当于jar包。
七、添加插件 --- cordova plugin add cordova-plugin-camera(插件名称)
卸载插件 --- cordova plugin remove cordova-plugin-camera【更新cordova】
更新到最新版本: $ sudo npm update -g cordova
安装指定版本: $ sudo npm install -g cordova@3.1.0-0.2.0
查找最新的cordova版本: $ npm info cordova version
更新完cordova后,更新目标项目的平台: $ cordova platform update android --save -
Cordova Demo
2014-07-11 10:14:18Cordova的一个Demo,功能是读取图片,选择上传。服务器地址没改,大家可以参照我需要的参数自己写一个后台 -
cordova 6.3
2017-12-19 16:58:09包含android-support-v7-appcompat.jar,android-support-v4.jar,cordovalib-6.3.0.jar,cordova-6.3.0.jar基础jar包 -
Cordova Plugin: nodejs-mobile-cordova plugin install fails for Cordova version 8.0
2020-12-02 13:02:16<div><ul><li><strong>Version</strong>: Cordova 8.0.0</li><li><strong>Platform</strong>: Ubuntu 16.04.3 LTS Linux 4.4.0-112-generic #135-Ubuntu SMP Fri Jan 19 11:48:36 UTC 2018 x86_64</li><li><strong>... -
cordova-plugin-apple-watch, Cordova/phonegap 苹果手表(Apple Watch) 插件 Apache Cordova.zip
2019-10-10 05:57:52cordova-plugin-apple-watch, Cordova/phonegap 苹果手表(Apple Watch) 插件 Apache Cordova 用于 Apache Cordova 的 苹果手表(Apple Watch) 插件 为( WatchKit ) 提供英镑 Cordova/phonegap插件,以便在Cordova应用... -
cordova-plugin-social-message, Cordova/phonegap社会消息插件,Apache Cordova> = 3.0.0.zip
2019-09-18 09:21:56cordova-plugin-social-message, Cordova/phonegap社会消息插件,Apache Cordova> = 3.0.0 面向 Apache Cordova 的 社交消息插件 Cordova插件利用原生共享功能。 为 Apache Cordova> = 3.0.0开发。 将文本,图片和... -
Cordova入门
2017-11-27 11:35:51Cordova入门 标签: 技术学习 Cordova入门 概述 1 移动端的开发模式 2 Cordova基本介绍 Cordova安装Mac环境 1 安装Nodejs 2 安装git 2 安装cordova 创建Cordova 工程 1 创建项目 1 添加平台 1 目录说明 ...Cordova入门
标签:Cordova
名词 链接 描述 Cordova http://cordova.apache.org/ Hybrid App中间件 ios-deploy https://github.com/phonegap/ios-deploy 使用命令行部署iOS项目 PhoneGap https://phonegap.com/ 使用Web快速开发、打包Hybrid APP Node.js https://nodejs.org/en/ 基于 Chrome V8 引擎的 JavaScript 运行环境。 npm https://www.npmjs.com/ Node.js的包管理器 Git https://git-scm.com/ 分布式版本控制库 ionic http://ionicframework.com/ 基于Angular的H5框架 Angular https://angularjs.org/ 优秀的前端JS框架 PhoneGap100 http://www.phonegap100.com/ Hybrid App社区 1 概述
1.1 移动端的开发模式
Native App
传统的原生APP开发模式,Android基于Java语言,底层调用Google的API;iOS基于OC或者Swift语言,底层调用Apple官方提供的API。体验最好。Web App
移动端的网站,将页面部署在服务器上,然后用户使用各大浏览器访问。一般泛指SPA(SinglePageApplication)模式开发出的网站。体验最差。Hybrid App
混合开发,由Native通过JSBridge等方法提供统一的API,然后用Html5+JS来写实际的逻辑,调用API,这种模式下,由于Android,iOS的API一般有一致性,而且最终的页面也是在webview中显示,具有跨平台效果。React Native App
Facebook开源的一套新的APP开发方案,使用JS+部分原生语法来实现功能。初次学习成本较高,但是在入门后,经过良好的封装也能够实现大部分的跨平台。而且体验很好。
React Native不属于Hybrid 开发。虽然同样是一处编写,处处运行,但是 Hybrid是 HTML 和原生代码混合实现,而React Native只不过是以 JavaScript 的形式告诉 Objective-C 该执行什么代码。
1.2 Cordova基本介绍
Cordova前身是PhoneGap,而PhoneGap是Nitobi软件公司2008年推出的一个框架,旨在弥补web和iOS之间的不足,使得web和iPhone SDK之间的交互更容易,后来又陆续加入了更多的平台。
2011年被Adobe收购,同年晚些时候,该项目核心代码被捐赠给Apache软件基金会(ASF),以保持透明和开放的发展,而Apache将其更名为Cordova。- Cordova提供了一组设备相关的API,通过这组API,移动应用能够以 JavaScript 访问原生的设备功能,如摄像头、麦克风等。
- Cordova还提供了一组统一的 JavaScript 类库,以及为这些类库所用的设备相关的原生后台代码。
- Cordova支持如下移动操作系统:iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。
现在,Adobe PhoneGap™提供了其他Adobe服务的附加工具,包括PhoneGap Developer App,PhoneGap Desktop App,PhoneGap Build和PhoneGap Enterprise等工具。
但是Apache Cordova依然是支持Adobe PhoneGap™的引擎,类似于WebKit为Chrome或Safari提供引擎。可以理解为Adobe PhoneGap™是Apache Cordova™的应用发行版。原理图如下
2 Cordova安装(Mac环境)
2.1 安装Node.js
要安装Cordova,需要先安装Node.js。在[Node.js官网][2]上下载并安装即可。
运行命令 正常输出信息则安装成功node -v
npm -v
2.2 安装git
macOS和linux都自带git,使用命令
git --version
检查git,如果没有安装可以到[git官网][3]下载安装一个git客户端。
2.3 安装Cordova
在终端执行
sudo npm install -g cordova
等待一段时间即可安装完毕,使用
cordova -v
查看安装是否成功。
此外还有更新Cordova的命令
sudo npm update cordova -g
Cordova更新完成后,还需要更新平台(比如更新ios)
cordova platform update ios
3 创建Cordova 工程
3.1 创建项目
在终端中切换目录到工作目录下,执行以下命令
cordova create hello com.example.hello HelloWorld
参数说明:
名称 必填 描述 hello 必填 工程的文件夹名,会创建一个同名文件夹 com.example.hello 可选 应用程序的id名,与Xcode中类似,可以在 config.xml 中修改,如果不指定的话默认为 io.cordova.hellocordova HelloWorld 可选 App的名称,也可在 config.xml 中修改 同时我们也可以通过npm平台在本地创建模板工程,可以在这里寻找.
找到想使用的模板后,使用该模板创建项目,方法是–template在create命令中指定标志,然后指定模板源。
从NPM,Git存储库或本地路径创建一个cordova项目:$ cordova create hello com.example.hello HelloWorld --template <npm-package-name> $ cordova create hello com.example.hello HelloWorld --template <git-remote-url> $ cordova create hello com.example.hello HelloWorld --template <path-to-template>
3.2 添加平台
然后我们需要为我们的项目添加运行的平台,比如我们添加iOS和安卓,就可以执行以下命令:(下列命令都是在项目根目录下执行,cd到
hello
)cordova platform add ios
cordova platform add android
同时,我们也可以使用下面的命令查看Cordova 支持的平台和项目已经添加的平台:
cordova platforms ls
3.3 目录说明
项目已经创建完毕, 展现出来的目录结构如下图所示:
同时官方给出的目录结构是这样的:
myapp/
|– config.xml
|– hooks/
|– merges/
| | |– android/
| | |– windows/
| | |– ios/
|– www/
|– platforms/
| |– android/
| |– windows/
| |– ios/
|– plugins/
|–cordova-plugin-camera/名称 描述 config.xml cordova的配置文件 hooks 存放自定义Cordova命令的脚本文件。每个project命令都可以定义before和after的Hook,比如:before_build、after_build platforms 各个平台的项目,不要手动修改,因为在build的时候会被覆盖。 plugins 插件目录(Cordova提供的原生API也是以插件的形式提供的) www 源代码目录,在Cordova prepare的时候会被copy到各个平台工程的assets\www目录中。 其中index.html为应用的入口文件。 node_modules npm的依赖文件 merges目录 4+的版本取消了这个文件夹
存放各个平台特殊的文件,会和www进行合并编译,相同的文件merges下的文件优先。 比如:
merges/
|– ios/
| |– app.js
|– android/
| |– android.js
www/
| |– app.js
编译成iOS应用的话,包含merges/ios/app.js;而Android应用的话,包含www/app.js、merges/android/android.js3 开发项目
3.1 工程目录和Cordova的生命周期
使用xcode打开platforms/ios/HelloWorld.xcworkspace 来打开项目,默认的Cordova工程看起来是这个样子:
可以看到 Staging 文件夹下面有个 www 文件夹和一个 config.xml 文件(黄色标注)。
而在 Staging 文件夹外也有个 www 文件夹和一个 config.xml 文件(红色标注的)。
实际上Staging 外的www文件夹就是cordova/hello下的, Staging 下的www文件夹是在platforms/ios里的, Staging 下的config.xml 金仅作用于iOS平台,主要是配置插件。
也就是说每次Cordova编译的时候,或者更新工程、安装插件时都会重新把红色里的文件覆盖到各个平台下的文件(黄色标注的)。而且如果同时只编辑单个平台工程文件夹下的html页面,也不符合一次编写,同时编译发布多平台的跨平台应用开发思想。
所以一般都是编辑外面的(红色标注)www文件夹里的文件,然后重新 build 工程。初始工程在模拟器中运行效果如下:
Cordova提供APP状态的监测(iOS),包括:名称 描述 deviceready 当Cordova加载完成会触发 pause 当应用程序进入到后台会触发 resumes 应用程序从后台进入到前台会触发
详细的事件以及支持列表如下:
我们将index页面修改为如下内容,展示APP的状态监测:<!DOCTYPE html> <html> <head> <title>Pause Example</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> //页面加载后添加各事件监听 function onLoad() { document.addEventListener("deviceready", onDeviceReady, false); document.addEventListener("resume", onResume, false); document.addEventListener("pause", onPause, false); } //Cordova加载完毕 function onDeviceReady() { alert("Cordova加载完毕!"); } //进入后台 function onPause() { console.log("应用进入到后台!"); } //恢复到前台 function onResume() { alert("应用回到前台运行!"); } </script> </head> <body onload="onLoad()"> </body> </html>
3.2 Cordova build
在开发完页面以后,我们需要构建项目将新的修改部署到各平台的项目中。
如果我们向使用命令行构建和运行iOS APP需要先安装 ios-deploy
android需要安装JDK和androidSDK。安装xcode命令行工具:
xcode-select --install
执行下列命令安装 ios-deploy:
sudo npm install -g ios-deploy //如果安装失败可以使用 sudo npm install -g ios-deploy --unsafe-perm=true
xcodebuild
安装后我们就可以运行以下命令为所有平台构建项目:
cordova build
也可以构建特定的平台 如“ios”:
cordova build ios
利用 ios-deploy我们可以直接使用命令:
cordova run ios
或在模拟器中运行:
cordova emulate ios //指定模拟器使用的模拟设备: cordova emulate ios --target iPhone-6s cordova emulate ios --target iPhone-6s-Plus
APP运行后就可以接收到状态监听如下图:
3.3 浏览器访问和调试
我们也可以启动Cordova自带的服务器,通过浏览器来访问程序页面
(1) 运行如下命令输出访问地址:cordova server
在浏览器中即可打开
(2) 在Safari 中调试
打开 Safari 的“偏好设置”-> “高级” -> “在菜单栏中显示开发菜单”
在Safari菜单项“开发” -> “Simulator”中选择对应的html页面:
在调试器中可以添加断点跟踪调试:
在“控制台”中就可以看到输出的调试信息:最新的Cordova 中,iOS平台自动集成了一些开发插件,比如控制台输出,所以在Xcode的控制台我们也可以看到console.log的输出。
4 Cordova插件
4.1 使用核心插件
Cordova插件使的微博APP得到了调用设备功能的能力,插件通常托管在npm上,我们可以在插件搜索页面上搜索。
同事一些关键的API由Apache Cordova提供开源项目,这些API被称为核心插件API。
我们可以使用CLI命令打开搜索页面:cordova plugin search camera
使用
plugin add
命令添加插件:cordova plugin add example
使用下面的命令来查看当前使用的插件:
cordova plugin ls
下面我们使用相机插件来实现拍照功能
执行下面命令来添加相机插件:cordova plugin add cordova-plugin-camera
可以看到在hello/plugin目录下成功添加了相机插件
同时在iOS工程下的Plugins组下也多了相机相关的代码文件
修改index.html 修改为以下内容:<!DOCTYPE html> <html> <head> <title>Capture Photo</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> var destinationType; document.addEventListener("deviceready",onDeviceReady,false); //Cordova加载完成会触发 function onDeviceReady() { destinationType=navigator.camera.DestinationType; } //拍照并编辑 function capturePhotoEdit() { //拍照并获取Base64编码的图像(quality : 存储图像的质量,范围是[0,100]) //allowEdit: true 拍照完毕后允许简单编辑 //correctOrientation: true 自动旋转照片 保证照片方向正确 //saveToPhotoAlbum: true 拍摄后保存到相册 //cameraDirection: Camera.Direction.FRONT 打开前置摄像头 //cameraDirection: Camera.Direction.BACK 默认值 后置摄像头 navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL }); } //拍照成功 function onPhotoDataSuccess(imageData) { console.log(imageData); var smallImage = document.getElementById('smallImage'); smallImage.style.display = 'block'; smallImage.src = "data:image/jpeg;base64," + imageData; } //拍照失败 function onFail(message) { alert('拍照失败: ' + message); } </script> </head> <body style="padding-top:50px"> <button style="font-size:23px;" onclick="capturePhotoEdit();">拍照并编辑</button> <br> <img style="display:none;width:240px;height:240px;" id="smallImage" src="" /> </body> </html>
在iOS10 下,调用相机需要进行权限提示,需要在info.plist中添加
NSCameraUsageDescription
值,否则会出现crash。
相册权限值为NSPhotoLibraryUsageDescription
4.2 实现自定义插件
插件包括一个JavaScript接口以及相应的本地代码,用于支持不同的平台,同时还需要实现配置文件。
Cordova通过JavaScript 接口来调用插件的本地原生代码,其中最核心的就是
cordova.exec
cordova.exec(function(winParam) {}, function(error) {}, "service", "action", ["firstArgument", "secondArgument", 42, false]);
以下是每个参数的描述:
名称 描述 function(winParam) {} 成功回调函数。假设你的 exec调用成功完成,这个函数和你传递给它的参数一起执行。 function(error) {} 错误回调函数。如果操作未成功完成,则此函数使用可选的错误参数执行。 service 在本机平台调用的服务名称,对应于本地的同名类。 action 在本机端调用的方法名称。这通常对应于上述类的同名方法。 [/* arguments */] 传入本地环境的参数数组。 在
Plugins
文件夹下创建IPaynowTestPlugin
类,继承自CDVPlugin
,同时要引入CDVPlugin.h
。代码如下:
// // IPaynowTestPlugin.h // HelloWorld // // Created by Chuck on 2017/11/22. // #import <Cordova/CDVPlugin.h> @interface IPaynowTestPlugin : CDVPlugin - (void)verifyPassword:(CDVInvokedUrlCommand*)command; @end
// // IPaynowTestPlugin.m // HelloWorld // // Created by Chuck on 2017/11/22. // #import "IPaynowTestPlugin.h" @implementation IPaynowTestPlugin - (void)verifyPassword:(CDVInvokedUrlCommand *)command{ //插件回调 CDVPluginResult* pluginResult = nil; NSString* code = @""; //取参 if(command.arguments.count > 0){ code = [command.arguments objectAtIndex:0]; } //验证 if(code .length<3){ pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"密码格式错误"]; }else if([code isEqualToString:@"ipaynow"]){ pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK]; }else{ pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"密码错误"]; } [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId]; } @end
在Staging
目录下的config.xml
配置文件的widget
节点下添加如下内容:<feature name="iPaynowTestPlugin"> <param name="ios-package" value="IPaynowTestPlugin" /> <param name="onload" value="true" /> </feature>
修改index.html 代码如下:<!DOCTYPE html> <html> <head> <title>密码验证</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> function verify() { //获取输入的字符 var password = document.getElementById("pwd").value; //调用自定义的插件 Cordova.exec(successFunction, failFunction, "iPaynowTestPlugin", "verifyPassword", [password]); } //验证成功 function successFunction(){ alert("密码验证成功!"); } //验证失败 function failFunction(message){ alert("验证失败:"+message); } </script> <style> * { font-size:1em; } </style> </head> <body style="padding-top:50px;"> <input type="text" id="pwd" > <button onclick="verify();">验证</button> </body> </html>
运行效果如下4.3 封装多平台插件
上面的密码验证仅是iOS平台下的插件,根据一处编写多处运行的优点,我们应该将其封装为多平台通用。
(1)安装plugman
使用版本命令检查安装:
plugman -v
执行以下命令安装:
//sudo 是为获取 `/usr/local/lib/node_modules` 的写入权限 sudo npm install -g plugman
plugman的相关命令如下
Create A Plugin --------------- $ plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variable NAME=VALUE] Parameters: - <pluginName>: The name of the plugin - <pluginID>: An ID for the plugin, ex: org.bar.foo - <version>: A version for the plugin, ex: 0.0.1 - <directory>: An absolute or relative path for the directory where the plugin project will be created - variable NAME=VALUE: Extra variables such as description or Author Add a Package.JSON file to plugin --------------------------------- Creates a package.json file in the plugin based on values from plugin.xml. $ plugman createpackagejson <directory> Add a Platform to a Plugin -------------------------- $ plugman platform add --platform_name <platform> Parameters: - <platform>: One of android, ios Remove a Platform from a Plugin ------------------------------- $ plugman platform remove --platform_name <platform> Parameters: - <platform>: One of android, ios
(2)创建一个插件
命令格式如下:$ plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variable NAME=VALUE]
名称 描述 pluginName 插件的名称 pluginID 插件的ID version 插件的版本 directory 一个绝对或相对路径的目录,该目录将创建插件项目,缺省的话将在当前目录下创建一个插件名称的文件夹 variable NAME=VALUE 额外的描述,如作者信息和相关描述
示例:plugman create --name iPaynowTestPlugin --plugin_id iPaynowTestPlugin --plugin_version 1.0.0
为插件添加支持的平台,这里添加iOS和android
cd到插件的根目录下执行:plugman platform add --platform_name android
plugman platform add --platform_name ios
执行完毕后的目录是这样的:
(3)将我们的iOS 源码文件拷贝到
src/ios/
路径下修改
plugin.xml
内容如下:<?xml version='1.0' encoding='utf-8'?> <plugin id="iPaynowTestPlugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android"> <name>iPaynowTestPlugin</name> <description>This plugin use to verify password</description> <js-module name="iPaynowTestPlugin" src="www/iPaynowTestPlugin.js"> <clobbers target="cordova.plugins.iPaynowTestPlugin" /> </js-module> <!-- iOS --> <platform name="ios"> <config-file parent="/*" target="config.xml"> <feature name="iPaynowTestPlugin"> <param name="ios-package" value="IPaynowTestPlugin" /> </feature> </config-file> <header-file src="src/ios/IPaynowTestPlugin.h" /> <source-file src="src/ios/IPaynowTestPlugin.m" /> </platform> <!-- android --> <platform name="android"> <config-file parent="/*" target="res/xml/config.xml"> <feature name="iPaynowTestPlugin"> <param name="android-package" value="iPaynowTestPlugin.iPaynowTestPlugin" /> </feature> </config-file> <config-file parent="/*" target="AndroidManifest.xml"> </config-file> <source-file src="src/android/iPaynowTestPlugin.java" target-dir="src/iPaynowTestPlugin/iPaynowTestPlugin" /> </platform> </plugin>
修改iPaynowTestPlugin.js
内容如下:'use strict'; var exec = require('cordova/exec'); var iPaynowTestPlugin = { verifyPassword: function(sendMsg, onSuccess, onFail) { return exec(onSuccess, onFail, 'iPaynowTestPlugin', 'verifyPassword', [sendMsg]); } }; module.exports = iPaynowTestPlugin;;
关于
Node.js 的 module
可以查看这里(4)配置基本完成,但是我们还需要创建一个
package.json
文件。package.json
是npm的一个描述文件,用于管理等等,
如果没有这个文件在我们添加插件的时候,可能会出现needs a valid package.json
错误而无法安装插件。
生成该文件的命令如下plugman createpackagejson <directory>
但是目前可能是由于保留字冲突的bug,这个命令无法正常使用,总是提示
pkg is not defined
,详细信息在这里。不过我们可以使用下面的命令生成,开发时按提示常规填写信息即可,发布到npm平台可以再行编辑,在这里查看示例
npm init
到此插件基本配置完成,效果如下(5)现在我们将本地的插件添加到项目中,我们新建一个项目
pluginTest
,添加iOS和android平台cordova create pluginTest com.example.pluginTest pluguinTest cordova platform add ios cordova platform add android
进入项目的根目录执行命令:
cordova plugin add /Users/liuning1/Playground/iPaynowTestPlugin
卸载拆件使用
cordova plugin rm iPaynowTestPlugin
我们可以看到 在pluginTest/plugins 目录下以及iOS、android工程下都添加了我们自定义的插件。
(6)我们使用iOS项目演示插件的使用。
我们依然可以使用之前使用的代码来调用插件:cordova.exec(successFunction, failFunction, "iPaynowTestPlugin", "verifyPassword", [password]);
不过我们已经对插件进行了封装,可以使用更
插件名称.插件方法()
来调用插件了:cordova.plugins.iPaynowTestPlugin.verifyPassword(password, successFunction, failFunction);
其中
cordova.plugins.iPaynowTestPlugin
对应在插件的plugin.xml
配置文件中的<clobbers target="cordova.plugins.iPaynowTestPlugin" />
。
再进行进步一的优化,使用匿名函数处理回调,添加插件验证,代码如下:<!DOCTYPE html> <html> <head> <title>密码验证</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> function verify() { //获取输入的字符 var password = document.getElementById("pwd").value; //调用自定义的验证插件 if (cordova.plugins.iPaynowTestPlugin) { cordova.plugins.iPaynowTestPlugin.verifyPassword(password, function() { alert("密码验证成功!");}, function(message){ alert("验证失败:"+message); }); }else{ alert("未安装插件!"); } } </script> <style> * { font-size:1em; } </style> </head> <body style="padding-top:50px;"> <input type="text" id="pwd" > <button onclick="verify();">验证</button> </body> </html>
(7)上传插件到npm平台
上面我们都是在本地进行开发使用,如果想共享和远程安装,就需要上传到npm平台。
现将插件上传到github,然后完善package.json
文件内容,同时需要npm账户,如果没有注册用户,先执行:npm addUser
已有用户执行登录操作:
npm login
最后执行发布:
npm publish
然后在npm中就可以找到自己上传的包,便可以通过
cordova plugin add **
进行插件的安装了。5 现有项目嵌入Cordova模块
上面的例子中我们都是在 Cordova 创建的iOS 项目中演示,但是当我在现有的 iOS 项目中也是可以嵌入Cordova模块的。
5.1 添加文件
首先需要创建一个新的Cordova项目并添加 iOS 平台。
进入新建Cordova项目的
/platforms/ios
文件夹,将cordova、CordovaLib、platform_www、www
以及config.xml
文件复制到新建Xcode项目的根路径中。将 Cordova/platforms/ios/HelloCordova 目录下的 config.xml,拷贝到 XcodeProject/XcodeProject 目录下:
右键 Add Files to … ,将 CordovaLib.xcodeproj 添加进来
同样 Add Files to … ,将 config.xml 添加进来
把前面拷贝过来的 www 文件夹拖到工程中来(注意选择不复制文件,保持目录结构)
5.2 添加配置
在配置页的 Build Settings -> Other Linker Flags 中添加”-ObjC -all_load”
(5)在配置页的 Build Phases 标签中添加如下两个库
Target Dependencies -> CordovaLib
Link Binary With Libraries -> libCordova.a点击配置页的 Build Phases 标签坐上角的加号,添加一个 Run Script
名字改成:Copy www directory
去掉 show environment variables in build log 勾选
Shell脚本的内容如下:NODEJS_PATH=/usr/local/bin; NVM_NODE_PATH=~/.nvm/versions/node/`nvm version 2>/dev/null`/bin; N_NODE_PATH=`find /usr/local/n/versions/node/* -maxdepth 0 -type d 2>/dev/null | tail -1`/bin; XCODE_NODE_PATH=`xcode-select --print-path`/usr/share/xcs/Node/bin; PATH=$NODEJS_PATH:$NVM_NODE_PATH:$N_NODE_PATH:$XCODE_NODE_PATH:$PATH && node cordova/lib/copy-www-build-step.js
5.3 使用CDVViewController
#import <Cordova/CDVViewController.h> #import <Cordova/CDVCommandDelegateImpl.h> #import <Cordova/CDVCommandQueue.h> #import <Cordova/CDVPlugin.h>
- (IBAction)click:(UIButton *)sender { CDVViewController*cdvController = [[CDVViewController alloc]init]; [self presentViewController:cdvController animated:YES completion:^{ }]; }
6 Ionic/Angular和Cordova
6.1 三者的关系
目前比较流行的一个开发方案是Ionic+Cordova。
Ionic是一个基于谷歌angualr的HTML5框架,它提供了很多 UI 组件和本地原生应用组件,基于PhoneGap/Cordova的编译平台来帮助开发者快速创建跨平台的移动应用。
Ionic是Angular的衍生品,Angular是单独的js库,和jQuery一样能够独立用于开发应用,而Ionic只是对Angular进行了扩展,利用Angular实现了很多符合移动端应用的组件,并搭建了很完善的样式库,是对Angular最成功的应用样例。
即使不使用Ionic,Angular也可与任意样式库,如Bootstrap、Foundation等搭配使用,得到想要的页面效果。
它们在混合开发中扮演的是不同的角色–Ionic/Angular负责页面的实现,而Cordova负责将实现的页面包装成原生应用(Android:apk;iOS:ipa)。6.1 ioniccreator
一个可视化编辑工具,生成 ionic 项目
点击这里7 问题解决
7.1 Error: spawn EACCES
ANDROID_HOME=/Users/Chuck/Library/Android/sdk JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_144.jdk/Contents/Home Error: spawn EACCES
原因是cordova中的android项目下可执行文件没有权限执行,解决办法
cd platforms/android/cordova chmod 777 build log run clean version
或者使用下面命令输出错误的文件路径
cordova build --release --verbose android //输出 Command finished with error code 0: /usr/libexec/java_home ANDROID_HOME=/Users/Chuck/Library/Android/sdk JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_144.jdk/Contents/Home Running command: "/Applications/Android Studio.app/Contents/gradle/gradle-4.1/bin/gradle" -p /Users/Chuck/Playground/1124/hello/platforms/android wrapper -b /Users/Chuck/Playground/1124/hello/platforms/android/wrapper.gradle Error: spawn EACCES
最终解决(空格需要转义)
$ sudo chmod -R 777 /Applications/Android\ Studio.app/Contents/gradle
7.2 npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
$ npm install -g ios-deploy npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules npm ERR! path /usr/local/lib/node_modules npm ERR! code EACCES npm ERR! errno -13 npm ERR! syscall access npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules' npm ERR! { Error: EACCES: permission denied, access '/usr/local/lib/node_modules' npm ERR! stack: 'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules\'', npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'access', npm ERR! path: '/usr/local/lib/node_modules' } npm ERR! npm ERR! Please try running this command again as root/Administrator. npm ERR! A complete log of this run can be found in: npm ERR! /Users/Chuck/.npm/_logs/2017-11-24T07_53_38_901Z-debug.log ** BUILD FAILED ** The following build commands failed: Check dependencies Write auxiliary files (2 failures) npm ERR! code ELIFECYCLE npm ERR! errno 65 npm ERR! ios-deploy@1.9.2 preinstall: `./src/scripts/check_reqs.js && xcodebuild` npm ERR! Exit status 65 npm ERR! npm ERR! Failed at the ios-deploy@1.9.2 preinstall script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/Chuck/.npm/_logs/2017-11-24T07_55_03_125Z-debug.log
解决办法,使用
sudo npm install -g ios-deploy --unsafe-perm=true
7.3 ARCHIVE FAILED
** ARCHIVE FAILED ** The following build commands failed: Check dependencies (1 failure) Error: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/Chuck/Playground/1124/hello/platforms/ios/cordova/build-debug.xcconfig,-workspace,HelloWorld.xcworkspace,-scheme,HelloWorld,-configuration,Debug,-destination,generic/platform=iOS,-archivePath,HelloWorld.xcarchive,archive,CONFIGURATION_BUILD_DIR=/Users/Chuck/Playground/1124/hello/platforms/ios/build/device,SHARED_PRECOMPS_DIR=/Users/Chuck/Playground/1124/hello/platforms/ios/build/sharedpch
原因是开发者证书没有配置,打开Xcode,配置 signing 即可。
-
Cordova 笔记
2018-08-24 15:49:00npm instal -g cordova 安装 卸载cordova npm unistall cordova -g 安装指定版本 npm install -g cordova@4.1.1 1、创建应用项目及目录介绍 cordova create CordovaProject io.cordova.hellocordova ... -
Android+Cordova混合开发以及Cordova自定义插件
2017-08-11 23:25:49Android+Cordova混合开发以及Cordova自定义插件 AndroidCordova混合开发以及Cordova自定义插件 美女镇楼 一AndroidStudio中集成Cordova项目 创建Cordova项目 项目中添加Android平台 AndroidStudio中导入... -
cordova-file-cache, Cordova应用的出色文件缓存.zip
2019-10-10 05:56:51cordova-file-cache, Cordova应用的出色文件缓存 cordova-file-cacheCordova应用超出色的文件缓存基于 cordova-promise-fs 。正在启动 # fetch code using bower bower install cordova- -
variable PLAY_SERVICES_VERSION not honored with cordova 8.1.2 and cordova android 6.4
2020-12-08 21:53:00to /Users/dboho/experiments/cordova-example/cordova-8-1-2/platforms/android/cordova-android-play-services-gradle-release/properties.gradle Adding cordova-android-play-services-gradle-release to ... -
cordova-imagePicker, Cordova插件,用于多图像选择.zip
2019-09-18 08:11:25cordova-imagePicker, Cordova插件,用于多图像选择 cordova-imagepicker为iOS和安卓 4.0及上版本实现的多个图像选择的Cordova插件。安装插件插件符合Cordova插件规范,它可以使用 Cordova/phonegap 命令行 接口安装... -
创建cordova
2019-03-11 11:20:191.环境搭建 1.下载并安装Node.js。...安装cordova模块 $ sudo npm install -g cordova(cordova -v查看版本,在root目录下一定加sudo) 3.跟新cordova版本 sudo npm update -g cordova 2.创建应用 ...
-
ubuntu-18.04.3虚拟机安装方法+VMwareTools安装方法
-
备战2021软考网络规划设计师顺利通关培训套餐
-
postgresql-13.0.tar.gz
-
MNIST数据集
-
自动清空回收站脚本
-
浙大版《数据结构(第2版)》题目集习题3.8 符号配对 (20分) 易理解版。
-
2021-1-15
-
03 Python程序文件结构.mp4
-
Unity游戏开发之数字华容道
-
单元测试UnitTest+Pytest【Selenium3】
-
转行做IT-第2章 HTML入门及高级应用
-
Segment tree
-
(Training 11)Codeforces Round #691
-
彻底学会正则表达式
-
蓝桥杯 入门训练 BEGIN-2 序列求和
-
信号的频谱分析.pdf
-
量化高频交易系统tick数据采集
-
vgg19_weights_tf_dim_ordering_tf_kernels_notop.h5
-
Katago围棋分析(三)
-
蓝桥杯 入门训练 BEGIN-3 圆的面积