[JavaScript知识库]微信公众号实现带图卡片分享链接

?环境:PHP TP5框架

后端代码:

    /**
     * 使用json给前端返回必要的微信JS-SDK数据
     * @return \think\response\Json
     */
    public function get_js_api_data()
    {
        //获取微信accesstoken 此处不做赘述
        $AccessToken = WechatService::getAccessToken();
        //生成一个随机字符串 传给前段用
        $nonceStr = substr(md5(time()), '0', '16');
        //生成一个时间戳 传给前端用
        $timestamp = time();
        //自己公众号的appid
        $appid = 'wx694*******a2b';
        //从前端接收到的调用接口页面的完整URL
        $verify_url = urldecode(input('url'));
        //获取js_ticket 此处不做赘述
        $js_ticket = $this->get_js_ticket($AccessToken);
        //拼接字符串加密
        $s_str = "jsapi_ticket=" . $js_ticket . "&noncestr=" . $nonceStr . "&timestamp=" . $timestamp . "&url=" . $verify_url;
        //直接使用sh1加密
        $signature = sha1($s_str);
        //打包成json数组
        $ret_arr = [
            'appId' => $appid,
            'nonceStr' => $nonceStr,
            'signature' => $signature,
            'timestamp' => $timestamp,
            'share_url' => 'http://*******.*********/index/index/index',
        ];
        return json($ret_arr);
    }

前端代码:

头部引入微信的js包

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

<script>
    $(function () {
        //对当前页面的url进行编码
        var Url = encodeURIComponent(location.href.split('#')[0]);
        //这几个参数都是后台从微信公众平台获取到的
        var nonceStr, signature, timestamp, appId, shareUrl;
        $.ajax({
            //后台获取参数接口
            url: "http://*******.*********/index/share_test/get_js_api_data",
            type: 'POST',
            //将当前页面的url传到后台
            data: {
                url: Url,
            },
            success: function (data) {
                //得到参数
                var appId = data.appId;
                var nonceStr = data.nonceStr;
                var signature = data.signature;
                var timestamp = data.timestamp;
                var shareUrl = data.share_url;
                //通过微信config接口注入配置
                wx.config({
                    debug: true, // 默认为false  为true的时候是调试模式，会打印出日志
                    appId: appId,
                    timestamp: timestamp,
                    nonceStr: nonceStr,
                    signature: signature,
                    jsApiList: [
                        'checkJsApi',
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareWeibo'
                    ]
                });
                //配置自定义分享内容
                window.share_config = {
                    'share': {
                        'imgUrl': 'http://*******.*********/h5/static/1637812.759501/img/LicensePlateQuery1.8bb7f30a.png', // 这里是需要展示的图标
                        'desc': '120秒，48项天赋解析，90分钟专家咨询解读，深度剖析您的天赋人生。成为测测科技合伙人，尊享至多11项专属超值礼遇。', // 这是分享展示的摘要
                        'title': '90%的人都认可测测科技天赋智能测评|合伙人现正招募中', // 这是分享展示卡片的标题
                        'link': shareUrl, // 这里是分享的网址
                        'success': function (rr) {
                            //console.log('成功' + JSON.stringify(rr))
                        },
                        'cancel': function (tt) {
                            //console.log('失败' + JSON.stringify(tt));
                        }
                    }
                };
                wx.ready(function () {
                    wx.onMenuShareAppMessage(share_config.share); // 微信好友
                    wx.onMenuShareTimeline(share_config.share); // 微信朋友圈
                    wx.onMenuShareQQ(share_config.share); // QQ
                });

            },
            error: function (err) {

            },
        });

    })
</script>

完成

?