JQ---h5页面上实现微信扫一扫功能

3 篇文章 0 订阅

JQ—h5页面上实现微信扫一扫功能

在这里插入图片描述

1.引用jq和微信配置相关文件

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

2.在js中,请求后台的接口

$(document).ready(function () {
	getCode()//调用接口
})
function getCode(){//获取二维码
        let url = document.location.href;
        $.ajax({ 
            url:urlLink+'c=sjd&a=index&do=wxconfig',
            method:'post',
            dataType: "json",
            data:{
                url:url
            },
            success:function(res){
                var jsondata= res.data;
                console.log('微信信息--',jsondata)
                wx.config({
                    // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                    debug: false,
                    // 必填,公众号的唯一标识
                    appId: jsondata.appId,
                    // 必填,生成签名的时间戳"" + 
                    timestamp: jsondata.timestamp,
                    // 必填,生成签名的随机串
                    nonceStr: jsondata.nonceStr,
                    // 必填,签名
                    signature: jsondata.signature,
                    // 必填,需要使用的JS接口列表
                    jsApiList: ['scanQRCode']
                });
            }
        })
     }

//在一个循环中的调用
 // 获取微信扫一扫
   $('.bao_qrcode1').each(function(){
       $(this).click(function(){
           wx.ready(function () {
               wx.checkJsApi({
                   jsApiList: ['scanQRCode'],
                   success: function (res) {}
               })
               // wx.error(function(res) {
               //         alert("出错了:" + res.errMsg);//提示wx.config配置错误。
               // });
                wx.scanQRCode({
                   needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
                   scanType: ["qrCode"], // 可以指定扫二维码还是一维码,默认二者都有
                   success: function (res) {
                       var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
                      // alert("扫描结果:"+result);
                       window.location.href = result;//因为我这边是扫描后有个链接,然后跳转到该页面
                   }
               });
           });
       });
   })
               

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值