cordova 环境配制和创建插件
环境配制
英文网站:http://cordova.apache.org/
中文网站:http://cordova.axuer.com/
安装Cordova
Cordova的命令行运行在Node.js 上面并且可以通过NPM安装。 根据 平台具体指导 安装相应平台的依赖。打开命令提示符或终端,然后键入npm install -g cordova.
创建一个项目
使用命令行创建一个空的Cordova项目。导航到你希望创建项目的目录,然后键入 cordova create <path>。
要知道这个命令完整的选项,键入cordova help create。
cordova create <PATH> [ID [NAME [CONFIG]]] [options]
例如:cordova create hello com.wrs.helloworld HelloWorld
cordova create 路径 BundleID/PackageID 名称
添加一个平台
在创建完一个Cordova项目后,导航到项目目录。在项目目录中,你需要添加你想构建app的平台
为了添加平台, 键入 cordova platform add <platform name>。
为了知道你可以添加的平台,你可以运行cordova platform。
例如:cordova platform ios android
运行App
在命令中,键入cordova run <platform name>。
例如:cordova run ios
常用命令:
cordova prepare:将项目根目录下www文件替换到各个平台下的对应目录,并配制各个平台的插件、修改各平台下config.xml文件及相关配置
cordova requirements:检查是否满足构建平台要求
cordova build:为所有添加平台构建www/js/index.js文件中的deviceready事件
cordova emulate:重新构建APP并运行,如:cordova emulate android
cordova plugin search 插件名:搜索插件,如:cordova plugin search camera
cordova plugin add 插件名:添加插件,如:cordova plugin add camera
cordova plugin rm 插件名:删除插件,如:cordova plugin rm camera
cordova plugin ls:查看已安装插件
创建插件
安装plugman
npm install -g plugman
创建插件模板
plugman create --name JSBridge --plugin_id com.wrs.plugin --plugin_version 1.0.0
进入目录cd JSBridge
添加支持平台
plugman platform add --platform_name android
plugman platform add --platform_name ios
修改模板内容
plugin.xml修改为:
<?xml version='1.0' encoding='utf-8'?>
<plugin id="JSBridge" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
<name>JSBridge</name>
<js-module name="JSBridge" src="www/JSBridge.js">
<clobbers target="cordova.plugins.JSBridge" />
</js-module>
<platform name="android">
<config-file parent="/*" target="res/xml/config.xml">
<feature name="JSBridge">
<param name="android-package" value="com.wrs.plugin.JSBridge" />
</feature>
</config-file>
<config-file parent="/*" target="AndroidManifest.xml" />
<source-file src="src/android/JSBridge.java" target-dir="src/com/wrs/plugin" />
</platform>
<platform name="ios">
<config-file parent="/*" target="config.xml">
<feature name="JSBridge">
<param name="ios-package" value="JSBridge" />
</feature>
</config-file>
<source-file src="src/ios/JSBridge.m" />
</platform>
</plugin>
将 <source-file src=”src/android/JSBridge.java” target-dir=”src/com/wrs/plugin/JSBridge” />修改为:
<source-file src="src/android/JSBridge.java" target-dir="src/com/wrs/plugin" />
target-dir:将JSBridge.java拷贝到此目录下,对应的是目录名
clobbers:前段通过这个clobbers来调用www/JSBridge.js的导出方法
feature:定义服务名,feature会被注册到平台下的config.xml文件中,www/JSBridge.js里实际上是通过这个服务名来调用原生方法的:
exec(success, error, "JSBridge", "coolMethod", [arg0]);
<param name="android-package" value="com.wrs.plugin.JSBridge" />定义android的原生调用方法,value为包名+类名
<param name="ios-package" value="JSBridge" />定义ios的原生调用方法,value为类名
<source-file src="src/android/:声明Android源码路径,target-dir:声明Android源码安装的时候将被拷贝到Android项目的哪个文件夹下 JSBridge.js:JSBridge.java" target-dir="src/com/wrs/plugin" />
var exec = require('cordova/exec'); exports.coolMethod = function(arg0, success, error) {
exec(success, error, "JSBridge", "coolMethod", [arg0]);
};
前端业务调用方法:
cordova.plugins..coolMegthod(arg0, success, error); 整个调用流程为:JSBridge
js调用cordova.plugins..coolMegthod(arg0, success, error);JSBridge
底层为
cordova调用exec(success, error, "JSBridge", "coolMethod", [arg0]); 模式为:exec(success, error, Service, Action, []);
Service是各自平台下config.xml里定义的feature名
Action对iOS来说是执行对应的方法,对Android来说作为方法入参action 在插件目录调用打包插件命令:
sudo plugman createpackagejson .
可以生成一个 package.json,防止安装插件时出现:
Error: Invalid Plugin! xxxxx needs a valid package.json
如果不是以插件的方式,前段与原生需要互相调用的话,可以这样配置:
在iOS平台下的config.xml,即:Staging/wwww/config.xml添加:
<feature name="JSBridge">
<param name="ios-package" value="JSBridge" />
</feature>
android平台下的config.xml,即:res/xml/config.xml添加:
<feature name="JSBridge">
<param name="android-package" value="com.wrs.plugin." />JSBridge
</feature>
两个平台都不能执行cordova prepare命令,否则会覆盖掉上面的配置信息,
前段调用方式:
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
function btnClick() {
cordova.exec(successCallback, failCallback, "JSBridge", "coolMethod", actionArgs);
}
</script>
如果iOS工程需要使用cocopods,需要添加cordova-plugin-cocoapod-support插件:
cordova plugin add cordova-plugin-cocoapod-support --save
在comfit.xml里面添加配置库,代码如下:
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<preference name="pods_ios_min_version" value="9.0" />
<preference name="pods_use_frameworks" value="true" />
<pod branch="4.2.0" git="https://github.com/Alamofire/Alamofire" name="Alamofire" />
</platform>
执行ionic build iOS,会自动生成cocoa pods的库文件,
但是由于cocoa pods版本及oc与swift的问题,需要自己在生成工程后,重新使用自己的cocoa pods,更改pod file文件,执行pod install,这样生成的工程才会对应版本,正常编译。
cordova 环境配制和创建插件的更多相关文章
- WIN7下搭建CORDOVA环境
Cordova 环境搭建 1安装JDK 工具文件夹中:jdk目录 1)下载地址:http://www.oracle.com/technetwork/java/javase/downloads/inde ...
- cordova环境搭建,搭建项目,以及拍照功能的实现
一.配置环境 1.配置java环境: 下载对应系统环境的jdk:http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-13 ...
- cordova 环境搭建
安装环境前题是nodejs已安装,android环境搭建完成,android环境没有通过http://www.androiddevtools.cn/安装,安装使用 淘宝 NPM 镜像 方式 1.运行c ...
- [配置Cordova环境] [Alfred使用手册]
Mac神器 Alfred使用手册http://www.tuicool.com/articles/YJJv2i 配置Cordova环境 1.到nodejs官网下载最新版本,安装pkg文件 2.终端运行 ...
- 在ionic/cordova中使用百度地图插件
在ionic项目中,如果想实现定位功能,可以使用ng-cordova提供的cordova-plugin-geolocation. 但由于高墙的缘故,国内andorid环境下,此插件不起作用(ios环境 ...
- vue--1.环境搭建及创建项目
转自https://blog.csdn.net/junshangshui/article/details/80376489 一.环境搭建及创建项目 1.安装node.js,webpack 2.安装vu ...
- WebStorm 之 Cordova 环境搭建
一.环境搭建 Cordova 环境配置之前,应先下载安装 Node.js ,中文官网:http://nodejs.cn/. 以管理员身份运行 cmd 命令行工具: 1.查看 Node.js 是否已安装 ...
- grunt入门讲解5:创建插件,安装Grunt以及常见问题
创建插件 创建插件主要有以下几个步骤: (1)通过 npm install -g grunt-init 命令安装 grunt-init .(2)通过 git clone git://github.co ...
- Ionic3环境搭建及创建
初次尝试Ionic,边学习边记录下来,以免以后忘记了,入坑向( ̄ω ̄;) 1.Ionic环境安装 Ionic开发是依赖于Nodejs环境的,所以在开发之前我们需要安装好Nodejs.下载安装:http ...
随机推荐
- What is 测试金字塔?
我的女朋友是一名测试工程师,但她之前却不知道测试金字塔的概念,为此我曾经在家里的白板上画了一个图一层一层给她讲解过.我和同事在给团队面试测试和开发岗位时,也会必问到这个问题,想到可能有很多开发童鞋都不 ...
- 8月1日起全部无版号游戏下架,ios手游想上架看这里!
在苹果至中国游戏开发者的邮件中声明:如果开发者不能在7月31日前提交版号及相关文件,付费游戏将不可以在中国AppStore供应.也就是说: 从8月1日开始,苹果将正式下架全部.所有的ios付费 ...
- 工作小记[csv文件、admin中filed与list_display区别、ModuleNotFoundError: No module named'xxx'、django创建admin用户]
CSV-Comma Separated Values,CSV文件可以直接用Excel表格打开,如果用文本打开属性之间用逗号隔开,Python有直接操作CSV文件的函数. fileds字段控制“修改添加 ...
- C#LeetCode刷题之#100-相同的树(Same Tree)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4066 访问. 给定两个二叉树,编写一个函数来检验它们是否相同. ...
- C#LeetCode刷题之#122-买卖股票的最佳时机 II(Best Time to Buy and Sell Stock II)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4032 访问. 给定一个数组,它的第 i 个元素是一支给定股票第 ...
- 微信小程序对接通联支付
1.首先拿到通联支付开发API:https://aipboss.allinpay.com/know/devhelp/main.php?pid=15#mid=92 2.如果注册通联或者企业认证工作请到: ...
- 封装react antd的form表单组件
form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等 ...
- 逃离CSDN -慕舲的黑夜-第三期
来时,是朋友推荐查资料,后来看到CSDN的UI,好华丽高大上,也读了CSDN首页推荐的一些文章,加入CSDN. 可是后来随着博客园,蓝奏云,w3c菜鸟教程,等平台的出现,CSDN越来越令人心寒
- 【MySQL】记一次线上重大事故:二狗子竟然把线上数据库删了!!
写在前面 估计二狗子这几天是大姨夫来了,心情很郁闷,情绪也很低落,工作的时候也有点心不在焉.让他发个版本,结果,一行命令下去把线上的数据库删了!你没听错:是删掉了线上的数据库!运营那边顿时炸了锅:怎么 ...
- JavaScript学习系列博客_28_JavaScript 数组去重
数组去重 var arr = [1,2,3,2,2,1,3,4,2,5]; //去除数组中重复的数字 //获取数组中的每一个元素 for(var i=0 ; i<arr.length ; i++ ...