问题引出

开发webapp，有些时候可能需要打开摄像头，拍照上传图片等，其实在手机浏览器中访问平台是很容易实现

1
<input type="file" accept="image/*" multiple @change="toChoose" />

multiple 属性即可，在移动浏览器中点击，会显示如下选择：

可以看到，当加了multiple属性之后，浏览器会主动显示文件的途径可供选择，本来应该还会显示一个文件选项的，因为我们还加了 accept=”image/*”，只接受图片文件

注：PC浏览器直接打开文件资源选择

当我们用Cordova打包之后，该文件选择也是直接打开图片资源选择，并不会有拍照的选择项，当然也排除某些手机在图片选择里也有拍照入口。

解决方案

以下方法是在vue开发下的配置，正常开发下直接在对应位置加入对应代码即可

拍照方法

在需要使用拍照的组件页面里加入如下方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
cameraTakePicture() {
  if (navigator.camera) {
    navigator.camera.getPicture(this.onSuccess, this.onFail, {
      quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      encodingType: Camera.EncodingType.JPEG,
      sourceType: Camera.PictureSourceType.Camera
    })
  } else {
    this.$notify({
      title: '提示',
      message: '当前设备不支持打开相机！',
      type: 'info'
    })
  }
},
onSuccess(imageURI) {
  ......
},
onFail(mess) {
  console.log('未选择图片')
},

其主要的就是 cameraTakePicture()拍照入口函数

onSuccess()是成功回掉 onFail(mess)是错误回掉

html引入

1、头部引入

1
2
3
<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">

注意第一个标签,我目前是不知道该标签究竟有什么用处，一般网友会叫你加上，但如果加上后不能用了，就请删了吧，无大碍的，

我的项目因为有CDN引入,加上该标签后，竟然连cdn引入都无法生效。所有就去掉了。

2、最后引入

1
<script type="text/javascript" src="cordova.js"></script>

main.js

1
2
3
4
5
6
7
8
9
document.addEventListener('deviceready', function() {
  new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
  })
  window.navigator.splashscreen.hide()
}, false)

cordova安装插件

cordova plugin add cordova-plugin-camera

只需将打包后的文件 放到Cordova项目的WWW文件下进行打包即可。

网上很多让cordova+vue结合开发的，个人认为pc和手机端均要开发的话，还是不要嵌入到Cordova中，只要将手机端的包放入打包生产app即可，虽然有点点麻烦。但不会乱

cordova打包

cordova build …