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

微信分享网页的时候，希望分享出来的链接是标题+描述+缩略图，微信开发代码示例里已提供了方法，但只适用于动态页面。我使用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中静态页面实现微信分享功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！