微信开发之JS-SDK + php 实现分享朋友/朋友圈，QQ/QQ空间

一、绑定域名

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

二、引入JS文件

http://res2.wx.qq.com/open/js/jweixin-1.6.0.js

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

把需要用到的JS-SDK的接口都放在jsApiList里面

四、示例代码

前端

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>微信分享</title>
        <script type="text/javascript" src="/static/index/js/jquery.js"></script>
        <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    </head>
    <body>
        
        <script type="text/javascript" charset="utf-8">
        wx.config({
            debug: false,
            appId: '{$signPackage.appId}',
            timestamp: {$signPackage.timestamp},
            nonceStr: '{$signPackage.nonceStr}',
            signature: '{$signPackage.signature}',
            jsApiList: [
              // 所有要调用的 API 都要加到这个列表中
              'updateAppMessageShareData', 'updateTimelineShareData'
            ]
          });
          
          // 在这里调用 API
        wx.ready(function () {
            // 分享朋友及qq
            wx.updateAppMessageShareData({ 
                title: '测试分享标题', // 分享标题
                desc: '分享描述', // 分享描述
                link: 'http://test.zizhuyou.site/index/Plantocr/index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://test.zizhuyou.site/static/index/images/dog.png', // 分享图标
                success: function () {
                  // 设置成功
                  console.log('设置成功');
                  //alert('分享朋友或QQ成功');
                },
                
            });
            
            // 分享朋友圈及QQ空间
            wx.updateTimelineShareData({ 
                title: '测试分享标题', // 分享标题
                link: 'http://test.zizhuyou.site/index/Plantocr/index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://test.zizhuyou.site/static/index/images/dog.png', // 分享图标
                success: function () {
                  // 设置成功
                  //alert('分享朋友圈及QQ空间成功');
                }
            })
        })
        </script>
    </body>
</html>

后端

<?php
namespace app\index\controller;
use think\Controller;
use app\index\controller\Wechat;

/**
 * 微信功能开发
 */
class Wxopera extends Wechat
{

    /**
     * 微信分享
     */
    public function share(){
        $signPackage = json_decode($this->getSignPackage(),true);
    
        $this->assign('signPackage',$signPackage);
        return $this->fetch();
    }
    
    /**
     * 生成签名
     */
    public function getSignPackage() 
    {

        // 实例化微信操作类
        $wx = new Wechat();

        // 获取 ticket
        $jsapiTicket = $wx->getJsApiTicket();

        // 注意 URL 一定要动态获取，不能 hardcode.
        $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
        // 当前页面的url
        $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";
        // 对string进行sha1加密
        $signature = sha1($string);

        $signPackage = array(
          "appId"     => $wx->APPID,
          "nonceStr"  => $nonceStr,
          "timestamp" => $timestamp,
          "signature" => $signature
        );
        return json_encode($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;
    }

}

注意：Wechat类是我自己封装的，比如获取access_token,ticket,curl请求这些，代码可以看上一篇文字 微信开发之生成二维码，扫码关注公众号PHP

 

思路说明：

1.公众号配置：JS安全域名、IP白名单

2.获取AccessToken，需要判断过期时间

3.获取JsApiTicket，拿获取到的AccessToken换取JsApiTicket，需要判断过期时间

4.生成签名，需要jsapiTicket+随机字符串+时间戳+当前URL 组合并sha1加密

5.组合微信JSAPI需要的参数：appId、随机字符串、时间戳、签名

posted @ 2020-04-22 09:18  下页、再停留  阅读(572)  评论(0)  编辑  收藏  举报