当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS中静态页面实现微信分享功能

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

2019年03月27日  | 移动技术网IT编程  | 我要评论

微信分享网页的时候，希望分享出来的链接是标题+描述+缩略图，微信开发代码示例里已提供了方法，但只适用于动态页面。我使用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中静态页面实现微信分享功能，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网