• cordova插件使用

    2018-10-16 17:02:20
    cordova plugin add cordova-plugin-splashscreen 1.2 替换原有cordova的图片 1.3 在cordova config.xml 文件中引入以下代码 <platform name="android"> <...
    • 修改安装的背景图标
    • 下载文件
    • 回退按钮
    • 检测跳转第三方app

    1.0 修改安装的背景图标

    1.1 安装

    cordova plugin add cordova-plugin-splashscreen
    

    1.2 替换原有cordova的图片
    1.3 在cordova config.xml 文件中引入以下代码

    <platform name="android">
         <icon density="ldpi" src="res/icon/android/icon-36-ldpi.png" />
         <icon density="mdpi" src="res/icon/android/icon-48-mdpi.png" />
         <icon density="hdpi" src="res/icon/android/icon-72-hdpi.png" />
         <icon density="xhdpi" src="res/icon/android/icon-96-xhdpi.png" />
         <splash density="port-hdpi" src="res/screen/android/screen-hdpi-portrait.png" />
         <splash density="port-ldpi" src="res/screen/android/screen-ldpi-portrait.png" />
         <splash density="port-mdpi" src="res/screen/android/screen-mdpi-portrait.png" />
         <splash density="port-xhdpi" src="res/screen/android/screen-xhdpi-portrait.png" />
     </platform>
    

    2.0 下载文件

    2.1 安装

    cordova plugin add cordova-plugin-file-transfer
    

    2.2 文档地址:https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file-transfer/

    2.3 案例地址:https://blog.csdn.net/mooonyuan/article/details/83090303

    3.0 回退按钮

    3.1 安装

    cordova plugin add cordova-plugin-backbutton
    

    3.2 文档地址:https://cordova.apache.org/docs/en/5.1.1/cordova/events/events.backbutton.html

    以下是监听当跳转到home页的时候,监听回退按钮,执行退出程序

     mounted() {
        this.initialize();
      },
        data() {
        return {
          ready: false
        };
      }
      watch: {
        $route(to, from) {
          if (this.ready) {
          //监听路由,当设备准备好之后,判断to的值是否是需要监听回退按钮的值,是就开启监听,不是就移除监听
            if (  to.name === 'Home' ) {
              document.addEventListener('backbutton', this.onBackDown, false);
            } else {
              document.removeEventListener('backbutton', this.onBackDown, false);
            }
          }
        }
      },
       methods: {
        /* 初始化设备 */
        initialize() {
          document.addEventListener(
            'deviceready',
            this.onDeviceReady.bind(this),
            false
          );
        },
        /* 设备初始化之后监听返回按钮事件 */
        onDeviceReady() {
          this.ready = true;
        },
        /* 返回按钮事件 */
        onBackDown() {
          /* 当设备已准备并且当前页时在主页的时候 退出程序 */
          navigator.app.exitApp();
        }
      },
    

    4.0 检测跳转第三方app

    4.1 检测是否安装了第三方app

    cordova plugin add appavailability
    

    4.1.1 文档地址: https://www.npmjs.com/package/cordova-plugin-appavailability

    4.2 跳转第三方APP

    ordova plugin add com.lampa.startapp
    

    4.2.2 文档地址:https://github.com/lampaa/com.lampa.startapp

    appAvailability.check(
       'cn.com.lezhixing.clover.xf', //  Package Name
        function(info) {
          // Success callback 已安装
          // Info parameter is available only for android
          window.location.href = "fleaf://lezhixing/open";
        },
        function() {
          _this.popupAppVisible = true;//未检测到安装
        }
      );
    

    注:如果你跳转的第三方是特殊的带头地址,需要在cordova的config.xml中添加以下代码

    <allow-intent href="fleaf://lezhixing/*" />
    
    展开全文
  • 访问http://plugins.cordova.io/, 您可以在其中搜索cordova插件,例如我搜下statusbar: 会发现有两个插件。其中下面的名字貌似更官方一点,我们就选择这个作为我们需要的插件。 插件的安装很简单。我们...

    iOS 状态栏的控制我是这么实现的:

    1. 访问http://plugins.cordova.io/, 您可以在其中搜索cordova插件,例如我搜下statusbar:
      插件管理页面搜索statusbar结果

      会发现有两个插件。其中下面的名字貌似更官方一点,我们就选择这个作为我们需要的插件。

    2. 插件的安装很简单。我们需要的只是插件的ID, 也就是org.apache.cordova.statusbar. 然后打开终端,然后到cd到自己的项目根目录,输入或粘贴如下代码:
      cordova plugin add org.apache.cordova.statusbar

      回车,稍等片刻会有类似下面的提示:
      statusbar安装代码以及提示

      说明安装成功。虽说安装是成功了,但到底该如何使用呢?

    3. 一般这种插件都会在GitHub上开源,Google或Github上搜索org.apache.cordova.statusbar,很快我们就会找到这个插件的Github地址:https://github.com/jonathannaguin/org.apache.cordova.statusbar.

      点击进入,众API们引入眼帘,好像黑夜看到了曙光,屌丝看到了女神……

      方法如下:

      • StatusBar.styleDefault 状态栏默认样式,也就是电池信号黑色;
      • StatusBar.styleLightContent 状态栏内容浅色,貌似就是白色,适合深色背景;
      • StatusBar.styleBlackTranslucent 状态栏黑色半透明,我测了下,跟上面一样的效果,电池时间都是白色的,适合深色背景;
      • StatusBar.styleBlackOpaque 状态栏黑色不透明。我测了下,还是白色的,跟上面一样,适合深色背景;
      • StatusBar.hide 状态栏隐藏;
      • StatusBar.show 状态栏显示;
    4. 只要你使用了Cordova的插件(相机啊,地址位置等),你就得调用自动生成的cordova.js.
      <script src="cordova.js"></script>

      然后,再你自己的JS中,使用类似StatusBar.hide()就可以隐藏状态栏啦!或者使用StatusBar.styleLightContent()让状态栏从黑人变成白人,如下效果:
      顶部的白色状态栏效果截图

    其他非官方插件的使用也是类似上面的步骤。

    展开全文
  • Cordova内置事件: Cordova电量状态插件事件:

     Cordova内置事件:

     

    Cordova电量状态插件事件:

    展开全文
  • 我们知道,按照cordova打包的流程,里面会生成一个www文件夹,里面是h5代码,也是app的启动页,在里面直接引入cordova.js,是可以使用cordova的,但是如果app里面嵌套了一个h5的网页链接,如果想使用cordova,怎么办...

    我们知道,按照cordova打包的流程,里面会生成一个www文件夹,里面是h5代码,也是app的启动页,在里面直接引入cordova.js,是可以使用cordova的,但是如果app里面嵌套了一个h5的网页链接,如果想使用cordova,怎么办呢?(cordova目录)
    cordova目录

    • cordova的config.xml很重要,属于app的一些配置,里面最重要的是包名,以及允许访问的域名及其他
    • 经过测试,h5中可以直接引入cordova文件,如果使用其插件,需要引入plugins文件夹及cordova_plugins.js插件配置文件(如果用到的插件,在cordova_plugins.js中没有配置,则插件失效。如果插件不存在,但是在cordova_plugins.js配置了,cordova失效)
      在这里插入图片描述

    常见问题

    在h5中使用cordova,经常会出问题,要么cordova失效,要么cordova报错,等等

    经测试验证,得出以下结论

    • h5如果想引本地的cordova东西,必须将包里的platform_www里面的文件复制过来
    • 如果加了新插件,包要更新的时候,不能只在你的cordova_plugins.js中加新插件的配置,必须将所有文件重新拷贝过来,因为新的插件,可能修改了你的cordova.js或其他,为避免出错,必须全部重新引入!!!
    • 如果你的cordova.js分为了cordova_ios.js和cordova_android.js,记得在cordova.js中修改两个地方
    1. 路径 pathPrefix
    exports.load = function (callback) {
        var pathPrefix = findCordovaPath();
        if (pathPrefix === null) {
            console.log('Could not find cordova.js script tag. Plugin loading may fail.');
            pathPrefix = '/person/js/appjs/ios/';
        }
        injectIfNecessary('cordova/plugin_list', pathPrefix + 'cordova_plugins.js', function () {
            var moduleList = require('cordova/plugin_list');
            handlePluginsObject(pathPrefix, moduleList, callback);
        }, callback);
    };
    
    1. 文件名cordova.js
    function findCordovaPath () {
        var path = null;
        var scripts = document.getElementsByTagName('script');
        var term = '/cordova_ios.js';
        for (var n = scripts.length - 1; n > -1; n--) {
            var src = scripts[n].src.replace(/\?.*$/, ''); // Strip any query param (CB-6007).
            if (src.indexOf(term) === (src.length - term.length)) {
                path = src.substring(0, src.length - term.length) + '/';
                break;
            }
        }
        return path;
    }
    
    展开全文
  • cordova js 如何调用原生引用 cordova 安装插件 cordova 生成插件代码与引用文件是否一致。(xcode打包使用代码与web使用代码是否一致) 程序中如何调用cordova 插件 web 浏览插件效果 app 浏览插件效果

    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浏览时,调用插件功能函数时可能会报错。
    展开全文
  • 在 ionic 如何使用cordova 插件来访问相册 ,访问相机,拍照和录制视频1.访问相册 (1).安装官方插件:http://ngcordova.com/docs/plugins/imagePicker/[code lang="psd"] $ cordova plugin add ...
  • 困扰了半天时间,项目生成APP后可以在console中直接输入JMessage打印出对象,但是在vue中却不能。 看到jpush的调用方法是window.plugins.JPushPlugin,但是照葫芦画瓢...折腾半天,应该使用 window.JMessagePlugin ...
  • 一、问题 VueAPP 中有一个文件下载功能,用了各种方法来实现下载功能,app 都没有反应。 ... 这个博客里面几乎包含了我试过的大部分方法,发现 PC 端没问题,手机不可以。 二、经过 ...这些方法 PC 端没问题,安卓就...
  • 为什么使用 Cordova Cordova 提供了与 APP 原生平台交互的功能,使基于网页的APP突破了不能使用设备平台完整功能的限制。 如何寻找自己想要的插件 Cordova 社区 Cordova 社区提供上千个插件,支持各种设备平台的各类...
  • cordova应用如果需要调用原生安卓接口,方法是使用cordova插件,cordova官方提供了主流原生功能的插件,但如果还不能满足需求,也可以自己开发cordova插件 以下介绍开发一个最简单的插件,功能是调用原生的toast...
  • ionic使用cordova插件跳转第三方APP 参考自: ionic开发——检测是否安装某APP,如果安装打开该APP ionic项目中使用cordova插件跳转第三方地图APP(百度、高德) 第一步,安装cordova插件 cordova plugin add ...
  • ionic5+如何调用cordova插件中的方法环境安装cordova插件ionic调用cordova插件中的方法总结 目前为止,网上搜到的有关ionic的帖子都是4以下的,但是我的ionic-cli是5.4.4的,所以目录结构与网上说的有所差异,所以在...
  • 几年前使用cordova 进行两个app之间的相互调用和通讯;当时也是几经折腾,今天把它整理出来,记录一下,也方便有同样需求的朋友参考 一、require引入 plugin require("cordova!com.lampa.startapp-master"); .....
  • ionic中 cordova插件使用

    2019-02-24 00:01:37
    Installation To add Ionic Native to your app, run following command to install the core package: ...$ ionic cordova plugin add cordova-plugin-tts $ npm install --save @ionic-native/text-to-speech ...
  • cordova可以把html css js写的代码打包成app,还可以让js调用原生的api,Ionic...下面我们看看Vue cordova开发混合app之Vue调用Cordova插件 Vue 调用 cordova插件有两种方法: 如果想通过视频教程学习请访问:...
  • 在项目需求中一个需求是更新app版本,于是用到了cordova插件,当我在android调试顺畅了后,将代码上传到了中央仓库,苹果开发者那边打包测试版后怎么也检测不出来版本更新(app-version插件无效),后来费劲各种周折...
  • 熟悉ionic1和angular1的用户对于使用cordova都有一定的认识,但是在ionic2中官方给出的使用方法是从ionic-native这个npm包导入要使用cordova插件。 例如: 使用ionic-native提供的AppVersion插件 首先安装插件...
  • 用ionic3做个打印的功能,自定义个插件demo,并且调用成功
  • Android+Cordova混合开发以及Cordova自定义插件 AndroidCordova混合开发以及Cordova自定义插件 美女镇楼 一AndroidStudio中集成Cordova项目 创建Cordova项目 项目中添加Android平台 AndroidStudio中导入...
  • ionic2 ts中使用cordova插件 Property 'plugins' does not exist on type 'Window'.
1 2 3 4 5 ... 20
收藏数 9,535
精华内容 3,814
关键字:

怎么使用cordova插件