h5中开发中摄像头及路由相关问题

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

前言

最近开发h5项目，遇到了不少奇奇怪怪的问题。。。下面把踩过的坑分享一下，首先说一下，我这里是纯h5开发，然后用apicloud或者Hbuilder套一个安卓的壳。

路由参数中query参数的修改

这里以vue开发中为例，在使用tab组件的时候有时候会需要根据实际情况来更改地址栏中的query参数，这里不知道什么是query参数的可以看这个文章。

这里是直接使用一个依赖包来完成更改query参数的效果的，具体步骤如下：

首先通过npm来安装：

npm i webpack-merge

然后在需要的页面直接引入即可：

import merge from 'webpack-merge'

使用方法如下：

 this.$router.push({
    query: merge(this.$route.query, { 'itemStatus': name })
 })

这样就可以实现更改query参数的需求了。

h5中调用摄像头的权限

在项目中需要使用到摄像头来扫描条形码，于是在网上找了一个库，在浏览器中可以正常的使用，但是通过apicloud打包之后就不行了，在网上找了很多方法之后都没能解决，后来了解需要调用安卓的plus方法，下面直接上代码（这里以vue为例）

mounted() {
    document.addEventListener('plusready', this.onPlusReady, false)//这里必须写，不然plus会报错
    document.addEventListener('plusready', function() { 
       //这里要注意plus只能再安卓app中使用，如果你在浏览器中直接运行就会报错的，并且这个plus在编译器中会标红，这一般是eslint的原因，可以.eslintrc中加上对plus的相关配置或者想我下面这样，直接忽略掉这行报错即可
      // eslint-disable-next-line no-undef
      plus.android.requestPermissions(['android.permission.CAMERA'], function(e) {
        if (e.deniedAlways.length > 0) { 
          plus.runtime.restart()
        }
      }, function(e) {
        alert('Request Permissions error:' + JSON.stringify(e))
      })
    }, false)
    
    methods:{
     onPlusReady() {
      // eslint-disable-next-line no-undef
      const arcode = plus.barcode.create('barcode', [plus.barcode.QR], {
        top: '-9999', // 这里是为了调用就是创建一个调用摄像头权限的东西
        left: '-9999',
        width: '50%',
        height: '200px',
        position: 'static'
      })
    }
    }

到这里位置再去打包就可以实现调用摄像头的功能了，记得还要在apicloud或者Hbuilder中配置一下获取摄像头的权限。

总结

纯h5的开发再套上安卓的壳还是会遇到很多坑的，后面有机会还是要使用uniapp或者taro来开发，完结，撒花。又是劳累的一天，gogogo