话不多说，直接上源代码：
/** * created by wuyakun on 2017/5/23. */import fetch from './fetchit'; import api_url from './url'; import share from './share';let wxutils = {};////////////////////////////////////////////////////////////////////////////////////////// 分享/////////////////////////////////////////////////////////////////////////////////////////** getshareinfo?type= type :goods 课程详情 team 团详情 id 课程id tid 团id * @param config * @param shareinfo {imgurl,title,description,link} */function share2wx(config, shareinfo) { const share = new share({ appid: config.appid, // 必填，公众号的唯一标识 timestamp: config.timestamp, // 必填，生成签名的时间戳 noncestr: config.noncestr, // 必填，生成签名的随机串 signature: config.signature, // 必填，签名 }); share.init(object.assign({}, shareinfo)); } function getconfig(shareinfo) { let href = window.location.href.split('#')[0]; const url = encodeuricomponent(href /*window.location.href*/); fetch.get(`${api_url.mobile.signature_path}?url=${url}`).then(data => { share2wx(data, shareinfo); }); }/** * @param shareinfo */wxutils.share = function (shareinfo) { getconfig(shareinfo); };////////////////////////////////////////////////////////////////////////////////////////// 分享结束/////////////////////////////////////////////////////////////////////////////////////////** * 是否开启右上角menu * @param open */wxutils.optionmenu = function (open = true) { if (open) { openoptionmenu(); } else { disabledoptionmenu(); } };/** * 是否禁用右上角 */function disabledoptionmenu() { if (typeof weixinjsbridge === "undefined") { if (document.addeventlistener) { document.addeventlistener('weixinjsbridgeready', onbridgeready(true), false); } else if (document.attachevent) { document.attachevent('weixinjsbridgeready', onbridgeready(true)); document.attachevent('onweixinjsbridgeready', onbridgeready(true)); } } else { onbridgeready(true); } }/** * 开启menu */function openoptionmenu() { if (typeof weixinjsbridge === "undefined") { if (document.addeventlistener) { document.addeventlistener('weixinjsbridgeready', onbridgeready(false), false); } else if (document.attachevent) { document.attachevent('weixinjsbridgeready', onbridgeready(false)); document.attachevent('onweixinjsbridgeready', onbridgeready(false)); } } else { onbridgeready(false); } } function onbridgeready(disable = true) { if (typeof weixinjsbridge !== "undefined") weixinjsbridge.call(disable ? 'hideoptionmenu' : 'showoptionmenu'); }/** * 隐藏微信网页底部的导航栏 * @param disable */wxutils.disabledtoolbar = function (disable = true) { document.addeventlistener('weixinjsbridgeready', function onbridgeready() { // 通过下面这个api隐藏底部导航栏 weixinjsbridge.call(disable ? 'hidetoolbar' : 'showtoolbar'); }); }; export default wxutils;
// 分享function share(config) { wx.config({ debug: false, // 开启调试模式 appid: config.appid, // 必填，公众号的唯一标识 timestamp: config.timestamp, // 必填，生成签名的时间戳 noncestr: config.noncestr, // 必填，生成签名的随机串 signature: config.signature, // 必填，签名，见附录1 jsapilist: ['onmenusharetimeline', 'onmenushareappmessage', 'onmenushareweibo'], // 必填，需要使用的js接口列表，所有js接口列表见附录2 }); } share.prototype = { constructor: share, init(config) { this.imgurl = config.imgurl; this.link = config.link; // this.musicpath = config.musicpath; this.description = config.description; this.title = config.title; wx.ready(() => { // if (this.musicpath) { // document.getelementbyid('musicicon').play(); // } this.tofriend(); this.totimeline(); }); wx.error(res => { console.log(`${res}`); }); }, tofriend() { wx.onmenushareappmessage({ imgurl: this.imgurl, link: this.link, title: this.title, desc: this.description, success: function () { // 用户确认分享后执行的回调函数 }, }); }, totimeline() { wx.onmenusharetimeline({ imgurl: this.imgurl, link: this.link, title: this.title, desc: this.description, success: function () { // 用户确认分享后执行的回调函数 }, }); }, };export default share;
//开启分享 basecomponent.wxutils.optionmenu(true); basecomponent.wxutils.share({ imgurl: activitydata.sharepicurl, title: activitydata.sharetitle, description: activitydata.sharecontent, link: url, });
以上就是代码详解react js 微信分享封装的详细内容。