2019-11-28 09:50:37 htzhanglong 阅读数 486

cordova可以把html css js写的代码打包成app,还可以让js调用原生的api,Ionic就是基于cordova可以很好的开发混合app,cordova还可以和vue、react、angular完美结合来开发混合app。下面我们看看Vue cordova开发混合app之Vue调用Cordova插件

 

Vue 调用 cordova插件有两种方法:

如果想通过视频教程学习请访问:Vue+Cordova打造跨平台可安装的混合APP视频教程

1、使用vue-cordova 插件  (不推荐使用)
                
            https://github.com/kartsims/vue-cordova        

            1、vue项目安装npm install --save vue-cordova

            2、在main.js引入插件并use插件
                import VueCordova from 'vue-cordova'
                
                Vue.use(VueCordova)
            

            3、调用插件  注意在对应的组件需要引入 var Vue = require('vue');

                Vue.cordova.camera.getPicture((imageURI) => {
                      window.alert('Photo URI : ' + imageURI)
                }, (message) => {
                      window.alert('FAILED : ' + message)
                }, {
                      quality: 50,
                      destinationType: Vue.cordova.camera.DestinationType.FILE_URI
                })

            4、注意需要在vue项目 index.html引入 cordova.js

                 <script src="cordova.js"></script>


2、index.html 引入cordova.js  并定义全局变量让vue组件里面直接使用cordova插件。  (推荐的使用方法)
 
            1、在vue index.html引入cordova.js (注意顺序  cordova.js放在build.js上面)

            2、直接可以在组件里面使用cordova的api   (注意cordova里面要安装api的插件)

                    

 

 

2017-08-23 08:45:59 baishenglong 阅读数 963

ionic 作为一个跨平台h5框架,收到越来越多的开发人员的欢迎,如何通过ionic去调用原生开发的SDK?可以通过 js 调用cordova 插件的方式来实现。本文通过一个简单的例子程序,来实现通过ionic 来调用 原生接口。该例子通过网页打开原生的的一个UIViewController。 

 1. 安装plugman

     

    npm install -g plugman

 可以不安装,只要按照要求的目录机构创建文件即可,plugman可以帮助我们快速的生成插件的目录结构。

2. 生成corodva 框架模板

    

    plugman create --name customPlug --plugin_id custom-plugin-demo --plugin_version 1.0


3. 添加模板支持

    

    plugman platform add --platform_name ios

    经过以上几步,就再customPlug目录生成了如下文件

   



4. 修改plugin.xml 为

<?xml version='1.0' encoding='utf-8'?>
    <plugin id="custom-plugin-demo" 
        version="1" xmlns="http://apache.org/cordova/ns/plugins/1.0" 
        xmlns:android="http://schemas.android.com/apk/res/android">
        <name>customPlug</name>
        <js-module name="customPlug" src="www/customPlug.js">
            <clobbers
                target="customPlug" />
            </js-module>
        <platform name="ios">
            <config-file parent="/*" target="config.xml">
            	<feature name="m'y">
            <param name="ios-package" value="customPlug" />
            </feature></config-file>
            <source-file src="src/ios/customPlug.m" />
        </platform>
    </plugin>

5.修改customPlug.js 为如下

var argscheck = require('cordova/argscheck'),
exec = require('cordova/exec');

var customPlugin = {};

customPlugin.echo = function(successCallback, errorCallback, arg0 ,arg1 ,arg2) {
exec(successCallback, errorCallback, "myplug", "helloworld", [arg0,arg1,arg2]);
};

module.exports = customPlugin;
6.修改customPlug.m


/********* customPlug.m Cordova Plugin Implementation *******/

#import <Cordova/CDV.h>

@interface customPlug : CDVPlugin {
  // Member variables go here.
}

- (void)helloworld:(CDVInvokedUrlCommand*)command;
@end

@implementation customPlug

- (void)helloworld:(CDVInvokedUrlCommand*)command
{
    CDVPluginResult* pluginResult = nil;
    NSString* echo = [command.arguments objectAtIndex:0];

    if (echo != nil && [echo length] > 0) {
        pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];
    } else {
        pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
    }

    [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}

@end

7. 生成packagejson


plugman createpackagejson <directory>


8 . 安装plugin

   sudo cordova plugin add ../customPlug/


9.ionic 调用cordova插件


home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';


declare var customPlug: any;
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }


toSetting() {


  customPlug.helloworld(function (msg) {
      }, function (msg) {

      }, 'true', 'ios', "dfsdfsdfsdf" );
   
  }

  
}


<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  

  <p class="setting_name" (click)="toSetting()">测试</p>
</ion-content>

10. 修改工程文件,通过plugin 传递进来的方法,调用native方式,我这里打开了一个viewcontroller 





调用的另外viewcontroller 返回的方法是  





2015-10-14 11:05:09 u011363662 阅读数 3402

1、cordova js 如何调用原生应用原理(下次调研)


2、ngCordova介绍:ngCordova is a collection of 70+ AngularJS extensions on top of the Cordova API that make it easy to build, test, and deploy Cordova mobile apps with AngularJS(copy from 官网);说明ngCordova是cordova插件对应的angular Js格式的一种适配方式。


3、确认要使用插件是否在ngCordova(http://ngcordova.com/)中,如果在则项目中配置ngCordova,配置完ngCordova 后则可以直接在Controller中使用该插件。(另外一种情况下次调研)


4、项目引用公共的cordova.js、cordova-plugins.js、ng-cordova.js (注意先引用ng-cordova.js,再引用其他文件)。

4.1、ng-cordova.js 是由安装ngCordova.js后生成的,(原本生成路径:bower_components/ngCordova/dist/ng-Cordova.js)将 其copy到项目根目录下。

4.2、cordova.js 和 cordova-plugins.js 都是cordova项目本身自带文件(项目名称\platforms\ios\www\目录下 ),只需copy到根目录下即可(必须在根目录)。cordova-plugins.js 包含所有的cordova插件(每次更改时,会自动同步该文件)。

4.3、如果我们是在windows系统内下做开发,然后copy项目到mac的xcode项目的www目录下是;由cordova-plugins.js自动更新便会存在一个问题。copy到xcode中的项目的cordova-plugins.js 不是我们添加各种插件后最新版的文件。便可能需要我们来手动引用这些插件对应的JS文件。

4.4、引用代码:

<script src="ng-cordova.js"></script> <script> var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf("chrome") == -1 && ua.indexOf("firefox") == -1) { document.write("<script src='cordova.js'><\/script>"); document.write("<script src='cordova_plugins.js'><\/script>"); } </script>

5、cordova 安装插件(举例:二维码扫描):phonegap plugin add https://github.com/phonegap/phonegap-plugin-barcodescanner.git


6、anglular Js controller中可以使用该插件了

app.controller('homeCaController', function ($scope, $rootScope,$timeout,$cordovaBarcodeScanner,$cordovaCamera){
$scope.brandScanner = function() {
$cordovaBarcodeScanner.scan().then(function(imageData) {

alert("We got a barcode\n" +
"Result: " + imageData.text + "\n" +
"Format: " + imageData.format + "\n" +
"Cancelled: " + imageData.cancelled);
}, function(err) {
console.log(3);
});
};

}

7、说明真机调试时,不会报错。但是web浏览时,调用插件功能函数时可能会报错。
2019-11-28 12:15:34 lzfengluo 阅读数 26

目前为止,网上搜到的有关ionic的帖子都是4以下的,但是我的ionic-cli是5.4.4的,所以目录结构与网上说的有所差异,所以在用ionic开发的程序调用自定义cordova插件方法时,遇到了许多坑,特此说明一下,希望对更新到ionic5+的你有所帮助。废话不多说。
在这里插入图片描述

环境

搭建环境以及版本信息在上一篇文章中就提到了,如果还没搭建环境的小伙伴可以先去看看上一篇 ionic+cordova环境搭建

安装cordova插件

这里首先确保你的环境已经搭建好了,ionic项目也创建出来了,并且能够正常运行。
如何自定义一个本地cordova插件,网上有很多文档说明,这里我就不专门写了,假设你已经有一个本地的cordova插件了。
cd进入你的ionic项目中,执行如下命令
ionic cordova plugin add 本地插件绝对路径
然后添加完插件后,可以用ionic cordova plugin list命令查看添加的所有插件。

ionic调用cordova插件中的方法

这里先了解一下ionic5创建出来的项目的目录结构吧,就是因为不了解结构,才绕了好多弯路,这里可以参考ionic5 目录解析 我觉得写得挺好的。
主要修改内容是 src\app\tab1 文件夹下的tab1.page.htmltab.page.ts两个文件。
在这里插入图片描述
tab1.page.html是存放显示页面的代码,
在这里插入图片描述
这个里面的布局可以按照你的需求去修改,我把初始项目的list列表删掉了,添加了几个button按钮,并且给按钮添加了点击事件。这里click必须用小括号括起来才有效,双引号里面是方法名,对应的就是.ts里面的方法。

tab.page.ts文件存放逻辑代码,
在这里插入图片描述

 declare let cordova: any;

意思是把所有plugins下的cordova插件都引进来。
然后就用cordova插件中的plugin.xml里面的clobbers定义的变量直接引用插件方法就行,

	<js-module src="www/uhf.js" name="UHF">
        <clobbers target="uhf" />
    </js-module>

对于window变量引用,因为ts文件不识别window,所有需要加any类型声明,否则编译的时候会不通过。
此时编译运行,然后就可以了。
附一张结果图,点击之后会执行成功的回调,这时候就说明成功了,具体效果与插件方法有关。
在这里插入图片描述
在这里插入图片描述

总结

最后总结一下用到的命令,
从创建项目开始,
ionic start myApp tabs //创建项目
cd myApp //进入项目
ionic cordova platform add android //添加安卓平台
ionic cordova build andriod //编译环境
ionic cordova run android //真机调试,检验项目正常运行
ionic cordova plugin add D:\MyCordova\CordovaNewUHF\UHFPlugin //添加本地插件
修改页面及添加逻辑
ionic cordova build andriod //再次编译(修改完文件之后)
ionic cordova run android //真机调试

主要是没有了解ionic项目ts文件中怎么调用cordova中的方法,不知道怎么关联,所以才走了好多弯路,之后还会更新ionic项目怎么调用在线插件,以及如何打包上传插件集成到ionic-native集成库中。希望多多支持,共同学习。

2019-09-19 16:20:56 yizhi_007 阅读数 73

https://blog.csdn.net/yizhi_007/article/details/99550313

继上篇博文拓展。

现在开发 环境:

ionic 4 + cordova 9 + angular8 + ant design for angular;

正文

基于 angular 使用第三方库 的原理

https://angular.cn/guide/using-libraries

下面两种方法均可使用。

方法一: angular 集成 jQuery ,使用jquery 以js 方式调用 cordova 插件。

方法二:angular  把某个库添加到运行时的全局范围中 (Adding a library to the runtime global scope)取自 具体参考文中两个链接 https://angular.cn/guide/using-libraries

      其中监听 类  像battery status 插件 使用rxjs的formEvent 实现;

     其他 ,注意 不同插件 ,使用本方式 略有区别 比如device 需要小写才能使用。

参考:https://blog.csdn.net/Ariel_201311/article/details/90402640

如果使用了 ionic 调用插件会相对容易些,部分可能有点小问题。

部分代码如下:

declare var QRScanner: any ;
declare var device: any;
getBattery() {
        try {
            fromEvent(window, 'batterystatus').subscribe(status => {
                alert(JSON.stringify(status)+ 'getBatteryStatus  info');
            });
        } catch (e) {
            alert(JSON.stringify(e)+ 'getBatteryStatus  error');
        }
    }

    getDevice() {
        try {
           alert(JSON.stringify(device.uuid)+ 'getDevice  info');
        } catch (e) {
           alert(JSON.stringify(device)+ 'getDevice  error');
            alert(JSON.stringify(e)+ 'getDevice  error');
        }
    }

QRScanner 没有测试成功 可能时调用的方式有问题,没去细研究,有别的要忙,可以证明这种方式是可行的。

成功 device 与 battery status 两个测试通过。

要注释-->不然,插件调用不到!

博文 来自: caijunfen

cordova插件的调用

阅读数 557

没有更多推荐了,返回首页