cordova 环境配制和建立插件

环境配制javascript

英文网站:http://cordova.apache.org/前端

中文网站:http://cordova.axuer.com/java

安装Cordova

Cordova的命令行运行在Node.js 上面而且能够经过NPM安装。 根据 平台具体指导 安装相应平台的依赖。打开命令提示符或终端,而后键入npm install -g cordova.node

建立一个项目

使用命令行建立一个空的Cordova项目。导航到你但愿建立项目的目录,而后键入 cordova create <path>android

要知道这个命令完整的选项,键入cordova help createios

cordova create <PATH> [ID [NAME [CONFIG]]] [options]git

例如:cordova create hello com.wrs.helloworld HelloWorldgithub

cordova create 路径 BundleID/PackageID 名称apache

添加一个平台

在建立完一个Cordova项目后,导航到项目目录。在项目目录中,你须要添加你想构建app的平台npm

为了添加平台, 键入 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>JSBridgeJSBridgeJSBridgeJSBridgeJSBridgeJSBridgeJSBridgeJSBridgeJSBridgeJSBridge


<source-file src=”src/android/JSBridge.java” target-dir=”src/com/wrs/plugin/JSBridge” />
com/wrs/plugin修改成:
 <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]);
JSBridgeclobbers
定义android的原生调用方法,value为包名+类名<param name="android-package" value="com.wrs.plugin.JSBridge" />JSBridge
定义ios的原生调用方法,value为类名<param name="ios-package" value="JSBridge" />JSBridge
:声明Android源码路径,target-dir:声明Android源码安装的时候将被拷贝到Android项目的哪一个文件夹下

JSBridge.js:
var exec = require('cordova/exec');

exports.coolMethod = function(arg0, success, error) {
    exec(success, error, "JSBridge", "coolMethod", [arg0]);
};
前端业务调用方法<source-file src="src/android/JSBridge.java" target-dir="src/com/wrs/plugin" />JSBridge
.coolMegthod(arg0, success, error);

整个调用流程为:
js调用
.coolMegthod(arg0, success, error);
底层为
cordova调用exec(success, error, "JSBridge", "coolMethod", [arg0]);

模式为:exec(success, error, Service, Action, []);
Service是各自平台下config.xml里定义的feature名
Action对iOS来讲是执行对应的方法,对Android来讲做为方法入参action

在插件目录调用打包插件命令:cordova.plugins.JSBridgeJSBridgecordova.plugins.JSBridgeJSBridge
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="" />
</feature>

两个平台都不能执行cordova prepare命令,不然会覆盖掉上面的配置信息,
前段调用方式:
 <script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
function btnClick() {com.wrs.plugin.JSBridgeJSBridge
  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,这样生成的工程才会对应版本,正常编译。

相关文章
相关标签/搜索