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

目录

目录
问题描述

解决方案
公众号设置参数

服务器配置

分享页面中动态添加

注意事项

附录

问题描述

我们的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/目录下

分享页面中动态添加

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

在页面中引入微信的js-sdk

在页面中动态获取签名信息

在页面中配置分享不同的渠道的函数

我是用的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接入

微信公众号开发文档