基于微信实现H5扫一扫功能详细过程

实现 效果

在这里插入图片描述

基础配置

一、获得开发者 账号

登录微信公众平台：https://mp.weixin.qq.com/ 进行账号注册。

二、获得微信JSAPI需要的接入参数

AppID, Ap pSec re t
1、通过左侧菜单点击设置与开发 &g t;&g t; 基本配置功能在这里插入图片描述
2、获取开发者ID（Ap pID）

3、设置并获取开发者密码（AppSec r e t）4、配置IP白名单
白名单的配置决定了是否有权限调用微信接口获取签名所需的access _token和js api_tick e t

JS接口 安全 域名 设置

1、通过左侧菜单进入 设置&g t;&g t;公众号设置 >>功能设置 功能
在这里插入图片描述
2、设置js 接口安全域名，填写保存域名

域名设置指项目h5的域名，可设置三个域名，一个月内只可修改３次。微信提供了一个 txt 格式的文件点击下载后必须放到服务器上。

查看接口调用 权限

通过左侧菜单进入开发=》接口权限可查看所有接口调用权限，调用限制次数等信息。
在这里插入图片描述

前端 调用 代码

// 在index.html页面引入
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"&gt;</script&gt;<!--微信JSAPI-->

import {
    queryWeixinJsApiConfig
} from '@vue/rights/service/RestServiceApi.js'

methods: {
        wxConfig(callback) {
            queryWeixinJsApiConfig({
                url: window.location.href
            }).then(resp => {
                if (parseInt(resp.resCode) === 0) {
                    let configData = resp.busiDataResp;
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: configData.appId, // 必填，公众号的唯一标识
                        timestamp: configData.timestamp, // 必填，生成签名的时间戳
                        nonceStr: configData.nonceStr, // 必填，生成签名的随机串
                        signature: configData.signature, // 必填，签名
                        jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表（扫一扫接口）
                    });
                    wx.ready(function () {
                        wx.checkJsApi({
                            jsApiList: ['scanQRCode'], // 需要检测的JS接口列表
                            success: function (res) {
                                // 以键值对的形式返回，可用的api值true，不可用为false
                                // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                                callback(res.checkResult);
                            }
                        });
                        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                    });
                    wx.error(function (res) {
                        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                        console.info(res)
                    });
                } else {
                    this.$toast.showToast("微信JSAPI配置查询失败！")
                }
            }).catch(err => {
                this.$toast.showToast(err)
            })
        }

        wxScanQRCode(callback) {
            wx.scanQRCode({
                needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                success(res) {
                    if (callback) {
                        let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                        callback(result);
                    }
                },
                error(err) {
                    console.info(err);
                }
            });
        }
        scanQRCode() {
            if (!this.scanQRCodeIsSupport) {
                this.$toast.showToast("该功能仅在微信应用内打开的页面受支持");
                return;
            }
            wxScanQRCode((result) => {
                if (result) {
                    window.location.href = result;
                }
            });
        }
    },
    created() { //页面渲染前执行
        var self = this;
        //微信jsapi配置初始化
        wxConfig((data) => {
            self.scanQRCodeIsSupport = data.scanQRCode;
        });
    },