vue手机端扫描

初七初七

已于 2024-05-20 11:11:40 修改

阅读量589

点赞数 9

文章标签： javascript 开发语言 ecmascript

于 2024-01-24 17:11:17 首次发布

本文链接：https://blog.csdn.net/weixin_63442947/article/details/135825459

版权

文章介绍了如何在网页中利用微信JS-SDK实现扫码功能，包括扫描二维码和一维码，以及如何获取并配置微信的accesstoken和权限，确保扫码功能的正常运行。

摘要由CSDN通过智能技术生成

<script setup lang="ts">
import { get } from '@common/axios/'
import { Dialog } from 'vant'
import wx from 'weixin-js-sdk';

// 款扫描
function scan() {
    wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
        success: (response: any) => {
            // 微信标准结果为：
            // {
            //     resultStr: "code_128,1234567890123456789",
            //     errMsg: "scanQRCode:ok"
            // }
            // 企业微信标准结果为：
            // {
            //     resultStr: "1234567890123456789",
            //     errMsg: "scanQRCode:ok"
            // }
            setTimeout(() => {
                const resultStr = response.resultStr
                    , resultStrArr = resultStr.split(',')
                    , code = resultStrArr[1] ?? resultStrArr[0]
                alert('扫描成功: ' + code)
            }, 1000)
        },
        fail: (response: any) => {
            alert('扫描失败\n' + JSON.stringify(response))
        },
    });
}

init()
async function init() {
    try {
        const response = await get('../../wx/getWxConfig.php?url=' + location.href.replace(/#.*$/, '')) as any
            
        const data = response.data
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.noncestr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名
            jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表
        })
    } catch (error: any)  {
        Dialog.alert({
            title: '错误',
            message: error.msg,
            confirmButtonText: '我知道了',
        })
    }
}
</script>

<template>
    <van-button type="primary" @click="scan">扫描</van-button>
</template>

<style scoped lang="scss">
</style>