微信公众号在调用扫一扫功能时,一维码(条形码)在直接返回结果时会在结果前带上EAN_8, EAN_13, CODE_25, CODE_39, CODE_128, UPC_A, UPC_E...

之前公司公众号功能只有扫二维码,有一天突然要加扫一维码功能。

因为当时感觉没什么,在scanType里加个barCode就好了呀,

然后就发现事情永远不会有你想象的那么简单。大概二十天之后bug才来,

找了好一阵才发现是微信的问题

微信的扫一维码直接返回结果的话会在结果前加上CODE_128,

比如这个一维码上的信息是20180528,扫出来的就是CODE_128,20180528

解决起来还是异常简单的

wx.scanQRCode({
                needResult : 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
                scanType : [ "qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
                success : function(res) {
                    var result = res.resultStr; 
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
公众号vue页面调用手机摄像头扫功能,需要使用vue的相关组件和插件。首先,需要使用vue-router进行路由控制,将扫页面添加到路由中。在扫页面中,需要使用Vue Quagga组件,该组件是基于QuaggaJS开发的二维扫描器,能够轻松地在移动设备上运行。同,还需要使用vue-web-cam组件实现调用手机摄像头的功能。该组件支持通过getUserMedia API调用置或后置相机,并可以实预览相机画面。具体实现过程如下: 1. 安装Vue Quagga和vue-web-cam插件 通过npm安装Vue Quagga和vue-web-cam插件: ``` npm install vue-quagga vue-web-cam ``` 2. 在扫页面中引入组件 在扫页面的Vue组件中,引入Vue Quagga组件以及vue-web-cam组件: ``` import VueQuagga from &#39;vue-quagga&#39; import VueWebCam from &#39;vue-web-cam&#39; export default { components: { VueQuagga, VueWebCam } // ... } ``` 3. 在扫页面中添加Quagga配置项 在扫页面的Vue组件中,添加Quagga的配置项,并设置回调函数处理扫结果。例如: ``` <template> <div> <vue-web-cam ref="webcam" width="100%" :videoConstraints="{facingMode:&#39;environment&#39;}"></vue-web-cam> <vue-quagga v-if="showCamera" :config="quaggaConfig" @detect="detectHandler"></vue-quagga> </div> </template> <script> export default { data () { return { quaggaConfig: { inputStream: { name: "Live", type: "LiveStream", constraints: { width: {min: 640}, height: {min: 480}, facingMode: "environment" } }, decoder: { readers: [&#39;ean_reader&#39;, &#39;upc_reader&#39;] }, locate: true }, showCamera: true } }, methods: { detectHandler (result) { console.log(result.codeResult.code) } } } </script> ``` 4. 在扫按钮点击事件中开始调用摄像头 在扫按钮的点击事件中,使用Vue Web Cam组件的start()方法开始调用置摄像头: ``` <template> <div> <button @click="startScan">开始扫</button> <vue-web-cam ref="webcam" width="100%" :videoConstraints="{facingMode:&#39;environment&#39;}"></vue-web-cam> <vue-quagga v-if="showCamera" :config="quaggaConfig" @detect="detectHandler"></vue-quagga> </div> </template> <script> export default { data () { return { quaggaConfig: { // ... }, showCamera: false } }, methods: { startScan () { this.showCamera = true this.$refs.webcam.start() }, detectHandler (result) { console.log(result.codeResult.code) } } } </script> ``` 至此,公众号vue页面调用手机摄像头扫功能已经实现。用户在点击页面上的扫按钮后,会弹出调用置摄像头的提示框,扫识别成功后会将结果输出到控制台上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值