ThinkPHP之H5网页在微信中分享到好友及朋友圈
PHP页面
use GuzzleHttp\Client;
use think\Cache;
protected $appid = 'appid';
protected $secret = 'secret';
// 获取微信参数
public function getSignPackage(int $article_id = 0)
{
$jsapiTicket = $this->getJsApiTicket();
// 注意 URL 一定要动态获取,不能 hardcode.
$url = request()->domain() . '/index/article/info/id/' . $article_id;
$timestamp = time();
$nonceStr = $this->createNonceStr();
// 这里参数的顺序要按照 key 值 ASCII 码升序排序
$string = 'jsapi_ticket=' . $jsapiTicket . '&noncestr=' . $nonceStr . '×tamp=' . $timestamp . '&url=' . $url . '';
$signature = sha1($string);
$data = [
"appId" => $this->appid,
"nonceStr" => $nonceStr,
"timestamp" => $timestamp,
"url" => $url,
"signature" => $signature,
"rawString" => $string,
"link" => $url,
"imgUrl" => request()->domain() . '/assets/img/share_img.jpg'
];
$this->success('获取成功', null, $data);
}
public function getJson($url = '')
{
$client = new Client();
$response = $client->request('GET', $url);
if ($response->getStatusCode() != 200) {
$this->error('请求失败:' . $response->getBody()->getContents());
} else {
return json_decode($response->getBody()->getContents());
}
}
private function getJsApiTicket()
{
// jsapi_ticket 应该全局存储与更新,以下代码以写入到文件中做示例
$data = Cache::get('jsapi_ticket');
if (!Cache::get('jsapi_ticket')) {
if (Cache::get('access_token')) {
$access_token = Cache::get('access_token');
} else {
$getAccessTokenResponse = self::getJson('https://api.weixin.qq.com/cgi-bin/token?appid=' . $this->appid . '&secret=' . $this->secret . '&grant_type=client_credential');
Cache::set('access_token', $getAccessTokenResponse->access_token, 6000);
$access_token = Cache::get('access_token');
}
$getJsApiTicketResponse = self::getJson('https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=' . $access_token . '');
// print_r($getJsApiTicketResponse);exit;
Cache::set('jsapi_ticket', $getJsApiTicketResponse->ticket, 6000);
}
$jsapi_ticket = Cache::get('jsapi_ticket');
return $jsapi_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;
}
HTML页面
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
$.ajax({
type: "POST",
url: "/Common/getSignPackage",
data: { article_id: $('.article_id').val()},
dataType: "json",
success: function (result) {
if (result.code == 1) {
wx.config({
// 开启调试模式,调用的所有api的返回值会在客户端alert出来,
// 若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
debug: false,
appId: result.data.appId, // 必填,公众号的唯一标识
timestamp: result.data.timestamp, // 必填,生成签名的时间戳
nonceStr: result.data.nonceStr, // 必填,生成签名的随机串
signature: result.data.signature,// 必填,签名
// 必填,需要使用的JS接口列表
jsApiList: [
'showMenuItems',
'updateAppMessageShareData',
'updateTimelineShareData'
]
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.showMenuItems({
menuList: [
'menuItem:addContact',
'menuItem:refresh',
'menuItem:profile',
] // 要显示的菜单项,所有menu项见附录3
});
wx.updateAppMessageShareData({
title: $('.article_title').text(), // 分享标题
desc: '', // 分享描述
// 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
link: result.data.link,
imgUrl: result.data.imgUrl, // 分享图标
success: function () {
// 设置成功
}
});
wx.updateTimelineShareData({
title: $('.article_title').text(), // 分享标题
desc: '', // 分享描述
// 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
link: result.data.link,
imgUrl: result.data.imgUrl, // 分享图标
success: function () {
// 设置成功
}
});
});
} else {
layer.msg(result.msg);
}
// console.log(result);
}
});
</script>