REACT 微信分享功能代码分享

参考各位大神的文章

写了好久终于写出来一个能用的REACT 微信分享功能。

需要注意的是后端的API需要得到正确的URL请求，返回的微信接口数据才是正确的。

单独写好微信分享的JS

import wx from ‘weixin-js-sdk’;
import axios from ‘axios’;

export default wxShareConfig;

在需要使用的组件引用这个组件。

import wxShareConfig from ‘./wx.js’;

在componentDidMount里应用

async componentDidMount(){
const id = this.props.match.params.id;
const localurl = window.location.href;
var sharetitle = ${res.data.posts.title} ;
var sharedesc = ${res.data.posts.title} ;
wxShareConfig(sharetitle,sharedesc,localurl);

}

下面的内容是代码，希望能帮到大家。


import wx from 'weixin-js-sdk';
import axios from 'axios';

const wxShareConfig = async (title, des, pageurl) => 
    let locationUrl = window.location.href.split('#')[0];
    const params = {
        pageurl : locationUrl
    };
    let resp = await axios.post('/api/getWxConfig', params);
    wx.config({
      debug: false,
      appId: resp.data.wxconfig.appId,
      timestamp: resp.data.wxconfig.timestamp,
      nonceStr: resp.data.wxconfig.nonceStr,
      signature: resp.data.wxconfig.signature,
      jsApiList: ['updateAppMessageShareData'],
    });
    wx.ready(() => {
      wx.updateAppMessageShareData({
        title: title,
        desc: des,
        link: pageurl,
        imgUrl: 'https://mmbiz.qpic.cn/mmbiz_jpg/ib8TmJgXU8fhqA4qrDZBEjDicLdjHcb7p5dcfKIzB3oSPf5FzGYyRK0fz3lloKxrDoJThEv7uIBPXfBePKRm8ibDg/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1',
	success: function () {
          console.log('share success');
         }
      });
     wx.updateTimelineShareData({
            title:  title,
            link: pageurl,
            imgUrl: 'https://mmbiz.qpic.cn/mmbiz_jpg/ib8TmJgXU8fhqA4qrDZBEjDicLdjHcb7p5dcfKIzB3oSPf5FzGYyRK0fz3lloKxrDoJThEv7uIBPXfBePKRm8ibDg/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1',
            success: function () {
                // 设置成功
            }
        });
    });
    wx.error(function (err){
        console.log(err)
    });
  };

export default wxShareConfig;