微信jssdk分享朋友圈自定义图片标题功能的react前端实现

 

//首先在html页面中引入jssdk脚本，然后wx对象就可以通过window.wx来获得

//

//下面是js文件中和本功能有关的所有代码段

import axios from 'axios';

const shareJs = function(jssdk, options) {

window.wx.config({

debug: false,

appId: jssdk.appId,

timestamp: parseInt(jssdk.timestamp),

nonceStr: jssdk.nonceStr,

signature: jssdk.signature,

jsApiList: [

"onMenuShareTimeline",

"onMenuShareAppMessage"

]

});

var defaults = {

title: "分享的标题",

imgUrl: 'https://tup.iheima.com/sport.png', //分享是封面图片，不能为空

success: function() {}, //分享成功触发

cancel: function() {} //分享取消触发，需要时可以调用

}

options = Object.assign({}, defaults, options);

window.wx.ready(function() {

var thatopts = options;

window.wx.onMenuShareTimeline({

title: thatopts.title, // 分享标题

imgUrl: thatopts.imgUrl, // 分享图标

success: function() {

// alert("成功");

},

cancel: function() {

// alert("失败")

}

});

window.wx.onMenuShareAppMessage({

title: thatopts.title, // 分享标题

imgUrl: thatopts.imgUrl, // 分享图标

success: function() {

// alert("成功");

},

cancel: function() {

// alert("失败")

}

});

});

}



//发圈自定义

let share_options={

title: "测试标题", // 分享标题，需要在这里改成你从后台获取的数据

imgUrl: "测试图标" // 分享图标，需要在这里改成你从后台获取的数据（URL）

}



let urlobj={

url:window.location.href

}

let wc_faquan_option = {//请求对象

method:'post',

url:'/jssdkd',

timeout: 30000,

params: null,

data: JSON.stringify(urlobj),

headers: {

"Content-Type":"application/json"//json通信必须加上这个 如果是form表单使用application/x-www-form-urlencoded'

},

withCredentials: true //是否携带cookies发起请求

}



axios.request(wc_faquan_option)

.then(function (res) {

let jssdkd =res.data;

shareJs(jssdkd, share_options);





})