H5纯静态页面分享到微信朋友圈带图片显示

实现H5纯静态页面分享到微信朋友圈带图片显示需要前提条件

1、微信公众号已成功认证

2、微信公众号中添加js安全域名

3、添加ip白名单（服务器外网ip）

HTML代码部分

<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>
<script>
var curl = encodeURIComponent(window.location.href.split('#')[0]);$.ajax({type: "GET",url : "https://XXX.cn/hl_jssdk.php?url=" + curl,//替换网址，xxx根据自己jssdk文件位置修改dataType:'jsonp',success : function(data){console.log(data)wx.config({debug:false,appId: data.appId,timestamp: data.timestamp,nonceStr: data.nonceStr,signature: data.signature,jsApiList: ['checkJsApi','updateAppMessageShareData','updateTimelineShareData']});
},error:function(data){console.log(JSON.stringify(data))}
});wx.ready(function () {
var option_config ={title: '自定义分享的标题',desc: '自定义分享的描述...',link: 'https://xxx.cn/',imgUrl: 'https://xxx.cn/images/share.png',success: function () {},cancel: function () {}};wx.updateTimelineShareData(option_config);wx.updateAppMessageShareData(option_config);
});</script>

hl_jssdk.php代码部分

<?php$url = urldecode($_GET['url']);class HLJSSDK {private $appId;private $appSecret;private $url;public function __construct($appId, $appSecret,$url) {$this->appId = $appId;$this->appSecret = $appSecret;$this->url = $url;}public function getSignPackage() {$jsapiTicket = $this->getJsApiTicket();$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";$url =$this->url;$timestamp = time();$nonceStr = $this->createNonceStr();// 这里参数的顺序要按照 key 值 ASCII 码升序排序$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";$signature = sha1($string);$signPackage = array("appId"     => $this->appId,"nonceStr"  => $nonceStr,"timestamp" => $timestamp,"url"       => $url,"signature" => $signature,"rawString" => $string);return $signPackage;}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;}private function getJsApiTicket() {// jsapi_ticket 应该全局存储与更新，以下代码以写入到文件中做示例$data = json_decode(file_get_contents("jsapi_ticket.json"));if ($data->expire_time < time()) {$accessToken = $this->getAccessToken();// 如果是企业号用以下 URL 获取 ticket// $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";$res = json_decode($this->httpGet($url));$ticket = $res->ticket;if ($ticket) {$data->expire_time = time() + 7000;$data->jsapi_ticket = $ticket;$fp = fopen("jsapi_ticket.json", "w");fwrite($fp, json_encode($data));fclose($fp);}} else {$ticket = $data->jsapi_ticket;}return $ticket;}private function getAccessToken() {// access_token 应该全局存储与更新，以下代码以写入到文件中做示例$data = json_decode(file_get_contents("access_token.json"));if ($data->expire_time < time()) {// 如果是企业号用以下URL获取access_token// $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";$res = json_decode($this->get_from_https($url));$access_token = $res->access_token;if ($access_token) {$data->expire_time = time() + 7000;$data->access_token = $access_token;$fp = fopen("access_token.json", "w");fwrite($fp, json_encode($data));fclose($fp);}} else {$access_token = $data->access_token;}return $access_token;}
//win服务器使用这个private function get_from_https($url) {$data = dfsockopen($url);if(!$data){$data = file_get_contents($url);}return $data;}private function httpGet($url) {$curl = curl_init();curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);curl_setopt($curl, CURLOPT_TIMEOUT, 500);curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);curl_setopt($curl, CURLOPT_URL, $url);$res = curl_exec($curl);curl_close($curl);return $res;}
}$jssdk = new HLJSSDK("wx4565e8c43db82b9d", "0367e1fbdd8a2f1f00e1fdbc4f999990",$url);//按照自己的公众号填写
$signPackage = $jssdk->GetSignPackage();
$tmp=json_encode(array ('appId'=>$signPackage["appId"],'timestamp'=>$signPackage["timestamp"],'nonceStr'=>$signPackage["nonceStr"],'signature'=>$signPackage["signature"],'url'=>$signPackage["url"]));
$callback = $_GET['callback'];echo $callback.'('.$tmp.')';
// exit;
?>

H5纯静态页面分享到微信朋友圈带图片显示相关推荐

uni-app - H5 公众号网页分享到微信朋友圈 / 转发分享给朋友好友 / 分享到手机 QQ / 分享到 QQ 空间，给微信分享卡片设置图标、标题、描述文字等（JS-SDK 通用解决方案放心用）
前言如果您是纯 Vue.js 项目(或 Nuxt.js),请访问 Vue - 最新网页 H5 分享到微信朋友圈 / 转发分享好友这篇详细教程. 目前网上大部分教程都过时了(老版本.无效),并且未对 ...
网页链接分享到微信朋友圈带图标和摘要的完美解决方法
先看效果: 我不喜欢回形针. 以前我仅仅把网页开始的地方放一个不可见的图片,后来发现没有效果. 现在我们开始: 原料:GetwxLink 微信公众号: .步骤一:绑定域名先登录微信公众平台进入&qu ...
服务器静态页面分享微信,JS中静态页面如何实现微信分享功能
JS中静态页面如何实现微信分享功能发布时间:2021-07-06 11:09:02 来源:亿速云阅读:65 作者:小新这篇文章主要介绍了JS中静态页面如何实现微信分享功能,具有一定借鉴价值,感兴 ...
分享课程设计仿电商纯静态页面果冻零食商城
分享课程设计仿电商纯静态页面果冻零食商城一.主要功能: 1.登录注册功能登录注册模块中有分为登录模块和注册模块,通过这两个模块实现进入系统主页面的功能. (1)登录模块登录模块中有帐号输入 ...
把discuzX 的用户登录信息添加到纯静态页面
把discuzX 的用户登录信息添加到纯静态页面转:http://cq6.com/forum.php?mod=viewthread&tid=86560&extra=page%3D1& ...
如何把计算机歌曲传给微信好友,如何将手机本地音乐分享到微信朋友圈分享音乐...
当前,不支持将本地音乐分享到微信朋友圈,但是您可以安装喜马拉雅山,或者在上传后将其分享到微信朋友圈 1.以iPhone为例.首先打开音乐,然后找到要共享的音乐.以我下载的音乐为例,单击歌曲右侧的&qu ...
如何实现分享链接到微信朋友圈时显示自定义LOGO以及名称介绍
当下朋友圈很火,很多企业都将微信朋友圈作为品牌传播的途径,经常会发一些精彩的文章到微信朋友圈供大家自发传播,这样的想法很好,对于优质的内容,网友们也乐于转发与朋友们分享,对品牌宣传与推广确实是有好处的 ...
如何实现分享网站文章到微信朋友圈时显示指定缩略图或LOGO
当下朋友圈很火,很多企业都将微信朋友圈作为品牌传播的途径,经常会发一些精彩的文章到微信朋友圈供大家自发传播,这样的想法很好,对于优质的内容,网友们也乐于转发与朋友们分享,对品牌宣传与推广确实是有好处的 ...
android友盟微信分享到朋友圈,2020年友盟分享到微信朋友圈
2020年友盟分享到微信朋友圈 1.我想要对你说出我要说的最深的话语,我不敢,我怕你取笑 7.真心总是无人喜,偏偏套路撩人心 10.钱可以帮穷人思维的人解决温饱,却可以帮富人思维的人制造财富十七.考 ...
js分享到微信朋友圈、QQ空间、QQ好友、新浪微博、腾讯微博、豆瓣、人人......
各种分享...... <!DOCTYPE html> <html> <head> <title>share</title> <scri ...

H5纯静态页面分享到微信朋友圈带图片显示

HTML代码部分

H5纯静态页面分享到微信朋友圈带图片显示相关推荐

最新文章

热门文章