cordova插件的示例

最新推荐文章于 2020-08-20 22:28:43 发布

可乐_了

最新推荐文章于 2020-08-20 22:28:43 发布

阅读量360

点赞数

CC 4.0 BY-SA版权

分类专栏： cordova插件使用文章标签： cordova

本文链接：https://blog.youkuaiyun.com/qq_39099766/article/details/88245298

cordova插件使用专栏收录该内容

1 篇文章

订阅专栏

最近在捣鼓cordova插件的使用, 感觉还挺有趣的, 使用js来调用安卓api.
下面记录一下最近捣鼓的几个cordova插件: 录音/拍照/文件

cordova插件这块也是很多坑, 需要自己慢慢去填
我就直接把我的代码贴出来, 让大家可以根据我以下的步骤, 完整的重新我自己写的小示例

#创建一个新项目

说明：cordova create 项目名 包名 发布名称

cordova create Test com.ls.test 测试项目

#添加android支持

cordova platform add android

安装所需的cordova插件

cordova plugin add cordova-plugin-camera  //相机插件

cordova plugin add cordova-plugin-file  // 文件系统插件

cordova plugin add cordova-plugin-media  // 媒体插件

cordova plugin add cordova-plugin-x-toast  // toast插件

2.把下面的代码分别覆盖到你新创建的cordova项目www文件中

index.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Hello World</title>
</head>

<body>
    <div class="app">
        <div class="media">
            <div id="startRecord">录音</div>
            <div id="play">播放录音</div>
        </div>
        <div class="camera">
            <div id="cam">拍照</div>
            <image id="img"></image>
            <div id="select">选取图片</div>
            <image id="img2"></image>
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>

index.css

.app {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.media {
    display: flex;
    
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
#startRecord {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
}
#play {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.camera {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
#cam {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
}
#img {
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
    object-fit: cover;
}
#img2 {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
#select {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
}

index.js

var app = {
  initialize: function() {
    document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
  },

  onDeviceReady: function() {
    this.receivedEvent();
  },
  receivedEvent: function() {
    function mediaSuccess() {
      toastShow("Media成功")
    }

    function mediaError(err) {
      toastShow("Media失败")
    }
    var replace = true,
      playReplace = true;
    // 录制音频
    function recordAudio() {
      if (replace) {
        replace = false;
      } else {
        toastShow('请不要重复点击录音');
        return;
      }
      // 判断是否存在myrecord.mp3, 存在则删除
      window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory, function(dir) {
        dir.getFile('myrecord.mp3', {
          create: false
        }, function(file) {
          file.remove(function() {
            console.log('删除成功');
          }, function() {
            toastShow('删除失败');
          });
        }, function() {
          console.log('go');
        })
      }, function() {
        toastShow('fail');
      })

      // 开始录制并创建myrecord.mp3
      var src = "myrecord.mp3";
      var mediaRec = new Media(src, mediaSuccess, mediaError);
      // 启动录制音频
      mediaRec.startRecord();
      document.getElementById("startRecord").innerHTML = '录音中..';
      // 10秒后停止录制
      var recTime = 0;
      var recInterval = setInterval(function() {
        recTime = recTime + 1;
        if (recTime >= 10) {
          clearInterval(recInterval);
          mediaRec.stopRecord();
          replace = true;
          toastShow("录制完成")
          document.getElementById("startRecord").innerHTML = '录音';
        }
      }, 1000);
    }
    // 播放音频
    function playAudio() {
      if (!replace) {
        toastShow('正在录音中, 请不要点击播放');
        return;
      }
      if (playReplace) {
        playReplace = false;
      } else {
        toastShow('正在播放, 请不要重复点击');
        return;
      }
      var src = "myrecord.mp3";
      var mediaRe = new Media(src, mediaSuccess, mediaError);

      mediaRe.play();
      document.getElementById("play").innerHTML = '播放中..';
      var recTime = 0;
      var recInterval = setInterval(function() {
        recTime = recTime + 1;
        if (recTime >= 10) {
          clearInterval(recInterval);
          playReplace = true;
          document.getElementById("play").innerHTML = '播放录音';
        }
      }, 1000);
    }


    // 相册选取照片
    function cameraGetPicture() {
      navigator.camera.getPicture(onSuccess, onFail, {
        quality: 50,
        destinationType: Camera.DestinationType.NATIVE_URI,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY
      });

      function onSuccess(imageURL) {
        var image = document.getElementById('img2');
        image.src = imageURL;
      }

      function onFail(message) {
        toastShow('Failed because: ' + message);
      }

    }


    document.getElementById("startRecord").onclick = function() {
      recordAudio();
    }
    document.getElementById("play").onclick = function() {
      playAudio();
    }
    document.getElementById("cam").onclick = function() {
      cameraTakePicture();
    }
    document.getElementById("select").onclick = function() {
      cameraGetPicture();
    }
    // 按下返回按钮
    document.addEventListener("backbutton", onBackKeyDown, false);

    function onBackKeyDown(e) {
      e.preventDefault();
      toastShow('再点击一次退出');
      document.removeEventListener("backbutton", onBackKeyDown, false); //注销返回键
      //3秒后重新注册
      var intervalID = window.setInterval(
        function() {
          window.clearInterval(intervalID);
          document.addEventListener("backbutton", onBackKeyDown, false); //返回键
        },
        3000
      );

    }
  }

};

// 拍照
function cameraTakePicture() {
  navigator.camera.getPicture(onSuccess, onFail, {
    quality: 50,
    destinationType: Camera.DestinationType.DATA_URL,
    correctOrientation: true
  });

  function onSuccess(imageData) {
    var image = document.getElementById('img');
    image.src = "data:image/jpeg;base64," + imageData;
  }

  function onFail(message) {
    toastShow('Failed because: ' + message);
  }
}
// toast
function toastShow(str) {
  window.plugins.toast.showShortCenter(str);
}
app.initialize();

分别替换你新建的cordova项目www文件夹下的index.html、index.css、index.js, 然后执行命令cordova build android

然后安装创建的cordova项目目录下platforms\android\app\build\outputs\apk\debug\app-debug.apk

就有了几个简单的功能, 拍照/从相册选择照片/录音/ 播放

示例的截图
在这里插入图片描述