首页 > 编程 > JavaScript > 正文

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

2019-11-19 17:42:30
字体:
来源:转载
供稿:网友

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

前台代码:

<script src="http://res.wx.qq.com/open/js/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中静态页面实现微信分享功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表