【Cordova】cordova插件使用

矫情吗；* 2022-05-09 14:12 384阅读 0赞
  • 修改安装的背景图标
  • 下载文件
  • 回退按钮
  • 检测跳转第三方app

1.0 修改安装的背景图标

1.1 安装

  1. cordova plugin add cordova-plugin-splashscreen

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

  1. <platform name="android">
  2.      <icon density="ldpi" src="res/icon/android/icon-36-ldpi.png" />
  3.      <icon density="mdpi" src="res/icon/android/icon-48-mdpi.png" />
  4.      <icon density="hdpi" src="res/icon/android/icon-72-hdpi.png" />
  5.      <icon density="xhdpi" src="res/icon/android/icon-96-xhdpi.png" />
  6.      <splash density="port-hdpi" src="res/screen/android/screen-hdpi-portrait.png" />
  7.      <splash density="port-ldpi" src="res/screen/android/screen-ldpi-portrait.png" />
  8.      <splash density="port-mdpi" src="res/screen/android/screen-mdpi-portrait.png" />
  9.      <splash density="port-xhdpi" src="res/screen/android/screen-xhdpi-portrait.png" />
  10.  </platform>

2.0 下载文件

2.1 安装

  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 安装

  1. cordova plugin add cordova-plugin-backbutton

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

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

  1. mounted() {
  2.     this.initialize();
  3.   },
  4.     data() {
  5.     return {
  6.       ready: false
  7.     };
  8.   }
  9.   watch: {
  10.     $route(to, from) {
  11.       if (this.ready) {
  12.       //监听路由，当设备准备好之后，判断to的值是否是需要监听回退按钮的值，是就开启监听，不是就移除监听
  13.         if (  to.name === 'Home' ) {
  14.           document.addEventListener('backbutton', this.onBackDown, false);
  15.         } else {
  16.           document.removeEventListener('backbutton', this.onBackDown, false);
  17.         }
  18.       }
  19.     }
  20.   },
  21.    methods: {
  22.     /* 初始化设备 */
  23.     initialize() {
  24.       document.addEventListener(
  25.         'deviceready',
  26.         this.onDeviceReady.bind(this),
  27.         false
  28.       );
  29.     },
  30.     /* 设备初始化之后监听返回按钮事件 */
  31.     onDeviceReady() {
  32.       this.ready = true;
  33.     },
  34.     /* 返回按钮事件 */
  35.     onBackDown() {
  36.       /* 当设备已准备并且当前页时在主页的时候 退出程序 */
  37.       navigator.app.exitApp();
  38.     }
  39.   },

4.0 检测跳转第三方app

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

  1. cordova plugin add appavailability

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

4.2 跳转第三方APP

  1. ordova plugin add com.lampa.startapp

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

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

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

  1. <allow-intent href="fleaf://lezhixing/*" />

发表评论

表情：
评论列表 （有 0 条评论，384人围观）

还没有评论，来说两句吧...

相关阅读

    相关 slick 插件使用

    这两天一直在做公司的门户网站，遇到了一个问题，公司领导的要求是让我将合作伙伴部分做成如下幻灯片播放的这种效果，我再网上查询了很多资料，最后发现bootstrap+slick插件

    不念不忘少年蓝@不念不忘少年蓝@/ 0 赞/ 95 阅读

    相关 bshare插件使用

    一、前言 1、要使网页内容得到更多的推广，更加商业化，分享链接无疑是最好的选择 2、bshare 可以简单实现分享到QQ空间、新浪微博、人人网、腾讯微博、网易微博、更多

    Bertha 。Bertha 。/ 0 赞/ 374 阅读