微信内嵌网页右上角分享功能开发及自定义

内嵌在微信中的网页，右上角都会有一个默认的分享功能。如下图所示，第一个为自定义的效果，第二个为默认的效果。实现了自定义的分享链接是不是更让人有点击的欲望？下面讲解下开发的过程。

一：准备js 接口安全域名

这需要使用微信的jssdk，先需要在微信公众号后台进行设置：公众号设置-->功能设置-->JS接口安全域名。

二：前端配置

首先引入jssdk 的js 文件

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

前端配置：

wx.config({  
     debug: true,//调试模式  
    appId: '<?php echo $signPackage["appId"];?>', 
    timestamp: <?php echo $signPackage["timestamp"];?>,//生成签名的时间戳  
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',//生成签名的随机串  
    signature: '<?php echo $signPackage["signature"];?>',  
    jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline']// 所有要调用的 API 都要加到这个列表中  
  });  
         wx.ready(function() {   
            wx.onMenuShareAppMessage({ //分享给朋友  
                title: '体验更有温度的日本', // 分享标题,可在控制器端传递  
                desc: '非常舒适的旅途',//分享的描述，可在控制器端传递  
                    
                link: 'URL', // 分享链接，可在控制器端传递   
                imgUrl: 'URL', // 分享图标 ，可在控制器端传递  
                success: function() {   
                    // 用户确认分享后执行的回调函数   
                },   
                cancel: function() {   
                    // 用户取消分享后执行的回调函数   
                }   
            });   
  
            wx.onMenuShareTimeline({ //分享到朋友圈  
                title: '体验更有温度的日本',   
                desc: '分享的描述',  
                  
                link: 'url', // 分享链接   
                imgUrl: 'url', // 分享图标   
                success: function() {   
                    // 用户确认分享后执行的回调函数   
                },   
                cancel: function() {   
                    // 用户取消分享后执行的回调函数   
                }   
            });   
        });

后端代码：

class JSSDK
{
  private $appId;
  private $appSecret;
  public function __construct($appId, $appSecret, $url)
  {
    $this->appId = $appId;
    $this->appSecret = $appSecret;
    $this->url = $url;
  }
  public function getSignPackage()
  {
    $jsapiTicket = $this->getJsApiTicket();
    // $url = "http://$_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";
    $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 = "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 = "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($appid, $appsecret, $GLOBALS['link']);
$signPackage = $jssdk->GetSignPackage();
// $this->assign('signPackage', $signPackage);
echo json_encode($signPackage);