需求背景

在h5项目开发中  往往会有分享功能  将当前页面变为一个小卡片进行分享  若直接点击右上角的三个点进行分享  分享出去的只是一个当前路径  而不是卡片形式   当然分享的前提是你要使用微信浏览器去打开当前页面  因为微信不支持h5直接调用弹出下方分享弹窗  所以前置操作为点击按钮出现蒙层指引点击右上角三个点进行分享

实现过程

1.先进行判断当前浏览器是否为微信浏览器  若是的话则进行分享  否则点击的时候进行提示

isWeiXin () {
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.indexOf('micromessenger') > -1) {
        return true; // 微信浏览器
      } else {
        return false;
      }
 },

2.项目中下载微信sdk   npm i weixin-js-sdk  然后在你的项目中写入分享按钮     下方我只举例了分享到微信好友和朋友圈的回调   若需要qq等等分享回调  则需要去微信公众号找对应的方法名字加入到jsApiList中  在ready中使用即可

<button @click="btn">分享</button>


import wx from 'weixin-is-sdk'
export default {
  data(){
    return{
      //wxsdk需要的参数  用于wx那边去校验来源
      appId:"",
      timestamp:"",
      noncstr:"",
      signatureInfo:"",
      // 自配项
      imgurl:"",//分享缩略图
      url:"",//分享点击时访问地址
    }
  },
  created(){
    //后端提供获取wxsdk访问的必要参数接口
    getSdk({
       appId:'传入公众号的标识(向后端要公众号的标识)  也可以后端直接在代码写死则不需要传入'
       url:location.href.split("#")[0]//将当前页面地址传给后端 后端用于发送到微信公众号进行注册并拿取返回的 签名              
    }).then(res=>{
      if(res.code=='200'){
        this.appId = res.data.appId;
        this.timestamp = res.data.timestamp;
        this.noncstr = res.data.noncstr;
        this.signatureInfo = res.data.signatureInfo;
      }
    })
  },
  methods:{
    btn(){
       //卡片缩略图
       this.imgurl = location.href.split('/index')[0] + "/static/shareimg.jpg";
       this.url = "分享的页面的地址";
       this.title="标题";
       this.desc="内容";
       this.goWx()
    },
    goWx(){
      let that = this;
      //填写wxspk所需要的必须项  jsApiList必须要填写  否则无法进行
      wx.config({
        debug:false,//是否打开debug调试模式 打开后若有异常抛出会在页面弹出
        appId:this.appId,	//必填，公众号唯一标识
        timestamp:this.timestamp,	//必填，生成签名的时间戳
        nonceStr:this.noncstr,	//必填，生成签名的随机串
        signature:this.signatureInfo,	//必填，生成的签名
        jsApiList:['onMenuShareTimeline','onMenuShareAppMessage']//允许分享好友，分享朋友圈
      })
      //异常抛出
      wx.error((res)=>{
         console.log('res',res)
      })
      //成功调用
      wx.ready(()=>{
        //点击到分享朋友圈调用
        wx.onMenuShareTimeline({
          title :this.title,//卡片标题
          link : this.url, //卡片链接
          imgUrl : this.imgurl, //卡片缩略图
          success : function(res){
            //分享成功的回调  但是因为微信为了保护用户的利益  故意 回收了分享是否成功的回调  所 
              以这里不管成功失败都会一进页面被调用  如果需要使用成功回调可以看我另一篇文章
            console.log("已分享朋友圈成功")
          },
          cancel:function(){
            //失败回调"
            console.log("已分享失败")
          }
        })
        //分享到好友调用
        wx.onMenuShareAppMessage({
          title :  this.title,  
          link :  this.url,    		
          desc : this.desc,             
          imgUrl : this.imgurl ,                            
          success : function(res){
            console.log("分享好友成功")
          },
          cancel:function(res){
            console.log("分享失败") 
          }
        });
      })
    },
  }
  
}

3.因为浏览器分享到微信是不会像小程序分享一样支持直接指定分享好友或朋友圈  所以需要像开头做一个蒙层页引导点击右上角三个点  然后经过微信前置分享弹窗进行选择分享到好友还是朋友圈   如下：

4.上方代码获取wxsdk必须项是通过后端接口来进行获取的  前端也有可以获取的方式  但是微信公众号需要将域名配置到公众平台的JS接口安全域名中  所以为了后期的可维护性等等不建议直接前端去获取  而是通过后端去获取

无法分享问题定位

开启debug模式时  如果安卓和ios都无法分享并弹窗wx.config报 realAuthUrl invalid signature 说明传入参数错误  大部分是因为后端从wx那边取回的签名等有问题也有可能是传入给后端的注册url有问题（打印检查是否为当前页面url， 但是一般是安卓正常分享  ios分享时wx.config报 realAuthUrl invalid signature才是因为spa导致url问题) 可以看我另一篇文章讲解了如何解决ios因为spa无法分享的问题