首先拥有一个微信公众号,企业认证的,获取接口权限。如下图所示:
其次拥有一台服务器,备案号的域名
因为前端页面需要的appId
、signature
是需要后台传递过来的。
第一步:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”(就是发布用的那个域名);
第二步:获取服务号的AppId 和AppSecret
AppId和AppSecret是微信公众平台服务号才有的,如果自己家的公众平台不是服务号,就升级为服务号吧!服务号的功能最强大,商家都用服务号。
获取方法:
登录服务号--->基本配置--->点击进去就会看到AppId ,AppSecret是属于保密状态的,因此在首次注册成功服务号时要保存好发过来的AppSecret,否则再次重置会影响以前做的一些项目。
第三步:创建文件获取access_token和jsapi_ticket;并且保存这两个值方便日后使用;
一、文件access_jsapi.php:
<?php
//获取access_token;
function getAccess(){
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的AppId&secret=你的AppSercet";
$result = get($url);
//生成文件,保存token
$dir = __DIR__; //真实路径,crontab命令的php执行在cli模式下,不能正确识别相对路径,所以使用__DIR__
$filename = $dir."/access_token.php";
create_file($filename, $result);
return $result;
}
//获取jsapi_ticket
function getJsapi(){
$access = getAccess();
$res = json_decode($access);
$accessToken = $res->access_token;
$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
$result = get($url);
//生成文件,保存token
$dir = __DIR__; //真实路径,crontab命令的php执行在cli模式下,不能正确识别相对路径,所以使用__DIR__
$filename = $dir."/jsapi_ticket.php";
create_file($filename, $result);
}
//生成文件
function create_file($filename, $content){
$fp = fopen($filename, "w");
fwrite($fp, "" . $content);
fclose($fp);
}
//请求数据 access,jsapi;
function get($url){
$ch = curl_init();
//设置选项,包括URL
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);//绕过ssl验证
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
//执行并获取HTML文档内容
$output = curl_exec($ch);
//释放curl句柄
curl_close($ch);
return $output;
}
getJsapi();
?>
该php文件创建了两个公用函数 get(),create_file();
get() 函数是为了发送请求,请求数据。获取access_token 和jsapi_ticket;
create_file() 创建文件保存获取到的access_token和jsapi_ticket;
还有两个私有函数getAccess(),getJsapi();
getAccess() 利用AppId和AppSecret创建连接url,再通过get请求获取到access_token,创建access_token.php文件去保存access_token;
getJsapi() 利用getAccess()获取到的access_token 创建连接url,通过get请求获取jsapi_ticket, 再创建jsapi_ticket.php文件去保存jsapi_ticket;
最后通过getJsapi()的自调用,实现整个文档的执行;
二、文件access_jsapi.bat
C:\php\php.exe -q C:\inetpub\test\php\access_jsapi.php
虽然短短的只有一行代码,但确实很关键的步骤。
因为access_token的调用上限为每日2000次,因此必须将access_token 缓存下来。
这个文件是一个定时调用的文件,利用windows 的 schtasks 命令创建一个两小时执行一次的命令,定时指定access_jsapi.bat文件,代码中的 c:\php\php.exe 是你服务器php文件中的执行程序, c:\inetput\test\php\access_jsapi.php 是执行文件的路径。执行文件会自调用getJsapi();
顺带说一下schtasks定时使用方法:
window命令行cmd键入:schtasks 出现如下的界面;
如果出现无法加载资源列表的话,转换编码方式: chcp 437 转换为美国编码就可以了,再次键入schtasks 试试;
(仅需切换一次,可以用chcp 936回到中文)
执行命令:schtasks /create /tn "myapp" /tr c:myApp /sc hourly /mo 2
看到下面的得SUCCESS 说明任务已经成功设置 。可以用schtasks /query 查看命令是否已经设置,还有下次执行的时间;
具体的schtasks用法自行查看,这里只简单的提一下;
你可以查看是否已经在你目录中生成了这两个文件。过两个小时查看文件的时间是否增加了两个小时,还能在公众号中查看access_token的调用情况;
第四步、获取signature签名;
文件jssdk.php
<?php
class JSSDK {
public function getSignPackage() {
$jsapiTicket = $this->getJsApiTicket();
// 注意 URL 一定要动态获取,不能 hardcode.
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
$urlOld = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$url = str_replace(":80","",$urlOld); //注意会默认添加80端口,这样会和公众号的js接口安全域名不一样导致出错,所以要切掉;
$timestamp = time();
$nonceStr = $this->createNonceStr();
// 这里参数的顺序要按照 key 值 ASCII 码升序排序
$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";
$signature = sha1($string);
$signPackage = array(
"appId" => "你的AppId",
"nonceStr" => $nonceStr,
"timestamp" => $timestamp,
"url" => $url,
"signature" => $signature,
"rawString" => $string
);
return $signPackage;
}
private function getJsApiTicket() {
$jsapi = file_get_contents('../php/jsapi_ticket.php');//因为要引用到首页文件,所以地址是以首页文件为准。
$res = json_decode($jsapi);
$ticket = $res->ticket;
return $ticket;
}
private 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;
}
}
//调用JSSDK,获取signature,转化为数组,输出页面;
?>
此文件定义了一个类JSSDK, 后续会调用;
这个文件利用存储下来的jsapi_ticket, 获取signature;
第五步、分享的页面文件;
文件 test.php
<?php
require_once "../php/jssdk.php";
$jssdk = new JSSDK();
$signPackage = $jssdk->GetSignPackage();
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>测试信息</title>
<meta name="author" content="mouseQi">
<script src="zhongji/javascript/jweixin.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>测试信息</h1>
</body>
<script>
wx.config({
debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。移动端会通过弹窗来提示相关信息。如果分享信息配置不正确的话,可以开了看对应报错信息
appId: '你的AppId',
timestamp: '<?php echo $signPackage["timestamp"];?>',
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [//需要使用的JS接口列表,分享默认这几个,如果有其他的功能比如图片上传之类的,需要添加对应api进来
'checkJsApi',
'onMenuShareTimeline',//
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
]
});
window.share_config = {
"share": {
"imgUrl": "http://www.eselearning.cn/ysDemo/touzi111601/sz_logo.png",//分享图,默认当相对路径处理,所以使用绝对路径的的话,“http://”协议前缀必须在。
"desc" : "测试",//摘要,如果分享到朋友圈的话,不显示摘要。
"title" : '测试信息',//分享卡片标题
"link": location.href.split('#')[0],//分享出去后的链接,这里可以将链接设置为另一个页面。
"success":function(){//分享成功后的回调函数
},
'cancel': function () {
// 用户取消分享后执行的回调函数
}
}
};
wx.ready(function () {
wx.onMenuShareAppMessage(share_config.share);//分享给好友
wx.onMenuShareTimeline(share_config.share);//分享到朋友圈
wx.onMenuShareQQ(share_config.share);//分享给手机QQ
});
</script>
</html>
此文件一定要放在js接口安全域名的直接目录下
js接口安全域名为:www.test.com 则:此文件路径为 www.test.com/test.php
页面内容:
在分享页面要引入jweixin.js;
<script src="./javascript/jweixin.js" type="text/javascript" charset="utf-8"></script>
或者直接引用官方:
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
body中为页面内容
wx.config 为获取的签名数据;
window.share_config 为自定义分享的内容;
jsApiList 为分享的方法;
wx.ready(); 微信会准备调用的方法;
注意:文档中有许多的注释一定要仔细看,还有一些路径要注意,部署 情况不一样,所以各文件路径都是自行安排。