ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-11-24 13:34:38  阅读:142  来源: 互联网

标签:function 必填 微信 JQ jsondata h5 res wx


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;//因为我这边是扫描后有个链接,然后跳转到该页面
                   }
               });
           });
       });
   })
               

标签:function,必填,微信,JQ,jsondata,h5,res,wx
来源: https://blog.csdn.net/heavenz19/article/details/121513246

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有