zoukankan      html  css  js  c++  java
  • 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/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,这样生成的工程才会对应版本,正常编译。


  • 相关阅读:
    validate BST
    LC282. Expression Add Operators
    nginx统计日志命令
    iptables和firewalld命令
    nginx安装
    测试服务器IO
    规范主机名和设置最大文件进程数
    Docker安装
    MySQL/MariaDB二进制安装
    Docker原理
  • 原文地址:https://www.cnblogs.com/wenrisheng/p/7550299.html
Copyright © 2011-2022 走看看