1.微信二次分享失效原因

最近在项目开发中，需要从安卓端分享app推广页面到微信端，用的是友盟的sdk。从安卓端分享出来页面是没问题的。下图

但是二次分享后就是这样的效果了。

1.1 二次分享指什么

何为二次分享，即从安卓端分享到微信端叫首次分享，然后你分享出去的内容被其他人点了转发叫二次分享。二次分享又有直接二次分享和间接二次分享。直接二次分享是从聊天页面长按分享链接转发给好友，间接二次分享是指点进链接之后，在页面之中进行分享。虽然效果都是将页面分享出去，但是显示效果却是不一样的。

直接二次分享时，接收人接收到的信息和你转发出去时一致，即你转发时是什么，别人就收到什么样的消息。

间接二次分享时就和直接二次分享可能出现的效果不一致，简介二次分享时，是由微信重新排版页面之后进行分享了。所以效果上会有所差异。

1.2 为什么二次分享会失效

所谓二次分享失效是分享的内容只剩标题了，描述和图片均变成了链接了。而分享来源消失则是正常状态。许多企业甚至是上市公司都没有注意到这个问题，当他们的分享页面被二次分享后就出现了很丑的只剩链接的。

那为什么会出现这样的问题呢？？

当打开分享页面时，是由微信内置浏览器打开了你分享的链接地址，所以打开后二次分享和你从安卓端首次分享出来时已经不是一个概念了。从安卓端首次分享出来，你配置好了分享内容。直接二次分享时，转发的是你接收的那条分享信息，该信息甚至还包含了分享来源，所以一般很少出现二次失效的问题。而间接二次分享时，微信内置浏览器甚至会重排版你的网页信息，也拿不到你分享时的配置信息，所以你二次分享后就出现了失效的问题。

2.二次分享失效的解决

要想解决二次失效的问题，需要从分享的目标网页使用微信的jssdk进行分享配置。即你需要在目标网页实现分享功能。

看到这个答案，你是不是觉得一脸懵逼？

别急呀，这个问题并不难解决。既然已经明白了问题所在，那么就干呗。我相信既然有解决方案，并且有技术能解决，那就都不是问题。

2.1 准备

首先，要解决这个问题，你需要有一个公众号，因为使用jssdk配置微信分享时，需要有公众号,且该公众号需要进行认证。

其次，你需要后台为你增加一个接口，进行微信签名认证。如果没有后台也不要紧，我会将后台实现方案给出来。还得有一个备案好的域名。

最后，就是需要把目标网页回炉重造，所以你要拿到目标网页的源码。

如果你是纯安卓端开发的话，建议此篇文章分享给写web端看。因为到了这一步，已经和安卓端没有半毛钱关系了。当然你要看也是阔以的，最起码解决方案可以瞅瞅。

2.2 公众号相关配置

如果你的公众号有专门的人负责的话，你就可以帅气的扔一句。给我把目标网页的域名添加到

如果公司没有公众号的话，可就得多干点事情了。申请公众号和认证公众号我就不再描述，有认证材料就很简单。
首先，登录到微信公众平台，在开发配置模块设置公众号开发信息。你需要拿到AppSecret和AppID。然后可以配置一下ip白名单，将你公司的服务器ip添加到白名单之中。不配置的话是访问不了微信服务的哟。为什么设置ip白名单，在下图之中也是有相关描述的。

然后在公众号设置的功能设置里面设置业务安全域名和js接口域名。业务安全域名一般指你后端存放的域名，通过该域名可以访问微信提供的开放接口。而js接口域名则指目标网页地址所在域名，设置JS接口安全域名后，公众号开发者可在该域名下调用微信开放的JS接口。

总之两个都设置一下，如果前后端都放在一个服务器的话，那么可以设置相同的域名。前提是域名得备案。

2.3 后台接口

微信jssdk开发文档
点击可以查看jssdk开发文档，里面有详细的介绍信息。这里我就对微信分享进行描述。
首先需要做一下配置。

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

从配置文件中我们可以看到，有三个字段需要我们在前端进行配置。尤其重要的便是签名。
那么这三个字段如何生成呢？总不能在前端进行生成吧。当然放在后端了，前端只需要往后端进行请求就行了。

那么后端怎么做呢？
首先需要拿到access_token。
请求地址为

`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=yourappid&secret=yoursecret`

请求方式为GET就行。返回内容为json格式，这个可以通过微信给的调试工具进行调试查看返回内容。
在线接口调试工具 http://mp.weixin.qq.com/debug?token=2091322458&lang=zh_CN

然后再通过access_token来获取ticket（门票？？？）

"https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=%s&type=jsapi" % (
                    access_token)

最后就是生成签名了，生成签名的话，还是比较有趣的。

 sha_str = "jsapi_ticket=%s&noncestr=%s&timestamp=%s&url=%s" % (ticket, noncer, timestamp, request_url);

我们需要使用前面获取到ticket noncer，timestamp，request_url四个字段来拼接成一个字符串。最后通过sha加密来作为signature（签名）。

noncer：生成15位的随机字符串，可以是字母和数字
timestamp：时间戳 
request_url：目标网页的链接 该链接是动态的比如包含了分享者的ip地址之类的，建议从前端将链接传过来

# 获取15位随机字符串
def get_noncer():
    str_list = [random.choice(string.digits + string.ascii_letters) for i in range(15)]
    random_str = ''.join(str_list)
    return random_str

# 获取时间戳
def gettimestamp():
    return int(time.time())

sha加密字符串
def getsha(sha_str:str):
    sha = hashlib.sha1(sha_str.encode('utf-8'))
    encrypts = sha.hexdigest()
    return encrypts

当然appid也建议从后端进行返回，不放在目标网页里面。

这样就获取到了我们前端所需的配置数据了。

2.4 前端分享配置

首先引入jssdk

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

这里建议这种引用方式，不要下载后放在服务器。

然后在ready函数里面配置微信分享信息。这里建议ready函数里面先访问后端接口先请求配置信息，拿到配置数据，再进行配置

wx.config({
	ebug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。打印标识config:
	appId: appId, // 必填，公众号的唯一标识
	timestamp: timestamp, // 必填，生成签名的时间戳
	nonceStr: nonceStr, // 必填，生成签名的随机串
	signature: signature, // 必填，签名，见附录1
	jsApiList: ['onMenuShareTimeline', // 分享朋友圈
						'onMenuShareAppMessage', //好友或群
						'onMenuShareQQ', //qq 
						'onMenuShareQZone' //qq空间
					] // 分享好友 // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});

当然，还可以有腾讯微博可以分享，这里就不加进去了，具体视情况而定。

wx.onMenuShareQQ({
		title: '', // 分享标题
		link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		imgUrl: encodeURI("imgurl"), // 分享图标
		desc: "描述",
		success: function() {
			// 用户确认分享后执行的回调函数
			alert("分享到qq成功");
		}，
		cancel: function() {
			// 用户取消分享后执行的回调函数
			alert("取消好友分享");
	}
});

同等方式配置朋友圈，微信好友，qq空间等方式。这些配置要放在ready函数里。

wx.ready(function() {
					// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
	//朋友圈
	wx.onMenuShareTimeline({}）；
	.....

到这里前端也配置完成了。
然后当然是放到服务器上进行尝试了哦。

3.相关问题解决

1.前端配置成功，配置信息也正确为啥还是出现失效的问题？

首先，确保微信打开你的链接后，你的链接不会被改变。本来自己分享的链接是www.baidu.com，但是在微信打开后变成了www.baidu.com？from=??。反正就是后面被添加了一些字段。
解决方法：将链接后面多余的字段剔除，然后重新加载页面。再将链接post后端进行配置信息获取。

2. 页面出现布局混乱

有时候，页面会出现布局混乱，就好像css没加载进来一样。这是因为微信缓存机制的问题。
解决方法：建议将css写在页面之中。不是最佳解决方案，有更好的方案的可以告知。

3.相关建议

建议引用的文件使用绝对路径方式。
建议所有请求地址均使用https。

到这一步，问题就得以解决。

如果你遇到相同问题通过这篇文章不能解决，敬请在下方留言，咱们一起填坑。