微信分享，二次分享时缩略图以及标题变形的实际操作

目录

问题描述

我们的app中分享到微信之后，用户从微信打开页面，在QQ浏览器中再次分享给微信好友，朋友圈，QQ和QQ空间时，我们预设的缩略图以及文字的标题会出现，缩略图是一个打不开的图标，分享内容描述也是我的实际url，具体表现形式可以参见下图

造成这种现象的原因，实际上是需要在分享页面中接入微信JS-SDK，官网资料可以查看附录中的微信JS-SDK接入

解决方案

公众号设置参数

通过微信公众号>>设置>>公众号设置>>功能设置

然后设置上域名，这里的域名必须要指定一个微信提供的文件，可以通过域名直接访问到微信的文件，这个文件应该是类似密钥一样的操作

服务器配置

• 我是通过nginx配置的静态文件，直接通过域名就可以访问到文件

• nginx配置如下

location ^~ /MP_verify_5XnUlFECcbSyYJPO.txt {
        expires 30d;
        root /var/wx/;
}

MP_verify_5XnUlFECcbSyYJPO.txt文件被我放在/var/wx/目录下

分享页面中动态添加

通过官网可以看到可以分为几个步骤

1. 在页面中引入微信的js-sdk
2. 在页面中动态获取签名信息
3. 在页面中配置分享不同的渠道的函数

我是用的python tornado框架来处理的，先把我的js部分贴一下

<script src="http://example.cn/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    $(document).ready(function () {
        var url = location.href.split('#')[0];
        $.ajax({
            url: "{{ data['share_data']['req_wx_data'] }}",
            type: "POST",
            async:true,
            data:{'url':url},
            cache: false,
            dataType: "json",
            success: function(data) {
                wx.config({
//                    debug: true,
                    appId: data.app_id,
                    timestamp: data.timestamp,
                    nonceStr: data.nonce_str,
                    signature: data.signature,
                    jsApiList: [
                        'checkJsApi',
                        'onMenuShareTimeline',
                        'hideOptionMenu',
                        'onMenuShareAppMessage'
                    ]
                });
                wx.ready(function () {
                    wx.checkJsApi({
                        jsApiList: [
                            'getLocation',
                            'onMenuShareTimeline',
                            'onMenuShareAppMessage'
                        ],
                        success: function (res) {
                        },
                        error: function (res) {
                        }
                    });
                    // 分享给朋友
                    wx.onMenuShareAppMessage({
                        title: "{{ data['share_data']['share_title'] }}",
                        desc: "{{ data['share_data']['share_content'] }}",
                        // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        link: "{{ data['share_data']['share_url'] }}",
                        imgUrl: "{{ data['share_data']['share_img'] }}",
                        success: function () {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel: function () {
                            // 用户确认分享后执行的回调函数
                        },
                        fail: function (res) {
                            //用户分享失败取消的回调函数
                        }
                    });
                    // 分享到朋友圈
                    wx.onMenuShareTimeline({
                        title: "{{ data['share_data']['share_title'] }}",
                        link: "{{ data['share_data']['share_url'] }}",
                        imgUrl: "{{ data['share_data']['share_img'] }}",
                        success: function () {
                            // 用户确认分享后执行的回调函数

                        }, cancel: function () {
                            // 用户取消分享后执行的回调函数
                        },
                        fail: function (res) {
                            //alert(res.errMsg);
                        }
                    });
                    // 分享到QQ
                    wx.onMenuShareQQ({
                        title: "{{ data['share_data']['share_title'] }}",
                        link: "{{ data['share_data']['share_url'] }}",
                        imgUrl: "{{ data['share_data']['share_img'] }}",
                        desc: "{{ data['share_data']['share_content'] }}",
                        success: function () {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    });
                    // 分享到QQ空间
                    wx.onMenuShareQZone({
                        title: "{{ data['share_data']['share_title'] }}",
                        link: "{{ data['share_data']['share_url'] }}",
                        imgUrl: "{{ data['share_data']['share_img'] }}",
                        desc: "{{ data['share_data']['share_content'] }}",
                        success: function () {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    });
                });
            },
            error: function (data) {
                console.log("request fail !!!!!!");
                return;
            }
        });
    });
</script>

我觉得有两个关键点，第一个是微信相关的签名等信息，我是通过ajax请求过来的，分享出去的标题，封面图等信息，我是通过后台写到页面上的

可以看到，我对于微信需要的部分，通过ajax请求过来之后，放入到wx.config中，对于wx.onMenuShareQZone等实际分享操作，我就是已经从后台传过来写入到页面中的，

onMenuShareQZone这些方法官网上是有这个介绍的，另外微信的签名也是比较简单的，我这里贴一下我使用python3 tornado框架时的一些生成方法，希望可以帮到需要的人

class WXBase(object):
    @classmethod
    async def get_access_token(cls, redis, appid=None, secret=None):
        """
        获取微信access_token
        :param redis:
        :return:
        """
        token_cache_key = "cache:wx:access:token"
        appid = appid or get_system_param(redis, 'wx_appid', 'str', default=settings.WX_APPID)
        secret = secret or get_system_param(redis, 'wx_secret', 'str', default=settings.WX_SECRET)
        access_token = recursive_unicode(redis.get(token_cache_key))
        url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={0}&secret={1}".format(appid,
                                                                                                                 secret)
        if not access_token:
            ahttp_client = AsyncHTTPClient()
            resp = await ahttp_client.fetch(url, method="GET")
            if resp.code == 200:
                # 获取成功
                access_token_info = json_decode(resp.body)
                access_token = access_token_info.get('access_token')
                expires_in = access_token_info.get('expires_in')
                if access_token:
                    redis.set(token_cache_key, access_token)
                    redis.expire(token_cache_key, expires_in - 10)
                else:
                    return "error"
            else:
                return "error"

        return access_token

    @classmethod
    async def get_ticket(cls, redis, access_token=None):
        ticket_cache_key = "cache:wx:access:ticket"
        ticket = recursive_unicode(redis.get(ticket_cache_key))
        if not ticket:
            if not access_token:
                access_token = await cls.get_access_token(redis)
            url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={0}&type=jsapi".format(access_token)

            ahttp_client = AsyncHTTPClient()
            resp = await ahttp_client.fetch(url, method="GET")
            if resp.code == 200:
                # 获取成功
                ticket_info = json_decode(resp.body)
                errcode = str(ticket_info.get("errcode"))
                ticket = ticket_info.get('ticket')
                expires_in = ticket_info.get('expires_in')
                if errcode == '0':
                    redis.set(ticket_cache_key, ticket)
                    redis.expire(ticket_cache_key, expires_in - 10)
                else:
                    return "error"
            else:
                return "error"
        return ticket

    @classmethod
    async def get_signature(cls, redis, url):
        """
        获取签名
        返回签名，随机串，时间戳
        :return:
        """
        timestamp = str(int(time.time()))
        jsapi_ticket = await cls.get_ticket(redis)
        noncestr = get_random_string(16)
        data = {
            'noncestr': noncestr,
            'jsapi_ticket': jsapi_ticket,
            'url': url,
            'timestamp': timestamp
        }
        data = sorted(data.items(), key=lambda x: x[0])
        data = ["=".join(row) for row in data]
        req_str = "&".join(data)
        sign = hashlib.sha1(req_str.encode())
        signature = sign.hexdigest()
        return noncestr, timestamp, signature

注意事项

• 调试时，打开config的debug模式
• 根据debug弹出的错误信息，到官网上寻找答案

附录

• 微信JS-SDK接入

• 微信公众号开发文档