JS中静态页面实现微信分享功能

所属分类: 网络编程 / JavaScript 阅读数: 1667
收藏 0 赞 0 分享

微信分享网页的时候,希望分享出来的链接是标题+描述+缩略图,微信开发代码示例里已提供了方法,但只适用于动态页面。我使用phpcms把页面生成了静态文件,示例代码就起不到作用了。在网上找了下,有大神使用ajax实现静态页面也能实现微信分享功能,在这里分享给大家。

前台代码:

<script src="https://zhanzhang360.qulang.net/imgupload/000939/jweixin-1.0.0.js"></script> 
<script> 
url=location.href; 
 $.ajax({ 
 type : "get", 
 url : "http://xxxxxxxxx/jssdk.php?url="+url,//替换网址,xxx根据自己jssdk文件位置修改 
 dataType : "jsonp", 
 jsonp: "callback", 
 jsonpCallback:"success_jsonpCallback", 
 success : function(data){ 
  wx.config({ 
appId: data.appId, 
timestamp: data.timestamp, 
nonceStr: data.nonceStr, 
signature: data.signature, 
jsApiList: [ 
  "onMenuShareTimeline", //分享给好友 
  "onMenuShareAppMessage", //分享到朋友圈 
  "onMenuShareQQ", //分享到QQ 
  "onMenuShareWeibo" //分享到微博 
] 
}); 
}, 
    error:function(data){ 
     alert("连接失败!"); 
    } 
}); 
 wx.ready(function (){ 
 var shareData = { 
 title: '标题', 
 desc: '简介',//这里请特别注意是要去除html 
 link: '链接', 
 imgUrl: '题图' 
 }; 
 wx.onMenuShareAppMessage(shareData); 
 wx.onMenuShareTimeline(shareData); 
 wx.onMenuShareQQ(shareData); 
 wx.onMenuShareWeibo(shareData); 
 }); 
</script> 

记得把jquery的库也加上去,否则ajax不会运行

修改服务端文件jssdk.PHP

<?php 
$url = $_GET['url']; 
class JSSDK { 
 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 = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; 
$url =$this->url; 
 $timestamp = time(); 
 $nonceStr = $this->createNonceStr(); 
 // 这里参数的顺序要按照 key 值 ASCII 码升序排序 
 $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$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->httpGet($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; 
 } 
 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 JSSDK("公众号ID", "公众号密钥",$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; 
?> 

其它的按照动态页面设置即可。

以上所述是小编给大家介绍的JS中静态页面实现微信分享功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

更多精彩内容其他人还在看

Canvas实现放射线动画效果

本文主要分享了Canvas实现放射线动画的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
收藏 0 赞 0 分享

微信小程序 image组件binderror使用例子与js中的onerror区别

这篇文章主要介绍了微信小程序 image组件binderror使用例子与js中的onerror区别的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

原生js轮播(仿慕课网)

本文主要分享了原生js实现仿慕课网的轮播效果。具有很好的参考价值,下面跟着小编一起来看下吧
收藏 0 赞 0 分享

Bootstrap table简单使用总结

这篇文章主要为大家总结了Bootstrap table的简单使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

微信小程序之MaterialDesign--input组件详解

本篇文章主要介绍了微信小程序之MaterialDesign--input组件详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
收藏 0 赞 0 分享

浅析javaScript中的浅拷贝和深拷贝

本篇文章主要介绍了浅析javaScript中的浅拷贝和深拷贝,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

js时间戳和c#时间戳互转方法(推荐)

下面小编就为大家带来一篇js时间戳和c#时间戳互转方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Bootstrap模态框使用详解

这篇文章主要为大家详细介绍了Bootstrap模态框的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Jil,高效的json序列化和反序列化库

下面小编就为大家带来一篇Jil,高效的json序列化和反序列化库。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

BootStrap实现带关闭按钮功能

这篇文章主要介绍了BootStrap实现带关闭按钮功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多