微信二次分享解决方案

最近项目中开发需要在微信端二次分享分享H5页面,但是第一次分享的时候安卓没有问题,ios有时成功有时失败,并且二次分享的时候安卓还是没有问题,ios一次成功都没有,后来查阅文档搜索资料终于解决了,一下是解决资料内容:

百度上自定义微信分享标题以及描述的解决方法有很多,基本上都能实现一次分享:流程基本上是这样的

  1.首先引入微信jssdk =》<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

  2.发送ajax请求将浏览器分享的地址(window.location.href.split("#")[0])发送到后台获取公众号时间戳以及签名等信息并使用微信ready函数自定义分享标题描述以及logo,代码部分基本上是这样的

这里唯一需要注意的一点是保证传过去的url地址跟wx的ready函数中shareData里面要分享的link链接保持一致才不会导致签名非法等问题,后台返回来的signature需要进行encode编码,imgUrl参数不能为绝对路径,否则会找不到图片。

  绝大多数情况下通过这种形式就能实现一次分享自定义,但是,有个不好的消息=》微信在进行二次分享后会给该链接自动加上from以及isappinstalled这两个参数证明该链接是二次分享过来的,有了这两个参数,便会导致二次分享进行签名时失效,一次分享拥有的自定义信息都会被抹杀,剩下空荡荡的链接以及白色缩略图,很是恶心。那么,既然知道了是因为这两个参数导致的二次分享失败,为什么不能在二次分享前就将这两个参数去掉然后强制跳转=》刷新回不带微信参数的页面呢(PS,在这之前看了很多文章都说在url地址中加上encodeURIcomponent进行编码就不会出现这种错误了,但是试了一下后发现连基础的一次分享都不行了)

自己的代码:

$( function(){
     var url = '/user/ucenter/wxsign/query',
         locaUrl = window. location. href. split( '#')[ 0];
     $. ajax({
     type: 'POST',
     url: url,
     dataType: 'json',
     data: 'url='+ encodeURIComponent( locaUrl)+ '',
     async: false,
     success : function( r){
        if( r. flag == 20000){
        wx. config({ //微信分享
debug: true, //开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: r. data. timestamp, // 必填,生成签名的时间戳
nonceStr: r. data. nonceStr, //必填, 生成签名的随机串
signature: r. data. signature, //必填,签名
jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone'] //必填, JS接口列表,这里只填写了分享需要的接口
});
wx. ready( function () {
wx_share( '多加网-高端医美大健康平台', 'https://m.duojia369.com/Invitation/channel/supplierInv.html', 'https://m.duojia369.com/dist/shareHead.png', '甄选汇集全球顶尖的高端医疗资源,重磅补贴,多赚不止20%');
});
function wx_share( title, link, imgurl, desc) {
//朋友圈
wx. onMenuShareTimeline({
title: title, // 分享标题
link: link, // 分享链接
imgUrl: imgurl, // 分享图标
success : function() {
// 用户确认分享后执行的回调函数
alert( "分享成功")
},
cancel : function() {
// 用户取消分享后执行的回调函数
}
});
//微信好友
wx. onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgurl, // 分享图标
type: 'link', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success : function() {
// 用户确认分享后执行的回调函数
alert( "分享成功")
},
cancel : function() {
// 用户取消分享后执行的回调函数
}
});
//qq
wx. onMenuShareQQ({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgurl, // 分享图标
success : function() {
// 用户确认分享后执行的回调函数
},
cancel : function() {
// 用户取消分享后执行的回调函数
}
});
// qq空间
wx. onMenuShareQZone({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgurl, // 分享图标
success : function() {
// 用户确认分享后执行的回调函数
},
cancel : function() {
// 用户取消分享后执行的回调函数
}
});
}
       }
     }
    });
})

查到的代码:

发现分享从客户端分享到微信是正常的,可以看到缩略图,名称和描述,可在微信里再次打开通过微信分享时,就只出现了链接地址,也没有缩略图,无奈,被老板逼这,自己研究了两天中与给弄出来了,特写此文,纪念逝去的两天:

微信内部浏览器自带分享功能,这要求我们要调用微信的APi进行操作!

通过看文档,发现首先要拿到

>  appId: '',
   timestamp:
   nonceStr:,
   signature:,
  • 1
  • 2
  • 3
  • 4
  • 5

于是就搜索与此有关的资料为了保证数据的安全性,就把对应的代码放到了后台:

代码可移步到:后台获取微信分享签名

首先你要在微信的基本配置里配置一下服务器的IP,不然会拿不到access——token ,提示IP非法 
这里写图片描述

第二步就是Js代码了

首先要引入微信的js

 <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  • 1

调用代码如下

$ (function(){ 
//获取本页面连接,生成签名需要 
var url =location.href.split('#')[0]; 
$.ajax({ 
url: "你的域名/weixin/sign?url="+encodeURIComponent(url), //你获取签名的接口 
type: "GET", 
async:true, 
cache: false, 
dataType: "json", 
success: function(data){ 
var da=data; 
console.log(da.data.signature); 
wx.config({ 
debug: true, //调试模式 
appId: 'wx97acfdc52e5239ef', 
timestamp:da.data.timestamp, 
nonceStr:da.data.nonceStr, 
signature:da.data.signature, 
jsApiList: [ 
'onMenuShareTimeline', 
'onMenuShareAppMessage'] 
}); 
}, 
error: function() { 
console.log('ajax request failed!!!!'); 
return; 

}); 
wx.ready(function () { 
// wx.checkJsApi({ 
// jsApiList: [ 
// 'onMenuShareTimeline', 
// 'onMenuShareAppMessage' 
// ], 
// success: function (res) { 
// console.log(res.errMsg); 
// } 
// }); 
// 
var shareData = { 
title: "资讯消息", 
desc: sharename, 
link: url, 
imgUrl: shareimg 
}; 
wx.onMenuShareAppMessage(shareData); 
wx.onMenuShareTimeline(shareData); 
}); 
wx.error(function (res) { 
console.log(res.errMsg+"错误信息"); 
}); 
});

需要注意的是一下情况可能引起非法签名


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值