ReactJs微信分享封装

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

fxxqq / 6fedcom.github.io

ReactJs微信分享封装 #110