前端 微信二次分享
一、问题如下:
从秀健身APP分享到微信、qq、微博等时,表现形式像名片一样,有标题 描述 图片,此时打开链接查看 内容,再次点击分享按钮,分享后的名片丢失描述及图片
二、解决方案
使用微信公众号jssdk自定义分享
1.首先引入微信jssdk =》 向下兼容
<script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js "></script>
2.绑定域名 ,先登录 微信公众平台 进入“公众号设置”的“功能设置”里填写“JS接口安全域名”,可以按照提示进行填写,最多填写三个。
3. 为了保证数据安全性,需要从后台支持接口,获取配置信息
创建一个js文件,发送ajax请求将浏览器分享的地址(window.location.href.split("#")[0])发送到后台获取公众号时间戳以及签名等信息并使用微信ready函数自定义分享标题描述以及logo
在接口请求成功后, config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,
所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中 如下图可将描述信息当做参数传到需要分享的接口中,可写死也可动态获取
备注: 微信在分享朋友时会添加一些参数,所以需要做一些处理,否则分享失败
wx.js
$(function () {
var url;
var urls;
// 获取本页面连接, 生成签名需要
if (window.location.href.indexOf('from') != -1 || window.location.href.indexOf('isappinstalled') != -1) {
// 二次分享url重定向 - 需要截取一次分享后微信自动拼接的url参数&from=singlemessage&isappinstalled=0
urls = window.location.href.split('from')[0]; // 这里的split中的字符串会变换(?或&),主要看自己的url
urls = urls.substr(0, urls.length - 1).split('#')[0]; // 这里的split中的字符串会变换(?或&),主要看自己的url
} else {
urls = window.location.href.split('#')[0]; // 这里的split中的字符串会变换(?或&),主要看自己的url
}
url = window.location.href.split('#')[0]; // 这里的split中的字符串会变换(?或&),主要看自己的url
$.ajax({
url: "/contest/share/getWxConfig?url=" + encodeURIComponent(url), //你获取签名的接口
type: "GET",
async: false,
cache: false,
dataType: "json",
success: function (data) {
if (data.code === 0) {
wx.config({
debug: false,//调试模式
appId: data.data.appId,// 必填,公众号的唯一标识
timestamp: data.data.timestamp,// 必填,生成签名的时间戳
nonceStr: data.data.nonceStr,// 必填,生成签名的随机串
signature: data.data.signature,// 必填,签名,见附录1
jsApiList: [ // 必填,需要使用的JS接口列表
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
]
});
}
},
error: function (s) {
return;
}
});
wx.ready(function () {
var shareDatas = {};
if (configShare) {
shareDatas.title = configShare.title;
shareDatas.desc = configShare.content;
shareDatas.link = urls;
shareDatas.imgUrl = configShare.logUrl;
}
wx.onMenuShareTimeline(shareDatas); // 朋友圈
wx.onMenuShareAppMessage(shareDatas); // 朋友
wx.onMenuShareQQ(shareDatas); // QQ
wx.onMenuShareWeibo(shareDatas); // 微博
wx.onMenuShareQZone(shareDatas); // QQ 空间
});
wx.error(function (res) { });
});