微信jssdk调用
在网页中调用微信jssdk能够实现：
1.使用拍照、选图、语音、位置等手机系统的能力。
2.使用微信分享、扫一扫、卡券、支付等微信特有的能力。
调用步骤
1.使用微信测试账号，需要关注测试账号对应公众号，测试页面别人想要浏览，同样需要关注测试公众号。
2.接口配置信息，填写url来响应微信发送的Token验证。
token处填写你自己设定的token值
<?php
$nonce = $_GET['nonce'];
$token = '你设定的token';
$timestamp = $_GET['timestamp'];
$echostr = $_GET['echostr'];
$signature = $_GET['signature'];
//形成数组，然后按字典序排序
$array = array();
$array = array($nonce, $timestamp, $token);
sort($array);
//拼接成字符串,sha1加密 ，然后与signature进行校验
$str = sha1( implode( $array ) );
if( $str == $signature && $echostr ){
//第一次接入weixin api接口的时候
echo $echostr;
exit;
}
3.JS接口安全域名，设置完成后，即可在该域名下调用微信的jssdk。
域名与url：域名对应ip地址，一般到.com .net .org .cn就结束了，url是网络资源统一定位符,用来定位网页与文件，简单点url=网络传输协议+ip或域名 + 端口号 + 资源位置 + 参数 + 锚点。
4.在服务器端实现签名算法，生成签名的逻辑：
（1）通过id与serect获得token；
（2）通过token获得tikect；
ps：由于token和tikect存在有效期且有访问次数限制，所以需要保存在本地，并定时更新。
这里采用保存在文件的方式，需要在网页同级目录下创wechat_token.txt与wechat_ticket.txt两个文件。
（3）将ticket与当前时间戳timestamp，随机数noncestr，url，按一定顺序排列成字符串
注意：在排列过程中不要使用url转义，如将&转义为&；（带分号），浏览器会正确识别，但服务器不行，会导致加密出来的结果不一样；
（4）通过sha1加密这个字符串，生成签名，推荐通过微信签名校验工具验证签名是否正确
5.在需要调用jssdk的网页中，通过config接口注入权限验证，微信会通过你填写的id，随机数，时间戳去生成签名，再与你注入的本地生成的签名进行比对。
备注：网页经微信分享给朋友或朋友圈后，微信会在网页url后加渠道标记，可能导致二次分享失败，在代码中已给出解决方法
6.调用你需要的接口，有的接口如分享给好友，需要在页面加载时就调用好，需写在ready函数中。
代码复制就能用，在网页同级目录下创wechat_token.txt与wechat_ticket.txt两个文件，需要填写的已经用中文标注了
<?php
// 微信 JS 接口签名校验工具: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
$appid = '你自己的id';
$secret = '你自己的serect';
// 获取token,并保存在文件夹中
$token_data = file_get_contents('wechat_token.txt');
if (!empty($token_data)) {
$token_data = json_decode($token_data, true);
}
$time = time() - $token_data['time'];
if ($time > 3600) {
$token_url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$secret}";
$token_res = https_request($token_url);
$token_res = json_decode($token_res, true);
$token = $token_res['access_token'];
$data = array(
'time' =>time(),
'token' =>$token
);
$res = file_put_contents('wechat_token.txt', json_encode($data));
if ($res) {
echo '更新 token 成功';
}
} else {
$token = $token_data['token'];
}
// 获取ticket,并保存在文件夹中
$ticket_data = file_get_contents('wechat_ticket.txt');
if (!empty($ticket_data)) {
$ticket_data = json_decode($ticket_data, true);
}
$time = time() - $ticket_data['time'];
if ($time > 3600) {
$ticket_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$token}&type=jsapi";
$ticket_res = https_request($ticket_url);
$ticket_res = json_decode($ticket_res, true);
$ticket = $ticket_res['ticket'];
$data = array(
'time' =>time(),
'ticket' =>$ticket
);
$res = file_put_contents('wechat_ticket.txt', json_encode($data));
if ($res) {
echo '更新 ticket 成功';
}
} else {
$ticket = $ticket_data['ticket'];
}
// 进行sha1签名
$timestamp = time();
$nonceStr = createNonceStr();
// 注意 URL 建议动态获取(也可以写死)，我这里用的写死.
//$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
//$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; // 调用JSSDK的页面地址
$url= "你自己要调用微信jssdk的网页url";
$str = "jsapi_ticket={$ticket}&noncestr={$nonceStr}×tamp={$timestamp}&url={$url}";
$sha_str = sha1("$str");
//echo "$sha_str,$str";
function createNonceStr($length = 16) {
$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$str = "";
for ($i = 0; $i < $length; $i++) {
$str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
}
return $str;
}
/**
* 模拟 http 请求
* @param String $url 请求网址
* @param Array $data 数据
*/
function https_request($url, $data = null){
// curl 初始化
$curl = curl_init();
// curl 设置
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
// 判断 $data get or post
if ( !empty($data) ) {
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
}
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
// 执行
$res = curl_exec($curl);
curl_close($curl);
return $res;
}
?>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1 onclick="test()">扫一扫</h1>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
//微信二次分享会给你的url加上后缀，通过下面函数，将后缀去掉
function getQueryString(name) {//根据字段看网址是否拼接&字符串
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null)
return unescape(r[2]);
return null;
}
var from = getQueryString('from');
var appinstall = getQueryString('appinstall');
var sec = getQueryString('sec');
var timekey = getQueryString('timekey');
if(from || appinstall || sec || timekey){//假如拼接上了
window.location.href ="你自己要调用微信jssdk的网页url"
}
var url = (window.location.href).split('#')[0];
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '<? echo $appid ?>', // 必填，公众号的唯一标识
timestamp: <? echo $timestamp ?>, // 必填，生成签名的时间戳
nonceStr: '<? echo $nonceStr ?>', // 必填，生成签名的随机串
signature: '<? echo $sha_str ?>',// 必填，签名
jsApiList: ['scanQRCode','onMenuShareAppMessage', 'onMenuShareTimeline'] // 必填，需要使用的JS接口列表，我调用的扫一扫与分享给朋友
});
wx.ready(function () {
wx.checkJsApi({
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline','scanQRCode'],
success: function (res) {JSON.stringify(res)}
});
wx.onMenuShareAppMessage({
title: '你自己定的标题', // 分享标题
desc: '你自己定的描述', // 分享描述
link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '你自己分享图标的url地址', // 分享图标
type: 'link', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
}
});
});
wx.error(function (res) {
console.log(res.errMsg);
});
function test(){
console.log('ok啦');
wx.scanQRCode({
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
console.log(result);
}
});
}
</script>
</body>
</html>
