先看官方文档了解一些基本知识。
1、接口测试平台修改菜单的URL,这个地址要和JS接口安全域名、授权回调页面域名里配置的IP一样
前端页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>跳转页面</title>
<!-- 引入 WeUI CDN 链接 -->
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css"/>
</head>
<body>
<!-- <h3>微信扫一扫</h3> -->
<a href="./pay2.html" class="weui-btn weui-btn_default">跳转扫一扫</a>
<!-- 使用 -->
<!-- <a href="http://sao315.com/w/api/saoyisao">
<input type="button" value="扫一扫" class="weui-btn weui-btn_default" >
</a>-->
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>微信扫码</title>
<!-- 引入 WeUI CDN 链接 -->
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css"/>
</head>
<body>
<!-- <h3>微信扫一扫</h3> -->
<input type="button" value="扫一扫" class="weui-btn weui-btn_default" onclick="scanQR()">
<!-- 使用 -->
<!-- <a href="http://sao315.com/w/api/saoyisao">
<input type="button" value="扫一扫" class="weui-btn weui-btn_default" >
</a>-->
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"> </script>
<script type="text/javascript" src="https://res.wx.qq.com/t/wx_fed/weui.js/res/1.2.18/weui.min.js"></script>
<script src="plugin/jquery/jquery-2.1.1.min.js"></script>
<script src="js/pay.js"></script>
</html>
/**
* Created by Administrator on 2023/7/7.
*/
var url= location.href.split('#')[0];//获取当前url,不能带路由
var appId ='wxbfb0e559a8e1e5f5';
$.ajax({
url:"https://3cd01daf.r2.vip.cpolar.cn/wx/jsapi/wxbfb0e559a8e1e5f5/getWxJsapiSignature",
type:"get",
async:false,
data:{appid:appId,url:url},
success:function(data){
/*配置 wx.config 参数*/
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appId, // 必填,企业号的唯一标识,此处填写企业号corpid
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature,// 必填,签名,见附录1
jsApiList: ['scanQRCode','getLocation'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function(){
wx.checkJsApi({ //判断当前客户端版本是否支持指定JS接口
jsApiList: ["scanQRCode","getLocation"],
success: function (res) {// 以键值对的形式返回,可用true,不可用false。如:{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
if(res.checkResult.scanQRCode != true){
alert('抱歉,当前客户端版本不支持扫一扫');
}
},
fail: function (res) { //检测getNetworkType该功能失败时处理
alert('checkJsApi error');
}
}); //wx.checkJsApi结束
wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
success: function (res) {
var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
var speed = res.speed; // 速度,以米/每秒计
var accuracy = res.accuracy; // 位置精度
}
});
/* wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
}
});*/
}); //wx.ready结束
wx.error(function(res){
alert("错误信息:"+JSON.stringify(res));
console.log(JSON.stringify(res))
});
}
})
function scanQR() {
var ua = navigator.userAgent.toLowerCase();
var isWeiXin =ua.indexOf('micromessenger') != -1;
if(!isWeiXin){
alert('请用微信打开链接,才可使用扫一扫!');
}
/*wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
success: function (res) {
var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
var speed = res.speed; // 速度,以米/每秒计
var accuracy = res.accuracy; // 位置精度
alert(res)
}
});*/
wx.scanQRCode({
desc: 'desc',
needResult : 1, // 默认为0,扫描结果由企业微信处理,1则直接返回扫描结果,
scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码,默认二者都有
success : function(res) {
console.log("调用扫描成功",res);
var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
location.href="main.html";
//alert("扫码结果为:" + result);
},
error:function(res){
console.log(res)
if (res.errMsg.indexOf('function_not_exist') > 0) {
alert('版本过低请升级')
}
}
}); //wx.scanQRcode结束*/
}
局域网开发使用手机测试时,需要连接同一局域网下的WiFi,电脑连手机热点也可。