微信实现自定义分享功能

布满荆棘的人生 2022-05-19 04:58 267阅读 0赞

今天小编写微信分享接口。上网查了下，代码很多，但都不是很全！所以，小编特地真理了下.....

0、效果

![70][]

1、有一个**认证过**的微信公众号。

2、把你要分享的网站IP地址加入微信白名单。

![70 1][]

![70 2][]

需要把网站域名加入js接口   目的是为了能调用微信的js

![70 3][]

3、获取AppID  AppSecret 俩个参数

4、后台接口写法：

**  使用TP 框架的写法：**

public function wx\_get\_token() \{  
          $token = S('access\_token');  
          if (!$token) \{  
              $appid='XXXXX';  // 你自己的微信appid  
              $appsecret='XXXXXX';  //你自己的微信appsecret  
              $res = file\_get\_contents('https://api.weixin.qq.com/cgi-bin/token?grant\_type=client\_credential&appid='.$appid.'&secret='.$appsecret);  
              $res = json\_decode($res, true);  
              $token = $res\['access\_token'\];  
              // 注意：这里需要将获取到的token缓存起来（或写到数据库中）  
              // 不能频繁的访问https://api.weixin.qq.com/cgi-bin/token，每日有次数限制  
              // 通过此接口返回的token的有效期目前为2小时。令牌失效后，JS-SDK也就不能用了。  
              // 因此，这里将token值缓存1小时，比2小时小。缓存失效后，再从接口获取新的token，这样  
              // 就可以避免token失效。  
              // S()是ThinkPhp的缓存函数，如果使用的是不ThinkPhp框架，可以使用你的缓存函数，或使用数据库来保存。  
              S('access\_token', $token, 3600);  
          \}  
          return $token;  
     \}

//获取ticket  
      function wx\_get\_jsapi\_ticket()\{  
                $ticket = "";  
                do\{  
                    $ticket = S('wx\_ticket');  
                    if (!empty($ticket)) \{  
                        break;  
                    \}  
                    $token = S('access\_token');  
                    if (empty($token))\{  
                         $this->wx\_get\_token();  
                    \}  
                    $token = S('access\_token');  
                    if (empty($token)) \{  
                        //logErr("get access token error.");  
                        break;  
                    \}  
                    $url2 = sprintf("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access\_token=%s&type=jsapi",  
                        $token);  
                    $res = file\_get\_contents($url2);  
                    $res = json\_decode($res, true);  
                    $ticket = $res\['ticket'\];  
                    // 注意：这里需要将获取到的ticket缓存起来（或写到数据库中）  
                    // ticket和token一样，不能频繁的访问接口来获取，在每次获取后，我们把它保存起来。  
                    S('wx\_ticket', $ticket, 3600);  
                \}while(0);  
                return $ticket;  
      \}  
//获取16位随机编码  
          function getRandCode( $length = 16 ) \{  
           $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';  
           $tmpstr ='';  
              for ( $i = 0; $i < $length; $i++ )  
              \{  
              // 这里提供两种字符获取方式  
              // 第一种是使用 substr 截取$chars中的任意一位字符；  
              // 第二种是取字符数组 $chars 的任意元素  
              // $password .= substr($chars, mt\_rand(0, strlen($chars) – 1), 1);  
                  $tmpstr .= $chars\[ mt\_rand(0, strlen($chars) - 1) \];  
              \}  
           return $tmpstr;  
          \}

public function index()\{  
          $ticket = $this-> wx\_get\_jsapi\_ticket();  
          $timestamp =time();  
          $nonceStr = $this->getRandCode();  
          $url =  'http://'.$\_SERVER\['HTTP\_HOST'\].$\_SERVER\['REQUEST\_URI'\]; // url  最好是动态获取     
          //按照微信的要求排序拼接组合  
          $signature = sprintf("jsapi\_ticket=%s&noncestr=%s&timestamp=%s&url=%s",$ticket, $nonceStr, $timestamp, $url);  
          // echo  $signature."<br />";    
          $signature= sha1($signature);  // $signature  这就是微信签名     
          $this->assign('timestamp',$timestamp);  
          $this->assign('noncestr',$nonceStr);  
          $this->assign('signature',$signature);  
          $this->display('Bqqy/index');  
        \}

5、前台的 html 页面

第2步加入js接口  目的就是这个 ：引入微信js  <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"> </script>  
<script>  
  wx.config(\{  
    debug: false,  // 调试的bug的  
    appId: "XXXXX",  
    timestamp: '\{$timestamp\}',  
    nonceStr: '\{$noncestr\}',  
    signature: '\{$signature\}',  
    jsApiList: \['onMenuShareTimeline', 'onMenuShareAppMessage'\] // 功能列表，我们要使用JS-SDK的什么功能  
\});  
    wx.ready(function()\{  
            // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口  
    wx.onMenuShareTimeline(\{  
        title: 'XXXXX ', // 分享标题  
        link: "XXXXX",     //分享的url,以http或https开头  
        imgUrl: "XXXXX",           // 分享图标  
    \});  
    // 获取“分享给朋友”按钮点击状态及自定义分享内容接口  
    wx.onMenuShareAppMessage(\{  
         title: 'XXXXX ', // 分享标题  
        desc: "XXXXX ", // 分享描述  
         link: "XXXXX",     //分享的url,以http或https开头  
        imgUrl: "XXXXX",           // 分享图标  
        type: 'link',             // 分享类型,music、video或link，不填默认为link  
    \});  
\});  
    wx.error(function (res) \{  
       alert(res.errMsg);//错误提示  
    \});  
</script>

6、一些错误的检查、修改

如何提示 ： invalid signature  // 签名失效

(1)确认签名算法正确，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。

(2)确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。

(3)确认url是页面完整的url(请在当前页面alert(location.href.split('\#')\[0\])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'\#'hash后面的部分。

(4)确认 config 中的 appid 与用来获取 jsapi\_ticket 的 appid 一致。

(5)确保一定缓存access\_token和jsapi\_ticket。

(6)确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'\#'hash部分的链接（可用location.href.split('\#')\[0\]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

7、再有错误，具体在细说了......

[70]: /images/20220519/9f8eed2ad7a74419a5900a175a1a1973.png
[70 1]: /images/20220519/e604cce70f174bd38764fff14b941e5d.png
[70 2]: /images/20220519/06ef08e0d7ca4134a96ffe900af3271c.png
[70 3]: /images/20220519/2f3ceaf3dc784ac691c6b9b02787551b.png