vue+cordova 调用摄像头并对vue项目进行打包

最新推荐文章于 2021-05-06 12:04:23 发布

以后灬会緈福

最新推荐文章于 2021-05-06 12:04:23 发布

阅读量1.2k

点赞数 2

分类专栏： Vue知识点文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/u013164983/article/details/105224583

版权

Vue知识点专栏收录该内容

8 篇文章

订阅专栏

参考文章：https://blog.youkuaiyun.com/u011042316/article/details/83828371

https://segmentfault.com/a/1190000014101362

一、建立vue项目和cordova项目步骤略过....

---------------------以下修改的都是vue项目--------------------------------

二、使用最简单的方法调用相机接口 (HelloCordova.vue)

<template>
  <div>
    <button id="btn1" @click='takePic'>点击拍照</button>
    <button id="btn2">从相册中获取</button>
    <img style="display:block;width:100%;" id="image">
  </div>
</template>

<script>
export default {
  data: function (){
    return {
    }
    
  },
  
  methods: {
      takePic() {
        navigator.camera.getPicture(success,error,{});

        function success(fileurl) {
            var image=document.getElementById("image")
            image.src=fileurl;
        }
        function error() {
        }
    }
  },
};
</script>

这里面省略的很多配置，如getPicture里面的option参数都未配置，详细可见官网https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/index.html

三、main.js文件里面主要就是这一段：添加deviceready事件监听，当cordova设备准备完成后再new vue

document.addEventListener('deviceready', function() {
  new Vue({
    el: '#app',
    router,
    render: h => h(App),
  })
 
}, false);

四、index.html里面修改为，主要是添加几行meta信息和cordova.js：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <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">
  </head>
  <body>
    <script type="text/javascript" src="cordova.js"></script>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

五、修改config/index.js文件：

我跟参考的文件不一样，我没有修改生成文件的路径，只修改了assetsSubDirectory和assetsPublicPath:，最后是通过拷贝的方式覆盖cordova项目的www文件的

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: '',
    assetsPublicPath: '',
    proxyTable: {
      '/api': {
        target: 'http://10.70.61.83:8093',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

-----------------------------------以上结束vuei项目修改-------------------------------

执行vue项目的编译命令npm run build。在根目录下生成dist文件夹，将所有文件复制到cordova的www文件夹下。

-----------------------------------以下修改cordova项目---------------------------------

一、使用cordova plugin add cordova-plugin-camera 添加相机插件，可用cordova plugin ls检查

二、使用cordova build android对项目进行打包

-----------------------------------结束对cordova项目操作----------------------------