3

在UniApp的H5项目中，生成二维码和扫描二维码的操作处理 - 伍华聪

 1 year ago
source link: https://www.cnblogs.com/wuhuacong/p/16715178.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

在我们基于UniApp的H5项目中，需要生成一些二维码进行展示，另外也需要让用户可以扫码进行一定的快捷操作，本篇随笔介绍一下二维码的生成处理和基于H5的扫码进行操作。二维码的生成，使用了JS文件weapp-qrcode.js进行处理，而二维码扫码则是基于一个第三方组件的方式进行支持的，最后通过统一入口来支持不同平台的扫码操作。

1、二维码的生成处理

二维码的生成，使用了JS文件weapp-qrcode.js进行处理的。因此我们在页面或者组件使用它的时候，需要引入JS文件才能调用。

import qrCode from '@/libs/weapp-qrcode.js';

我们为二维码的展示，创建一个自定义组件，用来展示二维码信息以及一些说明信息，如下所示。

<view class="hidden-box">
    <!-- <view class="code-tit">二维码</view> -->
    <view class="qrcode-box">
        <tui-no-data v-if="!code" :fixed="false" imgUrl="/static/image/img_nodata.png">暂未生成二维码
        </tui-no-data>
        <view class="qrcode" v-else>
            <canvas :style="{ width: qrcode_w + 'px', height: qrcode_w + 'px' }" canvas-id="qrcode"
                id="qrcode"></canvas>
        </view>
    </view>
    <view class="explain" v-if="desc.length > 0">使用说明</view>
    <view class="explain-text" v-for="(items, index) in desc" :key="items">{{ items }}
    </view>
</view>

如果没有生成二维码的所示，我们用一个空图片代替，如下效果所示。

8867-20220921115327990-627447190.png

 二维码生成的时候，接收一个控件id，以及二维码的值，生成函数代码如下所示。

    // 二维码生成工具
    qrcode(text, canvasId) {
        // console.log(text, canvasId)
        new qrCode(canvasId, {
            text: text,
            width: this.qrcode_w,
            height: this.qrcode_w,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: qrCode.CorrectLevel.H
        });
    }

在添加一个方法对展示进行折叠处理，那么具体如下所示。

showDetail() {
    this.visible = !this.visible;
    if (this.visible) {
        setTimeout(() => {
            this.qrcode(this.code, 'qrcode');
        }, 60);
    }
},

在测试页面中，导入刚才的二维码自定义组件，然后以普通的组件一样使用它即可。

<qrcode-info :code="entity.qrCode"></qrcode-info>

随便弄一个二维码的值，生成二维码后的界面测试效果如下所示。

8867-20220921114651855-1057004405.png

2、二维码的扫码操作

我们知道，基于UniApp的程序中，内置有扫码操作

uni.scanCode(OBJECT)

地址是：https://uniapp.dcloud.net.cn/api/system/barcode.html#scancode：

不过该接口却不能在H5中调用扫码处理，

8867-20220921120001183-1370651862.png

 如果需要在H5应用中扫码，那么需要另辟蹊径，如果使用基于微信的SDK进行，还需要一系列的操作很麻烦，而且H5扫码一般需要https的支持才能调用摄像头的。

我在GitHub上搜索了一些基于H5扫码的项目，好像效果都不是很理想，估计是没有找到好的案例。在不经意间，发现《H5调用摄像头识别二维码》（需要https环境才能使用）效果挺好，就下来整合在项目中使用。

8867-20220921120357113-294180138.png

为了方便通用的扫码处理，我们这里定义了一个通用的扫码页面scan-qrcode.vue ，其他地方需要扫码的，统一定位到该页面处理即可。

在页面代码中，我们引入上面的二维码扫描组件即可，如下代码所示。

<template>
    <view class="container">
        <get-qrcode @success='qrcodeSucess' @error="qrcodeError"></get-qrcode>
    </view>
</template>

<script>
    import getQrcode from '@/pages/components/GetQrcode/getQrcode.vue'
    export default {
        components: {
            getQrcode
        },

另外定义一个to参数，用来判断页面转到那里去的。

data() {
    return {
        to: '' //页面带过来的to地址
    }
},
onLoad(options) {
    this.to = options?.to;
}

同时定义两个方法，一个是成功处理的，一个是出错的提示的。

qrcodeSucess(data) {
    if (uni.$u.test.url(data)) {
        let url = data;
        console.log(url)
        if (url.indexOf('#') > 0) {
            let pageurl = url.split('#')[1];
            console.log(pageurl);
            //在页面地址后增加一个to参数
            let toUrl = uni.$u.test.isEmpty(this.to) ? pageurl : (pageurl + `&to=${this.to}`)
            uni.navigateTo({
                url: toUrl
            })
        } else {
            uni.$u.toast("URL格式不符");
        }
    }
},
qrcodeError(err) {
    console.log(err)
    uni.showModal({
        title: '摄像头授权失败',
        content: '摄像头授权失败，请检测当前浏览器是否有摄像头权限。',
        success: () => {
            uni.navigateBack({})
        }
    })
},

扫码成功后，会自动根据地址进行跳转到具体的二维码URL页面，并带过去一个to的参数给目标页面。扫码的页面效果如下所示。

8867-20220921121402758-720508450.png

 如果我们扫码的内容是一个URL连接，就会跳转到具体的页面中去，并且带上一个to参数用于区分目标。

这样我们在一些需要的地方，通过按钮或者图片来触发一个扫码行为即可。

8867-20220921121712057-503481835.png

 处理代码如下所示

uni.navigateTo({
    url: '../common/scan-qrcode'
})

如果我们的程序，需要兼容App模式、小程序模式和H5等模式，那么我们可以通过判断来切换不同的扫码处理，如下代码所示。

onScan(to) { // h5扫描二维码并解析  
    console.log("不支持H5扫码 走onScan这个方法")
    let url = '../common/scan-qrcode?to=' + to;
    this.tui.href(url)
},
scanCode(to) {
    // 允许从相机和相册扫码
    // #ifndef H5
    uni.scanCode({
        scanType: ['qrCode', "barCode"],
        success: function(res) {
            console.log(res)

            // 微信小程序
            if (res.errMsg == "scanCode:ok") {
                // 扫描到的信息
                // uni.$u.toast(res.result);

                var url = res.result;
                if (uni.$u.test.url(url)) {
                    console.log(url)
                    if (url.indexOf('#') > 0) {
                        let pageurl = url.split('#')[1];
                        console.log(pageurl);
                        //在页面地址后增加一个to参数
                        uni.navigateTo({
                            url: pageurl + `&to=${to}` //加上功能
                        })
                    } else {
                        uni.$u.toast("URL格式不符");
                    }
                } else {
                    uni.$u.toast("URL格式不符");
                }

            } else {
                console.log("未识别到二维码，请重新尝试！")
                uni.$u.toast('未识别到二维码，请重新尝试！')
            }
        }
    });
    // #endif

    // #ifdef H5
    this.onScan(to)
    // #endif
}

这样我们就统一处理入口了，如下调用代码所示。

packsign() {
    this.scanCode('packsign')
},

以上就是二维码生成和在H5中扫码的处理操作供参考。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK