HTML——微信浏览器H5页面调用微信扫一扫

使用JS-SDK调用微信扫一扫，需要有公众号支持，通过公众号生成JS-SDK使用权限签名。本文直接调用已封装好的接口来获取随机数（noncestr）、时间戳（timestamp）、签名（signature），接口地址：http://xx.xx.com/xxmap/wechat/jsapi/getSignature.do?appId=APPID&url=URL。appId是公众号的标识，url是需要调用微信扫一扫的页面的地址，需要进行encodeURIComponent编码。

调用微信扫一扫前端页面代码：

<head>

<title>微信扫一扫</title>

</head>

<body>

var purl = encodeURIComponent(location.href);

$.ajax({

url:"voucherController.do?getSignature",

data:{"url":purl},

type:"POST",

dataType:"json",

success:function(result){

wx.config({

debug:false,

appId:result.obj.appId,

timestamp:result.obj.timestamp,

nonceStr:result.obj.noncestr,

signature:result.obj.signature,

jsApiList:['scanQRCode']

});

error:function(){

alert("请求失败");

}

});

function scanQr(){

var ua = navigator.userAgent.toLowerCase();

var isWeiXin =ua.indexOf('micromessenger') != -1;

if(!isWeiXin){

alert('请用微信打开链接，才可使用扫一扫！');

}

wx.scanQRCode({

needResult:1,

scanType:["qrCode"],

success:function (res) {

var scan = res.resultStr;

location.href=scan;

error:function(res) {

if(res.errMsg.indexOf('function_not_exist') > 0){

alert('当前版本低，请进行升级！');

}

});

}

wx.error(function(res){

alert(res.errMsg);

});

//$(function(){

// setTimeout("scanQr()","1000");

//});

</script>

</body>

</html>

调用微信扫一扫后端代码：

@RequestMapping(params = “getSignature”)

@ResponseBody

public AjaxJson getSignature(String url){

AjaxJson j = new AjaxJson();

String sigUrl = “http://xx.xx.com/xxmap/wechat/jsapi/getSignature.do?appId=APPID&url=” + url;

//Get请求接口，获取随机数、时间戳、签名

JSONObject jsonObject = HttpRequest.sendGet(sigUrl);

JSONObject jsonObj = JSON.parseObject(jsonObject.getString(“result”));

jsonObj.put(“appId” ,APPID);//公众号appid

j.setObj(jsonObj);

return j;

}

注意：jweixin-1.0.0.js的引用，使用vConsole调试，IOS系统可能会出现找不到变量:wx异常，这个时候可以直接把整个jweixin-1.0.0.js复制到你的JS中，就可以解决。

HTML——微信浏览器H5页面调用微信扫一扫相关推荐

H5页面调用微信支付
1.H5页面使用微信支付,首先需要注册微信公众号,在设置与开发>公众号设置>功能设置中配置业务域名.JS接口安全域名.网页授权域名.支付功能页面需在此域名链接下的页面. 2.加入域名后,就 ...
微信浏览器H5页面自动播放背景音乐
微信浏览器H5页面自动播放背景音乐最近遇到一个需求一个文章详情页(图文结合) 进入页面后自动播放背景音乐正常用video标签后安卓打开后是自动播放的但是ios是不支持自动播放的经过不懈努力的 ...
公众号开发-移动端h5页面调用微信扫一扫
前言: 大家好,我是前端小陈.今天为大家讲一下微信公众号开发,调用微信的JSSDK的案例. 前不久,接到这么一个需求:在H5网页实现扫一扫功能. 要求:微信端以及浏览器均可以实现扫一扫功能,而且不能 ...
微信小程序webview(H5页面)调用微信小程序支付
1.业务描述:微信小程序商城入口进入的页面是商城H5页面,在H5页面进行微信支付如何实现: 2.微信小程序(webview访问H5页面)必须使用微信小程序支付: 如何实现以及实现方式以及支付后页面返回 ...
企业微信引入微信api扫一扫（vue）【h5页面调用微信jssdk】
引入(两种方式) (1)第一种方式 <script type="text/javascript" src="http://res.wx.qq.com/open/js ...
微信端H5页面调用分享接口
最近公司做了一个给学生投票的H5页面,主要是在微信端使用,需要添加微信分享功能: 本文章主要是记录调用微信分享接口需要注意的事项: 1.前端用的angular1框架,首先需要在index页面引入微信接 ...
微信公众号页面调用微信扫一扫
本以为调用微信扫一扫很容易,结果看了微信的开发者文档,正如大家所说,微信的开发文档写的一塌糊涂,非常的不详细. 转载:https://www.imooc.com/article/42734 从而导致基 ...
微信浏览器H5页面软键盘关闭导致页面空缺的问题
微信6.7.4 H5页面里的select,input软键盘弹起的时候页面会上移,软键盘关闭页面不会下移.导致页面空缺了一部分. 微信6.7.3及其它版本不会有这个问题!页面会随着软键盘关闭而下移恢复正 ...
iOS H5页面调用微信或者支付宝进行支付
一说支付,大多数人都会理解支付方式是下载微信和支付宝SDK进行支付,但是其实还有其他的方式,就是H5调用系统支付宝和微信进行支付. H5支付可能很多人认为是加载完页面剩下的就是页面完成即可,但是实际没 ...

HTML——微信浏览器H5页面调用微信扫一扫

HTML——微信浏览器H5页面调用微信扫一扫相关推荐

最新文章

热门文章