微信JSSDK进行朋友圈自定义标题、描述、图片、链接分享

阿酒在看云

已于 2022-04-02 17:28:17 修改

阅读量5.8k

点赞数

文章标签： jssdk

于 2019-03-13 17:48:11 首次发布

本文链接：https://blog.csdn.net/weixin_34727238/article/details/88534793

版权

概述

微信JSSDK是什么？

微信的jssdk是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信的jssdk，网页开发者可以借助微信高效的使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更加优质的网页体验。

JSSDK使用步骤

1、绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里面填写“JS接口安全域名”。

备注：个人微信公众号和企业服务号的接口权限是不同的，所以“开发者中心”可以进行对应的接口权限查看。

我在域名绑定中遇到的一些问题

域名的格式问题，域名的格式按照官方给定的所设置，值得注意的是域名下的路径才是拥有权限的路径
绑定域名的时候要加微信官方指定的文档到服务器中，并确定可以访问到

2、引入js文件

在需要调用JS接口的页面引入如下的js文件（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js

这个js文件必须是可以访问到的

js文件最好在要用到的页面中都进行引用

3、通过config接口注入权限验证配置

所有需要使用jssdk的页面必须注入配置信息，否则将无法调用

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

这里最重要的就是正确计算签名，签名算法微信官方也有说，用php进行签名算法的完成，以下代码是

jssdk.php（这个代码主要就是进行签名的获取，获取签名之后才可以吧wx.config中的参数正确获得，才能拥有相对应的jssdk权限）

<?php
class JSSDK {
  private $appId;
  private $appSecret;

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

  public function getSignPackage($signUrl = null) {
    $jsapiTicket = $this->getJsApiTicket();

    if ($signUrl) {
      $url = $signUrl;
    } else {
      $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
      $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
    }

    $timestamp = time();
    $nonceStr = $this->createNonceStr();

    // 这里参数的顺序要按照 key 值 ASCII 码升序排序
    $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("./cache/jsapi_ticket.json"));
    if ($data->expire_time < time()) {
      $accessToken = $this->getAccessToken();
      // 如果是企业号用以下 URL 获取 ticket，但是具体操作中，企业号的url使用下面的也不是不可以
      // $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("./cache/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("./cache/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("./cache/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;

  }
}

除此之外要创建一个文件夹cache，在文件夹中放三个文件，后两个文件用在jssdk.php代码之中用于存储值使用，第一个文件内容为deny from all（安全性设置）

以上代码是在GitHub上面下载的，忘记了原出处了，经过测试以后是确定可用的，在进行jssdk.php的编写之后，下一步便是进行编写前端页面，即编写要使用jssdk的页面。

备注：你的服务器必须是支持php的，将html代码写在php代码之中，下面是我的php代码：

index.php

<?php

require_once './jssdk.php';

$jssdk = new JSSDK('你的appid', '你的appsecret');
//上面是专用的，根据自己的微信公众平台的具体情况进行填写
$wxconfig = $jssdk->getSignPackage();

?>

只有上面这些属于php代码剩下的就是html中的代码了，注意要把微信官方提供的相关jssdk调用加入js中。

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

  <script>
    wx.config({
      appId: '<?php echo $wxconfig['appId'];?>',
      timestamp: '<?php echo $wxconfig['timestamp'];?>',
      nonceStr: '<?php echo $wxconfig['nonceStr'];?>',
      signature: '<?php echo $wxconfig['signature'];?>',
      jsApiList: [
//这里是自定义的使用的接口，注意，这些接口唯有在公众号具有相应权限的时候才可以调用成功，在这里我调用了五个接口

        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'updateAppMessageShareData'
  
      ]
    });

    wx.ready(function() {
      
      var shareTitle = '你想分享的标题';
      var shareDesc = '你想分享的描述';
      var shareLink = 'http://（你想链接到的网址）';
      var shareImg = 'http://（你想分享的图片））';

      wx.updateAppMessageShareData({
        title: shareTitle,
        desc: shareDesc,
        link: shareLink,
        imgUrl: shareImg,
        success: function () {
          // 设置成功
        }
      });
      
      
      // 分享给朋友事件绑定
      wx.onMenuShareAppMessage({
        title: shareTitle,
        desc: shareDesc,
        link: shareLink,
        imgUrl: shareImg
      });

      // 分享到朋友圈
      wx.onMenuShareTimeline({
        title: shareTitle,
        link: shareLink,
        imgUrl: shareImg
      });

      // 分享到QQ
      wx.onMenuShareQQ({
        title: shareTitle,
        desc: shareDesc,
        link: shareLink,
        imgUrl: shareImg
      });

      // 分享到微博
      wx.onMenuShareWeibo({
        title: shareTitle,
        desc: shareDesc,
        link: shareLink,
        imgUrl: shareImg
      });
    });
  </script>

将这些设置好之后，就可以将代码放到服务器中进行调试了，我的调试结果如下：

这个实现虽然看似简单，但是当时花费不少时间，在微信开发者工具中进行调试时经常遇到的问题就是：

1.无效的签名 invalid signature

无效的签名很有可能和分享链接有关系，无效签名会使权限获取失败，因此jssdk的接口都无法调用；也有可能和签名算法有关系。

解决方法：

进行路径检查，将微信公众号中的js接口及其路径设置正确。查看自己的appid和appsecret两个参数是否填写正确；
上面代码中“你想链接到的网址”这个网址必须是在允许范围内的，在js的安全域名的路径之下的网址；
检查签名算法，在官方给的签名校验工具中对获取的签名进行校验。

2.无效的url地址 invalid url domain

无效的地址有两个原因：

分享的链接没有在js安全域名之内
当前页面没有在js的安全域名内，故而无法获取签名，自然也不能获取其他权限。

备注：在真机调试的时候与在微信开发者工具调试还出现微信开发者工具签名获取正确但真机失败的情况，这大多和分享的url链接有关系，我的解决方案是在不能进行图文自定义分享时分享出的那个链接设置为当前的分享链接（这个链接比原来的那个路径多了几个字母的字节），重新设置之后手机上就可以自定义分享了。到现在还是不太明白为什么会这样，但是至少实现了自定义的分享功能，达成初始目标。

阿酒在看云

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
微信JSSDK进行朋友圈自定义标题、描述、图片、链接分享

概述微信JSSDK是什么？微信的jssdk是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信的jssdk，网页开发者可以借助微信高效的使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更加优质的网页体验。JSSDK使用步骤1、绑定域名登录微信公众平台进入“公众号设置”的“功能设置”...
复制链接

扫一扫