vue h5 js-sdk 实现分享的功能（分享至好友/朋友圈）

需求：

用户在h5 页面中实现微信的分享至好友、分享至朋友圈的功能、且实现的方式为卡片的形式，（一个h5界面要求点击右上角三个点后点击微信好友分享带标题和图片给好友。vue项目中，分享携带头部标题、简介和缩略图等信息）。

效果图：

在这里插入图片描述

分享后的展现形式：

在这里插入图片描述

注明几点踩过的坑

要想分享出去是卡片的形式，而不是链接的方式，需要通过如下几种方式：

以扫码的方式进入，后进行分享
将链接收藏，从收藏中点击进入，后进行分享
在微信公众号的菜单栏中进行配置链接，用户在微信公众号中点击，后进行分享
注：如果是点击链接进入，则分享出去还是链接的形式。

实现方式

在微信公众号中进行配置

在这里插入图片描述

将域名的ip进行配置

在这里插入图片描述

代码实现方式

安装weixin-js-sdk

npm install weixin-js-sdk

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

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

引入代码中并使用

代码字段解释：

winUrl :这个必须是前端传递给后端
signature 必须是后端返回的，如果返回错误，则一直配置失败
自己写的按钮，是不能唤起微信右上角三个点进行分享的，可以通过给用户提示，进行引导。

<script>
import wx from "weixin-js-sdk";
export default {
  created() {
  	this.getShareInfo();
  },
  methods: {
    getShareInfo() {
      var that = this;
      var winUrl = window.location.href.split("#")[0];
      // 配置分享, 以下两个参数是我自己生成，传给后端的
      var timestamp = Date.parse(new Date()) / 1000;
      var nonceStr = that.createNonceStr();
      toTranscript(encodeURIComponent(winUrl), nonceStr, timestamp).then(
        (msg) => {
          wx.config({
            debug: false,
            appId: "", // 必填，公众号的唯一标识
            timestamp: timestamp, // 必填，生成签名的时间戳
            nonceStr: nonceStr, // 必填，生成签名的随机串
            signature: msg.data.signature, // 必填，签名，见附录1
            jsApiList: ["updateTimelineShareData", "updateAppMessageShareData"], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });
          wx.ready(function () {
            //分享到朋友圈  需在用户可能点击分享按钮前就先调用
            wx.updateTimelineShareData({
              title: that.activeObj.ac_title, // 分享时的标题
              desc: that.activeObj.share_desc, // 分享描述
              link: that.activeObj.share_url, // 分享时的链接
              imgUrl: that.activeObj.share_image, // 分享图标
              success: function () {
                // 设置成功
                console.log("分享到朋友圈成功");
              },
              cancel: function () {
                // 取消设置
                console.log("分享到朋友圈取消");
              },
              fail: function () {
                console.log("分享朋友圈失败");
              },
            });
            // 分享给朋友的设置
            wx.updateAppMessageShareData({
              title: that.activeObj.ac_title, // 分享时的标题
              desc: that.activeObj.share_desc, // 分享描述
              link: that.activeObj.share_url, // 分享时的链接
              imgUrl: that.activeObj.share_image, // 分享图标
              success: function () {
                // 设置成功
                console.log("分享给朋友成功");
              },
              cancel: function () {
                // 设置失败
                console.log("分享给朋友失败");
              },
              fail: function () {
                console.log("分享朋友圈失败");
              },
            });
          });
        }
      );
    },
    createNonceStr: function () {
      return Math.random().toString(36).substr(2, 15);
    },
  },
}
</script>

可参考官方网址：微信网页开发，分享的功能

在这里插入图片描述

标签