前端JS调用微信JSAPI之扫一扫

扫一扫按钮增加点击事件

<div class="a2" onclick="onQscan()">
<span>扫一扫</span>
<em><img src="__RES__/images/icon/b1.png"></em>
</div>

扫一扫执行JS方法

<script>
/**
* 扫一扫点击
*/
function onQscan(){
$.ajax({
url:"/staff/index/sys_config",
// 请求接口所需参数的接口
data:{
url : location.href.split('#')[0]
// 当前调用，页面地址(生成签名要用，请确保获取正确签名)
},
type:'post',
success:function (res){
// 接口调用成功，把获取到的参数放到wx.config
// 维信扫一扫配置函数，必须正确配置
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.appid, // 必填，公众号的唯一标识
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.noncestr, // 必填，生成签名的随机串
signature: res.sha_str,// 必填，签名
jsApiList: ['scanQRCode','checkJsApi'], // 必填，需要使用的JS接口列表
});
// 微信扫一扫执行函数
wx.scanQRCode({
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
var result = res.resultStr; // 扫描完成后返回的结果
if( !result ){
alert('无效二维码');
}
// 扫码成功，处理后续逻辑
}
});
}
})
}
</script>

后台代码，PHP7.0，TP5，easyWechat 4.0

public function sys_config(){
$param = $this->request->param();
$config = config('wechat.')['applet'];
$appid = $config['app_id'];
$secret = $config['secret'];
// 获取token
// token和jsapi_ticket都是缓存到文件的，按照文档说法最好缓存，不然可能会影响调用，文件保存的地址根据需要随意更换，保证可读可写
$token_data = file_get_contents(PUBLIC_PATH . '/wechat_token.txt');
if (!empty($token_data)) {
$token_data = json_decode($token_data, true);
}
$time
= time() - (isset($token_data['time']) ? $token_data['time'] : 0);
if( $time > 5000 ){
$token_url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$secret}";
$token_res = $this->https_request($token_url);
$token_res = json_decode($token_res, true);
$token = $token_res['access_token'];
$data = array(
'time' =>time(),
'token' =>$token
);
file_put_contents(PUBLIC_PATH . '/wechat_token.txt', json_encode($data));
}else {
$token = $token_data['token'];
}
// 获取jsapi_ticket
$ticket_data = file_get_contents(PUBLIC_PATH . '/wechat_ticket.txt');
if (!empty($ticket_data)) {
$ticket_data = json_decode($ticket_data, true);
}
$time
= time() - (isset($ticket_data['time']) ? $ticket_data['time'] : 0);
if ($time > 5000) {
$ticket_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$token}&type=jsapi";
$ticket_res = $this->https_request($ticket_url);
$ticket_res = json_decode($ticket_res, true);
$sign_data['jsapi_ticket'] = $ticket_res['ticket'];
$data = array(
'time'
=>time(),
'ticket'
=>$sign_data['jsapi_ticket']
);
file_put_contents(PUBLIC_PATH . '/wechat_ticket.txt', json_encode($data));
} else {
$sign_data['jsapi_ticket'] = $ticket_data['ticket'];
}
// 进行sha1签名
$sign_data['timestamp'] = time();
$sign_data['noncestr'] = $this->createNonceStr();	// 生成随机字符串，或者直接时间戳拼一个随机数，任意生成
$sign_data['url'] = $param['url']; // 调用JSSDK的页面地址，这里是前端传过来的当前调用接口的URL
// 参数排序并组成"A=B&C=D"格式
$sign_str = '';
ksort($sign_data);
foreach ($sign_data as $k => $v){
$sign_str .= $k . '=' . $v . "&";
}
// 生成签名，加密方法sha1
$sign_data['appid'] = $appid;
$sign_data['sha_str'] = sha1(rtrim($sign_str, '&'));
return ($sign_data);
}

最后

以上就是火星上香烟为你收集整理的前端JS调用微信JSAPI之扫一扫的全部内容，希望文章能够帮你解决前端JS调用微信JSAPI之扫一扫所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。