Home > Web Front-end > JS Tutorial > Detailed code explanation React Js WeChat sharing package

Detailed code explanation React Js WeChat sharing package

零到壹度
Release: 2018-04-09 15:50:58
Original
2928 people have browsed it

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;
Copy after login
// 分享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;
Copy after login
//开启分享
        BaseComponent.wxUtils.optionMenu(true);
        BaseComponent.wxUtils.share({
            imgUrl: activityData.sharePicUrl,
            title: activityData.shareTitle,
            description: activityData.shareContent,
            link: url,
        });
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template