Detailed code explanation React Js WeChat sharing package

The content of this article is a detailed code explanation of React Js WeChat sharing package, which has a certain reference value. Friends in need can refer to it

Without further ado, Directly upload the source code:

/**
 * 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,
        });

The above is the detailed content of Detailed code explanation React Js WeChat sharing package. For more information, please follow other related articles on the PHP Chinese website!