精华内容
下载资源
问答
  • cordova

    2019-08-23 15:44:38
    cordova 对应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 requirements

    npm 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-newest

    gradle插件的安装
    https://www.cnblogs.com/leilei0327/p/7054652.html

    http://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:09
    1安装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 iOS是一个iOS应用程序库,允许为iOS平台构建基于Cordova的项目。 基于Cordova的应用程序的核心是使用Web技术编写的应用程序:HTML,CSS和JavaScript。 是。 要求 Xcode 11.x或更高版本。 在或下载它。 ...
  • 百度移动统计Cordova插件 如何调试: 克隆此项目 从项目中删除旧插件 cordova plugin remove cordova-plugin-baidumobstat 添加插件 cordova plugin add cordova-plugin-baidumobstat 配置 参考cordova-sample部分 ...
  • Cordova Demo

    千次下载 热门讨论 2014-07-11 10:14:18
    Cordova的一个Demo,功能是读取图片,选择上传。服务器地址没改,大家可以参照我需要的参数自己写一个后台
  • Cordova ios 打包

    2018-06-04 15:54:07
    Cordova ios 打包 Cordova ios 打包 Cordova ios 打包 Cordova ios 打包
  • 适用于Cordova的Teads SDK插件附带对Android和iOS的支持。 更多信息和指南。 快速安装 要将Teads Cordova插件添加到您的Cordova应用程序中,请使用以下命令: cordova plugin add ...
  • 公开和Cordova平台使用的共享功能。 公开的API events 表示EventEmitter特殊实例,旨在将事件发布到cordova-lib和cordova-cli 用法: const { events } = require ( 'cordova-common' ) ; events . emit ( 'warn...
  • cordova.js

    2018-05-14 21:30:05
    cordova.js,cordova.js,cordova.js,cordova.js,cordova.js,cordova.js,cordova.js, cordova.js,cordova.js,cordova.js,cordova.js,cordova.js,cordova.js,cordova.js cordova.js,cordova.js,cordova.js,cordova.js,...
  • Vue-Cordova是一个实用程序,可在Vue.cordova下的Vue组件中提供以下插件: cordova-plugin-camera cordova-plugin-device cordova-plugin-geolocation cordova-plugin-contacts cordova-plugin-chrome-apps-...
  • cordova-plugin-apple-watch, Cordova/phonegap 苹果手表(Apple Watch) 插件 Apache Cordova 用于 Apache Cordova 的 苹果手表(Apple Watch) 插件 为( WatchKit ) 提供英镑 Cordova/phonegap插件,以便在Cordova应用...
  • cordova-plugin-useragent =科尔多瓦-插件-相册com.danielsogl.cordova.useragent = com.elbozor.cordova.album im.ltdev.cordova.UserAgent = com.elbozor.cordova.PhotoAlbum UserAgent =相册 im / ltdev / ...
  • Cordova入门

    万次阅读 多人点赞 2017-11-27 11:35:51
    Cordova入门 标签: 技术学习 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.js

    3 开发项目

    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

    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

    npminit



    到此插件基本配置完成,效果如下
    配置成功

    (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工程下都添加了我们自定义的插件。

    plugin代码

    安卓代码

    iOS代码



    (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 文件夹拖到工程中来(注意选择不复制文件,保持目录结构)

    www

    5.2 添加配置

    在配置页的 Build Settings -> Other Linker Flags 中添加”-ObjC -all_load”

    flag

    (5)在配置页的 Build Phases 标签中添加如下两个库
    Target Dependencies -> CordovaLib
    Link Binary With Libraries -> libCordova.a

    lib

    path

    点击配置页的 Build Phases 标签坐上角的加号,添加一个 Run Script

    scrp

    名字改成: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

    mul

    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:^{
    
        }];
    
    }

    yunx

    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)。

    ionic主页

    Angular主页

    腾讯开源的一个H5框架VasSonic

    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 Geofence插件 插件可使用移动设备监控圆形地理围栏。 目的是通知用户是否越过监视的地理围栏的边界。 设备重启后,地理围栏仍然存在。 您不必先打开应用程序即可监视添加的地理围栏 应用范例 查看我们的...
  • docker-cordova, Cordova开发的Docker 容器 Cordova开发的 Docker 容器 电子邮件内容为什么?设置失败新项目项目有用的命令引用为什么?我不想安装和配置 Java,androidsdk,Ant,cordova 等等 。 生命太短。设置
  • 打开重装系统之前创建的cordova项目, 运行:cordova build android 测试打包功能是否正常的时候,遇到了问题: 1.报错显示的是:your JAVA_HOME is invalid: 解决办法:这里的原因不知道是为啥,但是安装1.8.0_144...

    电脑因为驱动的原因被重装系统了,jdk和sdk都是重新安装的,配置环境变量完成之后,
    打开重装系统之前创建的cordova项目,
    运行:cordova build android 测试打包功能是否正常的时候,遇到了问题:
    1.报错显示的是:your JAVA_HOME is invalid:
    在这里插入图片描述
    解决办法:这里的原因不知道是为啥,但是安装1.8.0_144的版本就可以了
    2.接着运行cordova build android 报错显示的是:
    在这里插入图片描述
    解决办法:这里说是缺少了一个sdk安装,因为我是android studio安装的,所以在android SDK中找到这个版本的进行安装就可以了,这里需要主要打开show package details,才能看到每个版本里面的详细内容
    在这里插入图片描述
    3.接着运行cordova build android 又报错了:(心累)
    在这里插入图片描述
    解决办法:搜了一下这个问题,网上回答的解决这个问题是在build.gradle文件添加中android对象下的值,但是我的文件中都没有android对象,后来兔子建议清除android studio中的缓存,然后清楚掉缓存就可以啦~
    在这里插入图片描述

    展开全文
  • cordova-study Cordova学习记录,Cordova插件的使用,热更新、media、device、集成x5内核等等。 目录简介 hooks:存放自定义cordova命令的脚本文件。每个project命令都可以定义before和after的Hook,比如:before_...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 43,072
精华内容 17,228
关键字:

cordova