微信分享的链接，手机打开白屏，单页面应用(Hash模式下)，实现微信分享

最新推荐文章于 2023-03-14 22:39:27 发布

lilly呀

最新推荐文章于 2023-03-14 22:39:27 发布

阅读量1.8k

点赞数 1

分类专栏：微信文章标签： javascript 微信分享链接手机打开白屏微信分享朋友圈带缩略图和标题前端

本文链接：https://blog.csdn.net/qq_26780317/article/details/105002766

版权

微信专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言：现在将相关的产品分享至朋友圈，进行宣传，成为一种很常见的方式。本文，主要想分享一下，微信分享所遇到的坑，微信分享的链接，手机打开白屏，以及产生的原因。

前端微信分享的基本步骤：

一、绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

二、引入JS文件

在需要调用JS接口的页面引入JS文件，项目中使用的是angular.js，所以，直接在index.html中引入。

http://res.wx.qq.com/open/js/jweixin-1.0.0.js，支持https。

<!--微信分享-->
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

三、通过config接口注入权限验证配置

接口可以放在自己写的ajax回调里，将成功回调的值直接引入到wx.config需要的参数中。

四、通过ready接口处理成功验证

文档中“config信息验证后会执行ready方法，所有接口调用都必须config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。”

五、通过error接口处理失败验证，添加wxshare.js文件

1.触及某个页面分享时，需要得到当前页面的url，用来传给后台，换取config中的参数；

2.页面分享出去的窗口对应着一个接口，该接口中包含一个url，这个url是分享出去的页面链接。在这个url中可以拼加自己需要的参数，实现分享的追踪；

如：var shareUrl = 'https://show.mypro.com/#/product_details?userId=' + userId + '&level=' + level;这个shareUrl可以直接传到接口的参数中。

3.分享页面的JS中必须配置config，在config中有一个jsApiList，在其中放置需要使用的JS接口列表，并以字符串的形式写入。

//微信分享start
var weixinShare = function(weixinTitle,weixinImg){
  var appid = "";
  var nonceStr = "";
  var timestamp = "";
  var signature = "";
  var shareUrl = "";
  // 微信分享相关值
  var sharedesc = "";
  var shareTile =  "微信分享" + weixinTitle;
  var shareImgUrl = '<%=Taipingurl%>'+"/eservice/gp/egp/agency/app/enjoy/images/"+'<%=imgFlag%>'+".png";
  $(document).ready(function() {
  //alert(sharedesc);
  //获取当前页面的地址，并处理
    shareUrl = location.href.split('#')[0];
    shareUrl2 = window.location.href;
    //alert("shareUrl="+shareUrl);
    var baseurl = shareUrl.split('?')[0];
    var urlparam = shareUrl.split('?')[1];
    if (urlparam == undefined || urlparam == '') {
        //alert('没参数');
        urlparam = "&urlparam=";
    } else {
        //alert("urlparam="+urlparam);
        urlparam = "&urlparam=&" + urlparam;
    }
    console.log(shareUrl);
    console.log(shareUrl2);
    $.ajax({
        type: "GET",
        url: "<%=path%>/servlet/ShoppingServlet?sAction=getjsTicket" + urlparam + "&shareUrl=" + baseurl,
        dataType: "jsonp",
        //data:$('#form1').serialize(),
        success: function(data) {
        //alert("更新成功！");
        console.log(data);
        appid = data.appid;
        nonceStr = data.nonceStr;
        timestamp = data.timestamp;
        signature = data.signature;
        //alert("更新成功！" + "appid:" + appid + "|nonceStr:" + nonceStr + "|timestamp:" + timestamp + "|signature:" + signature);
        //$("#signval").val("appid:" + appid + "|nonceStr:" + nonceStr + "|timestamp:" + timestamp + "|signature:" + signature);
        wx.config({
            debug: false,
            // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: appid,
            // 必填，公众号的唯一标识
            timestamp: timestamp,
            // 必填，生成签名的时间戳
            nonceStr: nonceStr,
            // 必填，生成签名的随机串
            signature: signature,
            // 必填，签名，见附录1
            jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareQZone'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
  
        wx.checkJsApi({
            jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareQZone'],
            // 需要检测的JS接口列表，所有JS接口列表见附录2,
            success: function(res) {
                // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                //alert(res.checkResult);
            }
        });
        // 微信空间加载事件
        wx.ready(function() {
            // alert("朋友");
            // 分享给朋友
            wx.onMenuShareAppMessage({
                
                title: shareTile,
                // 分享标题
                desc: sharedesc,
                // 分享描述
                //link: shareUrl,
                link: shareUrl2,
                // 分享链接
                imgUrl: shareImgUrl,
                // 分享图标
                type: '',
                // 分享类型,music、video或link，不填默认为link
                dataUrl: '',
                // 如果type是music或video，则要提供数据链接，默认为空
                success: function() {
                // 用户确认分享后执行的回调函数
                //alert('sussess!');
                },
                cancel: function() {
                // 用户取消分享后执行的回调函数
                // alert('cancel!');
                }
            });
  
            //分享朋友圈
            wx.onMenuShareTimeline({
                title: shareTile,
                // 分享标题
                //link: shareUrl,
                link: shareUrl2,
                // 分享链接
                imgUrl: shareImgUrl,
                // 分享图标
                success: function() {
                // 用户确认分享后执行的回调函数
                },
                cancel: function() {
                // 用户取消分享后执行的回调函数
                }
            });
  
            //分享至QQ
            wx.onMenuShareQQ({
                title: shareTile,
                // 分享标题
                desc: sharedesc,
                // 分享描述
                //link: shareUrl,
                link: shareUrl2,
                // 分享链接
                imgUrl: shareImgUrl,
                // 分享图标
                success: function() {
                // 用户确认分享后执行的回调函数
                },
                cancel: function() {
                // 用户取消分享后执行的回调函数
                }
            });
  
            // 分享至QQ空间
            wx.onMenuShareQZone({
                title: shareTile,
                // 分享标题
                desc: sharedesc,
                // 分享描述
                //link: shareUrl,
                link: shareUrl2,
                // 分享链接
                imgUrl: shareImgUrl,
                // 分享图标
                success: function() {
                // 用户确认分享后执行的回调函数
                },
                cancel: function() {
                // 用户取消分享后执行的回调函数
                }
            });
  
        });
  
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("获取微信配置信息失败：" + errorThrown);
            }
        });
  
    });
  //微信分享end

六、坑

这样操作，从微信分享出去的链接，带有标题和图标了，但是分享的链接打开确是空白页。

因为在使用ajax请求时，获取url采用了 ‘’shareUrl = location.href.split('#')[0];‘’方法，由于是hash模式（路由中带有#号），所以导致分享出去的链接中“#”被截取掉了，只截取到index.html部分，后面的参数被忽略，但是如果直接将url链接全部获取，又会影响到后面的ajax请求，导致微信分享的标题和图片的方法受到影响。

如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去‘#’hash部分的链接（可用location.href.split('#')[0]获取，而且需要encodeURLComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

解决方法：考虑到微信分享后的链接，来源于shareUrl的地址，所以，直接在原本的shareUrl下面添加了一个shareUrl2（“shareUrl2 = window.location.href;”），这样，微信分享的方法使用shareUrl的地址，微信分享再次打开的链接使用shareUrl2的地址。这样，解决了问题，又不互相影响，而且改动不大。

参考博客：《微信分享链接手机打开白屏》https://blog.csdn.net/pansanday/article/details/80336584

《Vue单页面应用(Hash模式下)实现微信分享》 https://www.cnblogs.com/mingxinice/p/mingxin.html

《微信转发或分享朋友圈带缩略图、标题和描述的实现方法》 https://www.yudouyudou.com/jiaochengheji/wangzhanjianshe/1225.html

lilly呀

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
微信分享的链接，手机打开白屏，单页面应用(Hash模式下)，实现微信分享

//微信分享startvar weixinShare = function(weixinTitle,weixinImg){ var appid = ""; var nonceStr = ""; var timestamp = ""; var signature = ""; var shareUrl = ""; // 微信分享相关值 var sharedesc ...
复制链接

扫一扫