H5调用微信扫一扫识别二维码

1、首先页面引入jweixin-1.2.0.js

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2、在html创建一个a标签

<a href="http://sao315.com/w/api/saoyisao">点击扫码</a>

3、js处理返回值

var qr=getQueryString("qrresult");//获取二维码的值
if(qr){
	var wl = JSON.parse(qr);
	alert(wl)
}

function getQueryString(name)
{
	var reg = new RegExp("\\b"+ name +"=([^&]*)");
	var r = location.href.match(reg);
	if (r!=null) return unescape(r[1]);
}
### 实现H5页面调用微信API 要在HTML5网页中集成微信二维码的功能,需遵循特定流程并确保满足相应条件。具体而言,在使用微信JS-SDK前,服务器端应获取签名所需参数,并将其传递给前端。 #### 获取签名信息 首先,服务器端需要向微信公众平台发送请求以获得用于签名的数据包。此过程涉及通过接口`/cgi-bin/ticket/getticket`来取得jsapi_ticket[^1]。旦获得了有效的jsapi_ticket,则可以根据URL生成对应的signature字符串。 ```csharp public IActionResult GetSignature(string url) { var ticket = GetJsApiTicket(); // 自定义方法获取jsapi_ticket var noncestr = Guid.NewGuid().ToString("N"); var timestamp = DateTimeOffset.UtcNow.ToUnixTimeSeconds(); using (var sha1 = SHA1.Create()) { byte[] inputBytes = Encoding.UTF8.GetBytes($"jsapi_ticket={ticket}&noncestr={noncestr}&timestamp={timestamp}&url={url}"); byte[] hashBytes = sha1.ComputeHash(inputBytes); StringBuilder sb = new StringBuilder(); foreach (byte b in hashBytes) sb.Append(b.ToString("X2")); ViewBag.Signature = sb.ToString(); ViewBag.Timestamp = timestamp; ViewBag.NonceStr = noncestr; } } ``` #### 前端初始化与调用 接着,在客户端加载页面时引入Weixin JS SDK库文件并通过config接口注入权限验证配置。完成这些准备工作之后就可以安全地调用微信提供的scanQRCode API来进行码操作了。 ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script type="text/javascript"> wx.config({ debug: false, appId: '@ViewBag.AppId', timestamp: @ViewBag.Timestamp, nonceStr: '@ViewBag.NonceStr', signature: '@ViewBag.Signature', jsApiList: ['checkJsApi', 'scanQRCode'] }); // 调用 scanQRCode 方法 function startScan() { wx.ready(function () { wx.scanQRCode({ needResult: 1, // 默认为0,描结果由微信处理;1则直接返回描结果 scanType: ["qrCode"], // 可选值:"qrCode" | "barCode" success: function (res) { alert('描成功:' + res.resultStr); }, fail: function (res) { console.error('描失败:', res.errMsg || ''); } }); }); wx.error(function (res){ console.log('微信JS桥未准备好'); }); } </script> <button onclick="startScan()">点击这里开始描</button> ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值