vue 微信公众号网页分享

将下面代码 放入链接要进入的页面 （比如分享页面/share 分享链接为/index， 则将此段代码放在index 页面）

index 页面

在的mounted函数中

function getQueryString(name) {
      //根据字段看网址是否拼接&字符串
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    }
    var from = getQueryString("from");
    var appinstall = getQueryString("appinstall");
    var sec = getQueryString("sec");
    var timekey = getQueryString("timekey");

    if (from || appinstall || sec || timekey) {
      //假如拼接上了
      var shareUrl = "http://badminton.mohennet.xyz/index/"
      window.location.href=shareUrl;
    }
}

在分享页面引入

import wx from "weixin-js-sdk";

如若没有，命令行内输入

npm install weixin-js-sdk --save-dev

share页面

在mounted函数中引用一下代码

WXshare() {
      console.log("分享");
      
      var that = this;
      var shareUrl = "http://xxxxxx.xyz/index/";
      var url=shareUrl.split('#')[0]
      var imgUrl =  "https://image--ccccc.oss-cn-hangzhou.aliyuncs.com/publish/share.jpg";
      (that.cindex = this.$route.query.cindex),
        (that.remain = 5 - this.$route.query.cindex);
      that.axios.get("http://xxxxx.xyz/sign_data").then(res => {
        console.log(res);
        var nonceStr = res.data.nonceStr;
        var timestamp = res.data.timestamp;
        var signature = res.data.signature;
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: "wxceed9c3cd39ce5d7", // 必填，公众号的唯一标识
          timestamp: timestamp, // 必填，生成签名的时间戳
          nonceStr: nonceStr, // 必填，生成签名的随机串
          signature: signature, // 必填，签名，见附录1
          jsApiList: [
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "translateVoice"
          ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        wx.onMenuShareAppMessage({
          title: "挑战世界冠军，赢10元话费", // 分享标题
          desc: "比复兴号还快的羽毛球，你能抓住吗？", // 分享描述
          link: url.split('#')[0], // 分享链接
          imgUrl: imgUrl, // 分享图标
          type: "link", // 分享类型,music、video或link，不填默认为link
          dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
          success: function(res) {
            console.log(window.location.href.split('#')[0])
            console.log(res);
            // 用户确认分享后执行的回调函数
            that.showshare = false;
            console.log("分享1");
          },
          cancel: function() {
            console.log("分享2");
            // 用户取消分享后执行的回调函数
          }
        });
        wx.onMenuShareTimeline({
          title: "挑战世界冠军，赢10元话费", // 分享标题
          desc: "比复兴号还快的羽毛球，你能抓住吗？", // 分享描述
          link: url.split('#')[0],
          imgUrl: imgUrl, // 分享图标
          success: function() {
            console.log(window.location.href.split('#')[0])

            console.log("分享1");
            // 用户确认分享后执行的回调函数
            that.showshare = false;
          },
          cancel: function() {
            console.log("分享2");
            // 用户取消分享后执行的回调函数
          }
        });
      });
    }

如果是单页面在页面中引入上述所有代码即可