微信JSSDK自定义分享朋友圈，附源码

phpcoder_echo 2017-06-05

展开全文

本篇文章你能学到：利用微信JSSDK在网页上完成自定义分享朋友圈功能，学会分享功能后，其他网页调用微信接口功能也是一样的套路。

上代码

100

<?php

//获取微信access_token

function getaccess_token(){

//appid与appsecret改成你自己的

$appid = '自己的appid';

$appsecret = '自己的appsecret';

$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$appsecret}";

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL,$url);

curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER,0);

$data = curl_exec($ch);

curl_close($ch);

$data = json_decode($data,true);

return $data['access_token'];

}

//获取jsapi_ticket

function getjsapi_ticket(){

$access_token = getaccess_token();

$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token={$access_token}";

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL,$url);

curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER,0);

$data = curl_exec($ch);

curl_close($ch);

$data = json_decode($data,true);

return $data['ticket'];

}

//默认生成16位随机数

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;

}

//获取要排序的signature相关代码

function getSignPackage() {

$jsapiTicket = getjsapi_ticket();

$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";

$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

$timestamp = time();

$nonceStr = createNonceStr();

// 这里参数的顺序要按照 key 值 ASCII 码升序排序

$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";

$signature = sha1($string);

$signPackage = array(

"appId" => '自己的appid',

"nonceStr" => $nonceStr,

"timestamp" => $timestamp,

"url" => $url,

"signature" => $signature

);

return $signPackage;

}

$signPackage = getSignPackage();

?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>微信自定义分享</title>

</head>

<body>

</body>

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script>

wx.config({

debug: true,

appId: '<?php echo $signPackage["appId"];?>',

timestamp: <?php echo $signPackage["timestamp"];?>,

nonceStr: '<?php echo $signPackage["nonceStr"];?>',

signature: '<?php echo $signPackage["signature"];?>',

jsApiList: [

// 所有要调用的 API 都要加到这个列表中

'onMenuShareTimeline',

'chooseImage'

]

});

wx.ready(function () {

wx.onMenuShareTimeline({

title: '王文晓博客',

link: 'http://www./',

imgUrl: 'http://www./uploads/allimg/160523/1-1605231F015352.jpg',

success: function (res) {

alert('已分享');

},

cancel: function (res) {

alert('已取消');

},

fail: function (res) {

alert(JSON.stringify(res));

}

})

});

</script>

</html>

怎样使用本代码

1、绑定域名。进入mp.weixin.qq.com
菜单里找到公众号设置

功能设置里找到JS接口安全域名

设置js接口域名为自己要分享的域名
2、新建jssdk.php，把上面的代码复制进去。5、6、51行换成自己公众号的appid与appsecret
3、在微信端访问此文件。（页面是空白的）点击分享到朋友圈即可看到85-87行定义的微信分享朋友圈功能，如下图

标题与图片都是上面代码设置的

注意

1、分享朋友圈功能只能允许认证的公众号使用（我之前一直错误找不出原因，原来是我的号没认证。。。大家小心）
2、分享的域名必须备案

JSSDK分享朋友圈大体流程

1、把noncestr（一个自己定义随机的字符串）、jsapi_ticket（调用js接口要用）、timestamp（时间戳）、url（当前网址）根据微信规定的算法生成一个signature。
2、把noncestr、jsapi_ticket、timestamp、url、signature一起发到微信的js接口中。微信服务器根据相同的算法检验signature与你算的是不是相等、以及其他检测（如域名是否与接口域名相同）。
3、相等则可以使用微信JS提供的相关功能。

JSSDK分享朋友圈代码详解

1、71-75行是微信js接口配置。
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名。生成方式为把前面几行定义的noncestr、获取的jsapi_ticket、timestamp、url以腾讯规定方式生成，规定的方式为代码48-49行。
jsApiList: [] // 必填，需要使用的JS接口列表，咱们填写的onMenuShareTimeline为分享朋友圈，下面的chooseimage是我测试的另一个功能，现在可以忽略
42-43是动态获取要当前的url
函数getjsapi_ticket根据微信提供的接口获取jsapi_ticket
函数createNonceStr是获取16位的随机数
函数getaccess_token是获取微信公众号的access_token
83-98行是放要用到的js功能。我放的就是自定义的朋友圈分享功能。
success：接口调用成功时执行的回调函数。
cancel：用户点击取消时的回调函数，。
fail：失败时会执行其中的代码