环境配制

英文网站: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/JSBridge.java" target-dir="src/com/wrs/plugin" />:声明Android源码路径,target-dir:声明Android源码安装的时候将被拷贝到Android项目的哪个文件夹下

JSBridge.js:
var exec = require('cordova/exec'); exports.coolMethod = function(arg0, success, error) {
    exec(success, error, "JSBridge", "coolMethod", [arg0]);
};
前端业务调用方法
cordova.plugins.JSBridge.coolMegthod(arg0, success, error);

整个调用流程为:
js调用
cordova.plugins.JSBridge.coolMegthod(arg0, success, error);
底层为
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 环境配制和创建插件的更多相关文章

  1. WIN7下搭建CORDOVA环境

    Cordova 环境搭建 1安装JDK 工具文件夹中:jdk目录 1)下载地址:http://www.oracle.com/technetwork/java/javase/downloads/inde ...

  2. cordova环境搭建,搭建项目,以及拍照功能的实现

    一.配置环境 1.配置java环境: 下载对应系统环境的jdk:http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-13 ...

  3. cordova 环境搭建

    安装环境前题是nodejs已安装,android环境搭建完成,android环境没有通过http://www.androiddevtools.cn/安装,安装使用 淘宝 NPM 镜像 方式 1.运行c ...

  4. [配置Cordova环境] [Alfred使用手册]

    Mac神器 Alfred使用手册http://www.tuicool.com/articles/YJJv2i 配置Cordova环境 1.到nodejs官网下载最新版本,安装pkg文件 2.终端运行 ...

  5. 在ionic/cordova中使用百度地图插件

    在ionic项目中,如果想实现定位功能,可以使用ng-cordova提供的cordova-plugin-geolocation. 但由于高墙的缘故,国内andorid环境下,此插件不起作用(ios环境 ...

  6. vue--1.环境搭建及创建项目

    转自https://blog.csdn.net/junshangshui/article/details/80376489 一.环境搭建及创建项目 1.安装node.js,webpack 2.安装vu ...

  7. WebStorm 之 Cordova 环境搭建

    一.环境搭建 Cordova 环境配置之前,应先下载安装 Node.js ,中文官网:http://nodejs.cn/. 以管理员身份运行 cmd 命令行工具: 1.查看 Node.js 是否已安装 ...

  8. grunt入门讲解5:创建插件,安装Grunt以及常见问题

    创建插件 创建插件主要有以下几个步骤: (1)通过 npm install -g grunt-init 命令安装 grunt-init .(2)通过 git clone git://github.co ...

  9. Ionic3环境搭建及创建

    初次尝试Ionic,边学习边记录下来,以免以后忘记了,入坑向( ̄ω ̄;) 1.Ionic环境安装 Ionic开发是依赖于Nodejs环境的,所以在开发之前我们需要安装好Nodejs.下载安装:http ...

随机推荐

  1. 使用Azure人脸API对图片进行人脸识别

    人脸识别是人工智能机器学习比较成熟的一个领域.人脸识别已经应用到了很多生产场景.比如生物认证,人脸考勤,人流监控等场景.对于很多中小功能由于技术门槛问题很难自己实现人脸识别的算法.Azure人脸API ...

  2. Jdbc Template初步了解

    JdbcTemplate简介 Java语言提供了jdbc来访问数据库,在jdbc api中需要手动的获取和释放连接等资源,使用起来需要做许多重复的工作.Spring在jdbc api的基础上做了抽象和 ...

  3. 小白学习Python之路---py文件转换成exe可执行文件

    一.背景 今天闲着无事,写了一个小小的Python脚本程序,然后给同学炫耀的时候,发现每次都得拉着其他人过来看着自己的电脑屏幕,感觉不是很爽,然后我想着网上肯定有关于Python脚本转换成可执行文件的 ...

  4. XSS 渗透思路笔记

    了解XSS首先要了解HTML里面的元素:共有5种元素:空元素.原始文本元素. RCDATA元素.外来元素以及常规元素. 空元素area.base.br.col. command. embed.hr.i ...

  5. JVM初探(三):类加载机制

    一.概述 我们知道java代码会被编译为.class文件,这里class文件中的类信息最终还是需要jvm加载以后才能使用. 事实上,虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验,转 ...

  6. 2020-07-05:tcp和udp的区别和应用场景。如何实现断点续传?

    福哥答案2020-07-05: 区别:1.可靠性:tcp可靠.udp不可靠.2.连接性:tcp面向连接.udp无连接.3.报文:tcp字节流.udp面向报文.4.传输效率:tcp低.udp高.5.多点 ...

  7. python设计模式之责任链模式

    python设计模式之责任链模式 开发一个应用时,多数时候我们都能预先知道哪个方法能处理某个特定请求.然而,情况并非总是如此.例如,想想任意一种广播计算机网络,例如最早的以太网实现.在广播计算机网络中 ...

  8. Android 禁止ViewPager左右滑动的功能实现

    来来来,各位看官~ Look here!!! Android    禁止ViewPager左右滑动的功能实现!! I think it`s so easy,无需重写ViewPager!!! JUST ...

  9. C# WebAPI项目,不支持HttpPut请求!!!

    有点标题党了,这个异常的现象是这样的: 我有一个正在跑的项目,要对接第三方厂家的设备.  对方给的接口文档,里面有一个接口是需要我这边实现的,要求必须是PUT请求方式. 所以我在项目基础上,新增一个W ...

  10. 修改linux 动态ip为静态ip

    vi /etc/sysconfig/network-scripts/ifcfg-ens33 BOOTPROTO=static 设置网卡引导协议为 静态 ONBOOT=yes 网卡开机自启动 配置[IP ...