微信转发或分享朋友圈带缩略图、标题和描述的实现方法

问题描述:

微信公众号中(页面均用vue),分享出去的页面,二次分享不能获取缩略和描述;

APP内嵌的H5页面(有用vue写的页面,也有jsp页面),分享给好友或朋友圈,二次分享不能获取缩略和描述;


实现工具:GetwxLink

问题思考:

百度总结,发现网友贡献最多的就是在body之后加一个img标签并且设置display:none,虽然这种方法感觉不科学,但我还是尝试了一下,发现在微信6.5.5版本之后已经失效了。分享只能通过设置微信的分享接口来实现缩略图和简介的调用,接通jssdk。

不管是微信公众号中分享的内容 还是 普通的H5页面 都需要微信签名验证的。

解决方案

1.在jsp页面中

页面引入

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script src="/js/common/shareJssdk.js"></script>

shareJssdk.js内容为:

$(function(){

    var url = encodeURIComponent(location.href.split('#')[0]);

    //分享

    $.ajax({

        type : "get",

        url : "/phjf/api/v1/sys/getJssdkSgin",

        dataType : "json",

        data:{

            url:url

        },

        success : function(result){

            wxstart(result.data);

        },

        error:function(data){

            alert("连接失败!");

        }

    });

    function wxstart(data){

        var url = location.href;  //分享的文章地址

        var appId = data.appId;

        var timestamp = data.timestamp;

        var nonceStr = data.nonceStr;

        var signature = data.signature;

        wx.config({

            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

            appId: appId, // 必填,公众号的唯一标识

            timestamp: timestamp, // 必填,生成签名的时间戳

            nonceStr: nonceStr, // 必填,生成签名的随机串

            signature: signature,// 必填,签名,见附录1

            jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ" , "onMenuShareWeibo"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

        });

        wx.ready(function(){

            var shareData = {

                title: document.title,

                desc: '政府牵头推动成立的惠民金融平台',

                link: location.href,

                imgUrl: 'http://file.puhuijinfu.com/imgLoader/test/phjf/img/2018/10/11/xyswkVTROKdq1xBzEYMB.jpeg'

            };

            wx.onMenuShareAppMessage(shareData);

            wx.onMenuShareTimeline(shareData);

            wx.onMenuShareQQ(shareData);

            wx.onMenuShareWeibo(shareData);

        });

    }

})

确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去’#‘hash部分的链接(可用location.href.split(’#’)[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。

在vue中设置

安装微信sdk

npm install weixin-js-sdk

在需要用到分享的页面,引入sdk

import wx from 'weixin-js-sdk';

在App.vued的,methods方法中加入这个公用方法

//获取分享配置

          jssdkSgin(){           

              var _this = this;

              var url = encodeURIComponent(location.href.split('#')[0]);

              Http.getJssdkSgin(url).then(response => {

                  var result = response.data;

                  if(response.code == 1) {

                      followUrl =  result.followUrl;

                      localStorage.setItem('followUrl',result.followUrl);

                      wx.config({

                          debug: false,//生产环境需要关闭debug模式

                          appId: result.appId,//appId通过微信服务号后台查看

                          timestamp: result.timestamp,//生成签名的时间戳

                          nonceStr: result.nonceStr,//生成签名的随机字符串

                          signature: result.signature,//签名

                          jsApiList: [

                              'onMenuShareTimeline','onMenuShareAppMessage'

                          ]

                      });

                  }else{

                      _this.$message({

                          message: response.msg,

                          center: true,

                          duration:2000,

                          customClass:'mesTip'

                      });

                  }

              })

          },

在页面的methods中,加上shareWeChat方法,

data中的数据

//======data中的数据

shareConfig:{

                  title:'GetwxLink',

                  desc:'GetwxLink',

                  share_url:location.href,

                  share_img:'http://www.gettool.cn/GetwxLink/'

                },

//methods方法

//设置微信分享

          shareWeChat(){

              let share_title = this.shareConfig.title;

              let _this = this;

              var config = {

                  title: share_title, // 分享标题

                  desc:_this.shareConfig.desc,

                  link: _this.shareConfig.share_url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

                  imgUrl: _this.shareConfig.share_img,

                  type:'link',

                  success: function() {

                      console.log("success")

                  },

                  cancel: function() {

                      console.log("failf")

                  }

              };

              wx.ready(function () {

                  // 分享到朋友圈

                  wx.onMenuShareTimeline(config);

                  //分享给朋友

                  wx.onMenuShareAppMessage(config);

              });

          },

注意:

特别注意,需要在公众号中添加js安全域名。开发公众号中,好像只能添加一个;生产公众号,最多可以添加3个。 不加安全域名,会报错的。

特别注意url需要动态获取,传递给后台,否则会报错。因为二次分享的时候,微信会自动在url后面追加一串。如果不传递,就会造成url不对,那么签名就不正确

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,922评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,591评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,546评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,467评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,553评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,580评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,588评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,334评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,780评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,092评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,270评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,925评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,573评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,194评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,437评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,154评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容