vue 微信分享-CFANZ编程社区

npm install weixin-js-sdk --save
网上好多使用这个的但是已经弃用了
指路

开始步骤：
【1】微信公众号的添加js安全域名，一级域名，二级域名都可以，但是切记不要带http://

【2】安装依赖

//安装
cnpm install weixin-jsapi --save-dev

//main.js引入微信分享
import wx from 'weixin-jsapi'

【3】代码

created(){
    this.shareUrl=window.location.href
    //分享
    this.share()
}

methods: {
    share(){
        var that=this
        this.$axios({  
          method: 'post',
          dataType: "json",
          url: "/index/wxShare",
          data:{"url":that.shareUrl}
        }).then(function (res) {
          console.log("share返回数据")
          console.log(res.data.data)
          // wx.config({
          //   debug: false,// true开启调试模式,pc端会console.log手机端会alert
          //   appId: 'wx56a464621c6314a',// 必填，公众号的唯一标识，填自己的！
          //   timestamp: timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
          //   nonceStr: nonceStr,   // 必填，生成签名的随机串
          //   signature: signature, // 必填，签名，见附录1
          //   jsApiList: [
          //     'onMenuShareTimeline',
          //     'onMenuShareAppMessage'
          //   ]
          // })
          //我的是后台全部给返回了直接用
          wx.config(res.data.data)
          //分享配置
          wx.ready(function () {
              // alert("走了ready")
              //分享到朋友圈
              wx.onMenuShareTimeline({
                title:that.detail.title,   // 分享时的标题
                link: that.shareUrl,     // 分享时的链接
                imgUrl: that.design.cover_src,    // 分享时的图标
                success: function () {
                  // alert("分享成功");
                },
                cancel: function () {
                  // alert("取消分享");
                }
              });
              //分享给朋友
              wx.onMenuShareAppMessage({
                title: that.detail.title,
                desc: '张家口资讯网·楼盘频道，最新地产信息每日发布...', 
                link: that.shareUrl,
                imgUrl: that.design.cover_src,
                success: function () {
                  // alert("分享成功");
                },
                cancel: function () {
                  // alert("取消分享");
                }
              });
          })

        }).catch(function (err) {
          Toast(err);
          console.log(err)
        })      
    }
}

【4】
注意点：分享卡片的信息要在接口拿到数据后调用
注意点：分享卡片的图片链接是全链接
注意点：一定是把要当前分享的页面的url包含http,全部给到后台他去拿该URL去生成签名和一些微信的信息返回给前端
开启微信配置debug=true; pc端会console.log手机端会alert