微信JS-SDK分享接口调用以及解决二次分享失效问题 --- 2020/01/08

微信JS-SDK版本：1.6.0
ThinkPHP：5.0.24
PHP：7.3.4
PS：以下代码均是根据我本身遇到的问题做出的修改，可能不适用与每个人，不过思路都是一样的，通过错误一个个去排查修复最终都能成功。

//微信官方文档
'https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html'
21 附录6 可下载页面 Demo 以及实例代码

1.jssdk文件

首先找到 httpGet 方法
微信Demo里面的方法默认都会给你直接返回 true | false 或者 1 | 0
修改成下面内容，使其返回数据为 Json 格式

private function httpGet($url)
    {
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0);
        curl_setopt($curl, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']);
        curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1);
        curl_setopt($curl, CURLOPT_AUTOREFERER, 1);
        curl_setopt($curl, CURLOPT_POST, 1);
        curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
        curl_setopt($curl, CURLOPT_TIMEOUT, 30);
        curl_setopt($curl, CURLOPT_HEADER, 0);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        $data = json_decode(curl_exec($curl));
        if (curl_errno($curl)) {
            echo 'Errno'.curl_error($curl);
        }
        curl_close($curl);
        return $data;
    }

其次找到 getAccessToken 方法
上面的 httpGet 方法已经将返回值转为 Json 格式，所以这里面的 $res 赋值这块也要记得更改

$res = $this->httpGet($url);
//修改完这个方法可以自行测试一下是否能获取到 access_token

获取完 access_token 接下来就是 ticket
跟上面的一样，将 $res 赋值更改就可以

ticket 也有了，接下来就是将数据打包返回前台了
找到 getSignPackage 方法
因为 $url 要动态获取，而且这步也是解决 二次分享失效 的问题
将 $protocol 与 $url 两个赋值删除，改成下面直接再方法里面填写参数

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

        $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;
    }

最后写个测试用的控制器，创建一个测试接口

public function test()
    {
    	//注意这里的 new Jssdk 遵循ThinkPHP的命名规范
        $jssdk = new Jssdk('你的AppID', '你的AppSecret');
        //因为前端采用 html 静态页面通过 ajax 将 url 传到后台签名
        //这边采用 GET 直接获取 url 并用 urldecode 解码
        $signPackage = $jssdk->getSignPackage(urldecode($_GET['url']));
        return $signPackage;
    }

前端html页面

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
	//这边的 '&' 根据自己实际地址做对应修改
    $url = encodeURI(location.href.split('&')[0]);
    //解决二次分享失效问题，想研究的朋友可以看下二次分享后的链接
    if($url !== window.location.href)
    {
        window.location.href = $url;
    }
    $.ajax({
        type: "GET",
        url: "/你的后台测试接口/test?url=" + $url,
        success: function (data) {
            wx.config({
                debug: false,
                appId: data.appId,
                timestamp: data.timestamp,
                nonceStr: data.nonceStr,
                signature: data.signature,
                jsApiList: [
                    'checkJsApi',//检测接口权限
                    'updateTimelineShareData',//新分享接口
                    'updateAppMessageShareData',//新分享接口
                    'onMenuShareAppMessage',//老版本分享接口
                    'onMenuShareTimeline'//老版本分享接口
                ]
            });
            wx.checkJsApi({
                jsApiList: ['updateTimelineShareData',
                    'updateAppMessageShareData',
                    'onMenuShareAppMessage',
                    'onMenuShareTimeline'
                ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                success: function (res) {
                    // 以键值对的形式返回，可用的api值true，不可用为false
                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                    // alert(JSON.stringify(res));
                },
                error: function (res) {
                    alert(res);
                }

            });
            wx.ready(function () {
                // 分享给朋友/QQ
                wx.updateAppMessageShareData({
                    title: '分享标题', // 分享标题
                    desc: '分享描述', // 分享描述
                    link: $url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: '图标地址', // 分享图标
                    success: function () {
                        // 设置成功
                    }
                });
                // 分享到朋友圈/QQ空间
                wx.updateTimelineShareData({
                    title: '分享标题', // 分享标题
                    link: $url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: '图标地址', // 分享图标
                    success: function () {
                        // 设置成功
                    }
                });
                wx.error(function (res) {
                    alert(res.errMsg);
                });
            });
        },
        error: function () {
            alert("接口请求失败！");
        }
    });
</script>

总结：
1.根据官方文档绑定好域名
2.通过 AppID 跟 AppSecret 去获取 access_token
3.根据获取的 access_token 去获取 ticket
4.将获取到的 ticket 与其他所需数据打包返回给前端
5.前端获取到后台返回的数据，通过 config 接口注入权限验证配置
6.ready 接口处理成功验证，error 接口处理失败验证

萌新的个人记录，如果能帮到你，我也很开心。写的不好还请海涵。

来源：CSDN

作者：AkuHime

链接：https://blog.csdn.net/HimeYui/article/details/103896994