微信公众号分享到朋友圈 vue + node + express

242 阅读1分钟

前端页面介入微信sdk,只需要正确传入微信的配置 config,分享的时候必须是外网域名,并且在页面加载的时候就执行

wx.config({ 
 // 可以开启debug模式,页面会alert出错误信息 
 debug: true,
 appId:'',
 timestamp,
 nonceStr:noncestr,
 signature,
 // 配置所需的API列表 
 jsApiList: ['onMenuShareTimeline']
 }); 
 //分享朋友圈只有成功回调
 wx.ready(function(){ 
  wx.onMenuShareTimeline({ 
    title: '测试一下', // 分享标题 
    link: 'http://yourdomain', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致                            
    success: function () {
      vant.Toast('成功'); 
    }
 });
})   

后端

1.获取access_token

api.weixin.qq.com/cgi-bin/tok… 

2. 用access_token获取 jsapiTicket

api.weixin.qq.com/cgi-bin/tic…

3. 用签名算法生成signature

4.返回参数给前端传入wx.config

生成签名是否正确可以用mp.weixin.qq.com/debug/cgi-b…校验

 wx.config debug: true 开启时页面可以看到具体的错误信息,一定要注意传入的后端用于生成签名的url一定不能硬编码,必须是从前端动态传入 encodeURIComponent(location.href.split('#')[0]),后端接收时decodeURIComponent(req.query.url)

附上测试demo longqiongcn.nat300.top ,必须在微信里面打开