vue搭建的h5页面实现微信分享后不是链接显示

最新推荐文章于 2024-04-03 10:31:08 发布

初识.初见

最新推荐文章于 2024-04-03 10:31:08 发布

阅读量921

点赞数 3

文章标签：微信 vue.js web

本文链接：https://blog.youkuaiyun.com/qq_45016428/article/details/120851427

版权

业务需求：微信分享h5链接，只是显示一个链接，给人体验不好。想要实现微信分享后有缩略图、标题和详细介绍的一个类卡片效果。

没有实现前效果：

实现后效果：

直接上代码：

先引入微信sdk

在created 周期中调用

在methods中定义

      //微信分享
      async wxShare() {
        let currentUrl = window.location.href;
        let encodeUrl = encodeURIComponent(currentUrl.split("#")[0]);
        let parms = {
          url: encodeUrl,
        };
        let res = await wxToken(parms); //后端接口拿配置数据
        if (res.status == 200) {
          console.log(res);
          wx.config({
            debug: false,
            appId: res.payload.appId,
            timestamp: res.payload.timestamp,
            nonceStr: res.payload.nonceStr,
            signature: res.payload.signature,
            jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"],
          });
          wx.ready(function() {
            var shareData = {
              title: "标题",
              desc: "描述",
              link: currentUrl,//分享后链接
              imgUrl: "缩略图地址",
            };
            console.log(shareData);
            wx.onMenuShareAppMessage(shareData); //分享给好友
            wx.onMenuShareTimeline(shareData); //分享到朋友圈
          });
          wx.error(function(res) {
            //alert(res.errMsg);//错误提示
          });
        }
      },