前言

扫一扫功能十分常见，目前我做的项目是webapp类型的。有在微信公众号，以及支付宝平台上去使用。那现在需要集成扫一扫功能。我个人觉得有两种方案，一个各大平台对外的扫一扫功能API的调用。通过不同平台的UA去使用不同的接口。还有就是原生的调用摄像头，去兼容不容的平台，这里的兼容性是一个问题。当然可能没对外的api稳定。那我还是去尝试选择第二种方案。因为我觉得第一种方案比较繁琐。

二维码识别的库

我在github上找了这个 vue-qrcode-reader 去尝试。

使用

npm install vue-qrcode-reader

局部引入

import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'

const MyComponent = {

  components: {
    QrcodeStream,
    QrcodeDropZone,
    QrcodeCapture
  },
  // ...
))

全局引入

import Vue from "vue";
import VueQrcodeReader from "vue-qrcode-reader";

Vue.use(VueQrcodeReader);

Demo

这是这个库的例子

扫描页面

<!--
 * @Description: 扫描测试
 * @Author: lxc
 * @Date: 2019-08-13 09:19:38
 * @LastEditTime: 2019-08-14 16:15:11
 * @LastEditors: lxc
 -->
<template>
  <div>
    <p class="error">{{ error }}</p>
    <div class="fullscreen">
      <qrcode-stream @decode="onDecode" @init="onInit" />
    </div>
  </div>
</template>

<script>
import { QrcodeStream } from 'vue-qrcode-reader'
import { isNotEmpty } from '@/utils/ToolUtil.js'


export default {
  name: 'Scan',
  components: { QrcodeStream },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: 'scan',
          name: '二维码扫描',
          content: '二维码扫描内容'
        }
      ]
    }
  },
  data() {
    return {
      title: '扫一扫',
      error: '',
      from: {},
      scanResult: {}
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 因为当钩子执行前，组件实例还没被创建
      // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
      console.log(vm) // 当前组件的实例
      vm.from = from
    })
  },
  mounted() {
    console.log('scan mounted')
    console.log('当前页面的名字:' + this.$router.history.current.name)
  },
  methods: {
    onDecode(result) {
      this.$showToast('扫描内容：result = ' + result)
      if (isNotEmpty(this.from.name)) {
        console.log('scan onDecode->from.name = ' + this.from.name)
        this.scanResult.name = this.from.name
        this.scanResult.qrCode = result
        this.$store.commit('scan/setScanResult', this.scanResult)
        this.$router.back(-1) 
      } else {
        console.log('scan onDecode->from.name Empty')
      }
      // EventBus.$emit('scan-content', result)
    },

    async onInit(promise) {
      try {
        await promise
      } catch (error) {
        if (error.name === 'NotAllowedError') {
          this.error = 'ERROR: you need to grant camera access permisson'
        } else if (error.name === 'NotFoundError') {
          this.error = 'ERROR: no camera on this device'
        } else if (error.name === 'NotSupportedError') {
          this.error = 'ERROR: secure context required (HTTPS, localhost)'
        } else if (error.name === 'NotReadableError') {
          this.error = 'ERROR: is the camera already in use?'
        } else if (error.name === 'OverconstrainedError') {
          this.error = 'ERROR: installed cameras are not suitable'
        } else if (error.name === 'StreamApiNotSupportedError') {
          this.error = 'ERROR: Stream API is not supported in this browser'
        }
      }
    }
  }
}
</script>

<style scoped>
.error {
  font-weight: bold;
  color: red;
}

.fullscreen {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: black;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}
</style>

因为需要用手机上去测试。所以在自己的android 项目里去测试自己写的页面。第一次并没有成功。我想看一下具体的打印。如果是在浏览器上是很好查看的。那如何在android webview 去看打印呢？在网上搜一下android webview调试，我相信会有一大堆博客。可以自行百度。这里我也简单的写一下。

1.Android webview 需要开启

WebView.setWebContentsDebuggingEnabled(true);&emsp;

2.通过chrome浏览器访问 chrome://inspect/#devices 下面会有一个列表，从列表中选择自己的项目去点击 inspect

这里有一个小坑。。。

我点开inspect 发现一直白屏。没有任何内容。这里需要用一下梯子。。devtools 可能需要下载一个插件。

nuxt使用https

后来发现打印报错。

ERROR: secure context required (HTTPS, localhost)

因为我是本地调试，所以一般都是http 这里我去尝试本地使用https ，想看nuxt官网的说明可以点击这里 nuxt配置文档

这里我也贴一下

使用 HTTPS 配置的示例

import path from 'path'
import fs from 'fs'

export default {
  server: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
      cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
    }
  }
}

发现需要生成server.key和server.crt 这里需要借助 Openssl去生成下载地址
 参考博客

Key是私用秘钥，通常是RSA算法 Csr是证书请求文件，用于申请证书。在制作csr文件时，必须使用自己的私钥来签署申，还可以设定一个密钥。 crt是CA认证后的证书文，签署人用自己的key给你签署凭证。

key生成

openssl genrsa -out server.key 2048

这样是生成RSA密钥，openssl格式，2048位强度。server.key是密钥文件名。

csr生成

openssl req -new -key server.key -out server.csr

需要依次输入国家，地区，组织，email。最重要的是有一个common name，可以写你的名字或者域名。如果为了https申请，这个必须和域名吻合，否则会引发浏览器警报。生成的csr文件讲给CA签名后形成服务端自己的证书。

crt生成

openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

生成的server.crt文件

参考博客

当nuxt配置好https之后，再一次去尝试，发现终于可以显示出来。但是在android webview 上还是有一点不一样，摄像头的请求权限并没有弹出来。我用微信内置手机浏览器打开都是会弹出一个权限的请求。

这里需要对webview 自定义的WebViewClient 一点改动

    public void onPermissionRequest(PermissionRequest request) {
            if (VERSION.SDK_INT >= 21) {
                request.grant(request.getResources());
                request.getOrigin();
            }
        }

       public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
            result.confirm();
            return true;
        }

总结

最终是可以使用这个扫一扫的功能。真香系列~~~

nuxt扫一扫功能

前言