1.微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”
2.后端代码
/**
* 生成微信公众号签名
* @param string url 前端微信分享页面的url全地址
*/
public function getWxShareSign()
{
$signData = input('');
if( !$signData['url'] ){
$this->_error('参数错误');
}
$ticket = '';
if($redis_ticket = Cache::get('wx_share_ticket')){
$ticket = $redis_ticket;
}else{
$access_token = $this->getWxAccessToken(); //获取微信access_token
$ticket = $this->getWxTicket($access_token); //获取微信ticket
}
$signData['appId'] = "123456789";
$signData['jsapi_ticket'] = $ticket;
$signData['nonceStr'] = 'Wm3WZYTPz0wzccnW';
$signData['timestamp'] = time();
$sign = $this->makeWxSha1Sign($signData); // 生成微信签名
$signData['sign'] = $sign;
$this->_success($signData); // jsapi_ticket, noncestr, timestamp, sign 都返回给前端,供前端页面微信验签使用
}
//生成 sha1 签名
private function makeWxSha1Sign($arr){
$str = sprintf("jsapi_ticket=%s&noncestr=%s×tamp=%s&url=%s", $arr['jsapi_ticket'], $arr['nonceStr'], $arr['timestamp'], $arr['url']);
//字符串SHA1
$signature = sha1($str);
return $signature;
}
//获取微信公众号 票据
private function getWxTicket($access_token){
$ticketUrl = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='.$access_token.'&type=jsapi';
$ticketResp = file_get_contents($ticketUrl);
if(!$ticketResp){ $this->_error('ticket 获取失败');}
$ticketData = json_decode($ticketResp, true);
if( isset($ticketData['ticket']) ){
$ticket = $ticketData['ticket'];
Cache::set('wx_share_ticket',$ticket,7200);
Log::record('测试日志信息'.$ticket);
return $ticket;
}else{
$this->_error('ticket 解析错误');
}
}
//获取微信公众号 token
private function getWxAccessToken(){
$wx_info['cusid']='12345679';
$wx_info['cussec']='64535243252354254253252532525';
$tokeUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$wx_info['cusid']."&secret=".$wx_info['cussec'];
$tokenResp = file_get_contents($tokeUrl);
if(!$tokenResp){
$this->_error('token 服务器返回失败');
die;
}
$tokenData = json_decode($tokenResp, true);
if( !isset($tokenData['access_token']) ){
$this->_error($tokenData['errmsg']);
die;
}
return $tokenData['access_token'];
}
//生成随机16个字符的字符串
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;
}
// 成功返回封装 json格式的数据给前端
protected function _success ($data=null, $info='操作成功', $status=1000)
{
$result = array(
'status' => $status,
'msg' => $info,
'data' => $data,
);
die( json_encode($result) );
}
// 失败返回封装 json格式的数据给前端
protected function _error ($info='系统错误', $status=-1004)
{
$result = array(
'status' => $status,
'msg' => $info,
);
die( json_encode($result) );
}
3.前端代码:
<!--<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>-->
<script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
var domain = "http://www.baidu.cpm"; // 域名
var curUrl = window.location.href;
//微信设置
var shareLink = curUrl;
var shareIcon = domain+"/8080.png";
var shareDesc = "微信分享内容摘要";
console.log(shareLink)
// ajax请求后台接口,获取微信签名
$.ajax({
url: domain+"/home/getWxShareSign",
data:{
url: curUrl
},
type: 'POST',
dataType: 'json',
success: function (res) {
if(res.status===1000){
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.data.appId, // 必填,换成你公众号里的appid
timestamp: res.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.sign,// 必填,签名
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填,需要使用的JS接口列表
});
}else{
console.log(res.msg);
}
},
error: function (e) {
console.log(e);
}
});
wx.ready(function(){
wx.onMenuShareAppMessage({
title: '微信分享标题文字', // 分享标题
desc: shareDesc, // 分享描述
link: shareLink, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl:shareIcon, // 分享图标
success: function () {
// 用户点击了分享后执行的回调函数
console.log('用户点击了分享');
}
});
});
wx.error(function(res){
console.log('wx jsapi fail');
});
</script>
亲测是可以的,刚开始一直报错
63002 | 无效的签名 |
换了下签名方式
官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62