微信踩坑之公众号H5自定义分享样式

首先确定公众号有分享接口权限

在公众号设置->功能设置->JS接口安全域名 添加域名信息

在服务器端获取access_token和jsapi_ticket,保存这两个值,避免多次请求微信服务器获取,微信每天有获取次数限制

class JSSDK {
    private $appId;
    private $appSecret;

    public function __construct($appId, $appSecret) {
      $this->appId = $appId;
      $this->appSecret = $appSecret;
    }

    public function getSignPackage() {
      $jsapiTicket = $this->getJsApiTicket();
      $url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
      $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 = "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;
    }
}

HTML文件中引入微信JSSDK,JS中调用SDK

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
    // 微信分享
    var sign_package = {$sign_package};// 后端传递参数
    console.log(sign_package.data);
    if (sign_package.code === 0) {
        wx.config({
            debug: false,
            appId: sign_package.data.appId,
            timestamp: sign_package.data.timestamp,
            nonceStr: sign_package.data.nonceStr,
            signature: sign_package.data.signature,

            jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline']
        });

        wx.ready(function() {
            wx.onMenuShareAppMessage({
                title: '标题', // 分享标题
                desc: '详情', // 分享描述
                link: sign_package.data.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: '', // 分享图标
                type: 'link', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
// 用户点击了分享后执行的回调函数
                }
            });
            wx.onMenuShareTimeline({
                title: '标题', // 分享标题
                link: sign_package.data.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: '', // 分享图标
                success: function () {
                    // 用户点击了分享后执行的回调函数
                }
            });
            // 微信分享新接口,但调用无作用,使用老方法效果正常
//            wx.updateAppMessageShareData({
//                title: '标题', // 分享标题
//                desc: '详情', // 分享描述
//                link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
//                imgUrl: '', // 分享图标
//                success: function () {
//                    // 设置成功
//                }
//            });
//            wx.updateTimelineShareData({
//                title: '标题', // 分享标题
//                link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
//                imgUrl: '', // 分享图标
//                success: function () {
//                    // 设置成功
//                }
//            });
        });
    }
</script>

坑就来了!

微信官方文档说原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即将废弃。请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、updateTimelineShareData 接口。

但是!

用updateAppMessageShareData怎么都达不到效果,一步步好不容易config不报错了,但是没效果岂不是白做?

然后就试所谓即将弃用的方法onMenuShareAppMessage,然后发现达到了效果,所谓的新方法完全不起作用!这算是官方的坑吗!?

所以就用他即将弃用的方法,新方法也保存,哪天发现即将废弃的方法没用了再打开新方法的注释就好了~