前言
扫一扫功能十分常见，目前我做的项目是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);
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;
}
总结
最终是可以使用这个扫一扫的功能。真香系列~~~
