h5页面调用微信jssdk分享

  • 引入微信js

     
    
  • 配置wx.config,其中appIDTimeStampNonceStrSigNature都是由后台生成,需要生成url地址这边我是由前端传给后台,通过 document.location.href.replace(/=/g, ‘[eq]’) 传参给后台,
    第二次分享微信会加一堆参数,防止 ‘=’ 报错,所以用【eq】替换 ‘=’ ,后台收到以后需要把 = 再换回来
    分享的时候得保证当前页面地址与后台生成签名保持一致
    图片大小不能太大,地址需要能通过浏览器访问,

    wx.config({
            debug:false,// 是否开启调试模式
            appId:res.payload.appID,//appid
            timestamp:res.payload.TimeStamp,// 时间戳
            nonceStr:res.payload.NonceStr,// 随机字符串
            signature:res.payload.SigNature,// 签名
            jsApiList:[
             'onMenuShareTimeline',    
             'onMenuShareAppMessage',   
            ]// 需要使用的JS接口列表	
    
    wx.ready(function(){
                // 分享给好友
                wx.onMenuShareAppMessage({
                    title:'馨悦名邸 全屋整装',// 分享标题
                    desc:'庆祝全筑e家入驻馨悦名邸,大师设计为你而来',// 分享描述
                    link:window.location.href,// 分享链接
                    imgUrl:'https://huodong.quanzhuejia.com/h5_share_03.jpg',// 分享图标
                    success: function(){
                        doShareDone()
                    },
                    cancel:function(){
                        doShareCancel()
                    }
                })
                // 分享到朋友圈
                wx.onMenuShareTimeline({
                    title:'馨悦名邸',// 分享标题
                    link:window.location.href,// 分享链接
                    imgUrl:'https://huodong.quanzhuejia.com/h5_share_03.jpg',// 分享图标
                    success:function(){
                        doShareDone()
                    },
                    cancel:function(){
                    doShareCancel()
                    }
                })
            });```
            
    
    

你可能感兴趣的:(h5页面调用微信jssdk分享)