H5扫码整理

前置条件

.....必须部署在https的环境下才能扫码.....

html-qrcode扫码

<div>
<span>页面加载成功时、调用getCamera()获取摄像头并开始扫码span>
<span>参考地址：https://unpkg.com/browse/[email protected]/README.mdspan>
div>

<script type="text/javascript" src="https://unpkg.com/html5-qrcode">script>
<script>

    window.addEventListener("load", (event) => {
        getCamera()
    });


    let html5QrCode = null;

    let equipInfo = {equipId: "",aid:""}

    function getCamera() {
        console.log("开始获取摄像头------")
        Html5Qrcode.getCameras()
            .then((devices) => {
                console.log("获取摄像头信息",devices)
                if (devices && devices.length) {
                    html5QrCode = new Html5Qrcode("reader")
                    //console.log("创建扫码对象",html5QrCode)
                    start()
                }
            })
            .catch((err) => {
                // handle err
                console.log("获取摄像头异常信息",err)
                html5QrCode = new Html5Qrcode("reader")
                // this.$toast('您需要授予相机访问权限')
            })
    }

    function stop() {
        html5QrCode.stop().then((ignore) => {
            // QR Code scanning is stopped.
            console.log("QR Code scanning stopped.")
        }).catch((err) => {
            // Stop failed, handle it.
            console.log("Unable to stop scanning.")
        })

    }

    function start() {
        {
            html5QrCode.start(
                // environment后置摄像头 user前置摄像头
                {facingMode: "environment"},
                {
                    fps: 2, // 可选，每秒帧扫描二维码
                    qrbox: {width: 300, height: 300} // 可选，如果你想要有界框UI
                    // aspectRatio: 1.777778 // 可选，视频馈送需要的纵横比，(4:3--1.333334, 16:9--1.777778, 1:1--1.0)传递错误的纵横比会导致视频不显示
                },
                (decodedText, decodedResult) => {
                    // do something when code is read
                  
                    alert(decodedText);

                }, (errMsg) => {
                    console.log('扫码errMsg: ', errMsg)
                }
            )
                .catch((err) => {
                    console.log('调用扫码错误信息', err)
                    
                })

        }
    }


script>

微信扫一扫

1、注册一个公众号

注册地址：https://mp.weixin.qq.com/

2、获取自己公众号的appid、appsecurity

公众号左边菜单栏 设置与开发 - 基本配置

3、引入jssdk

参考官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
3.1、配置access_toekn获取的白名单
公众号左边菜单栏 设置与开发 - 基本配置 - IP白名单
配置成功如图

不配置调用accsstoken接口会返回异常：

{	
	"errcode":40164,
	"errmsg":"invalid ip **** ipv6 ::ffff:****, not in whitelist rid: 61323f9-402gref3-016bgr27"
}

3.2、根据appId和AppSecret获取微信签名

先获取token、再获取票据、最后签名加密供wxjs初始化使用

JS-SDK使用权限签名算法：
accesstoken接口：
https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
签名接口：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

3.3、设置JS安全域名接口

公众号左边菜单栏  设置与开发  -  公众号设置  -  功能设置  -  JS接口安全域名

3.4、注意事项

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

timestamp 为时间戳除1000

config:fail invalid url domain JS安全域名配置异常、参考 3.3
config:fail,invalid signature 签名算法异常、参考3.2

初始化完成截图、pc使用 微信开发者工具，验证

4、扫码代码

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js">script>
<script>

    let wxConfig;

    //初始化后调用wx接口
    window.addEventListener("load", (event) => {
        alert(location.href.split('#')[0])
        let url = location.href.split('#')[0]
        let req = {timeStamp: Math.floor(Date.now() / 1000),nonceStr:'chargeService',signature:'',url:url}
        //1、获取验签
        $.ajax({
            url: "/wx",
            type: "POST", //数据发送的方式(POST或者GET)
            data: JSON.stringify(req), //需要传递的参数
            contentType: "application/json",
            dataType: "json", //后端返回的数据格式
            success: function (res) {
                console.log('微信签名',res)
                if (res.respCode !== "0000") {
                    alert(res.respInfo)
                }else {
                    //2、初始化微信对象
                    wx.config({
                        debug: false,
                        appId: res.obj.appId,
                        timestamp:req.timeStamp ,
                        nonceStr: req.nonceStr,
                        signature: res.obj.sign,
                        jsApiList: ['scanQRCode','JSAPI']
                    });
                    console.log("微信对象初始化完成",wx)
                    //3、微信初始化
                    wx.ready(function (){
                        //4、调用扫码
                        wx.scanQRCode({
                            needResult: 1,
                            scanType: ['qrCode', 'barCode'],
                            success: function (res) {
                                let decodedText = res.resultStr; // 获取扫描结果
                                // 处理扫描结果的逻辑
                                alert("扫码结果："+decodedText)
                            },
                            fail:function (res){
                                console.log("扫码失败.......",res)
                            }

                        });
                    })


                }

            }
        });


    });
script>