Reactでの微信共有の使用

5622 ワード

 import wx from 'weixin-js-sdk'
const title = {
    myCollect: '    ',
    goodsDetail: '    ',
    loginCpn: '  ',
    registerCpn: '     ',
    forgetPasswordCpn: '    ',
    modifyPwdCpn: '      ',
    bindPhone: '      ',
    accountInfoCpn: '    ',
    modifyNickNameCpn: '    ',
    modifyPhoneCpn: '     ',
    modifyResetPwdCpn: '    ',
    searchListCpn: '  ',
    hotProducts: '    ',
    firstPage: '  -             ',
    searchPage: '    ',
    specialPage: '    ',
    personalCenter: '    ',
    goodsClassifyCpn: '    ',
    registerPhoneCpn: '    ',
    promotionPage: '        ',
    womenFashion: '        ',
    newProductHeat: '          ',
};
 componentDidMount() {
    this.commonFun();
   this.props.history.listen((e) => {
       this.commonFun(e.pathname);
   });
       wx.error((res) => {
            // config         error  ,           ,          config debug    ,       res     ,  SPA         。
          
        });
}
 commonFun = (pathNames = '') => {
        const session = window.sessionStorage, storage = window.localStorage;
        if (!session.getItem('initLink')) {
            session.setItem('initLink', window.location.href)
        }
        //  ios  ,            
        if (window.__wxjs_is_wkwebview !== true) {
            this.isIosFlag = false;
        }

        // ios          js-sdk  
        if (window.__wxjs_is_wkwebview === true) {
            this.isIosFlag = true;
        }
        let name = pathNames || this.props.history.location.pathname;
        let pathname = name.substring(1).split('/')[0];
        let detailPage = session.getItem('detailPages');
        this.origin = '';
        this.shareDesc = '         、      ,        ,        ,                       。';
        if ((pathname === 'newProductHeat' || pathname === 'myCollect' || pathname === 'specialPage' || pathname === 'searchPage') && detailPage) { //    
            let productId = session.getItem('productId');
            this.pathname = storage.getItem('shareTitle');
            this.shareImg = storage.getItem('shareImg');
            this.shareDesc = storage.getItem('shareDesc');
            this.origin = window.location.origin + '/goodsDetail/' + productId;
        } else if (pathname === 'goodsDetail') { //    
            this.pathname = storage.getItem('shareTitle');
            this.shareImg = storage.getItem('shareImg');
            this.shareDesc = storage.getItem('shareDesc');
            // this.origin = '';
        } else if (pathname === 'specialPage') {
            this.pathname = storage.getItem('shareTitle');
            this.shareImg = config.serverUrl + 'shareLogo.png';
        } else {
            // this.shareDesc = '';
            // this.origin = '';
            this.pathname = title[pathname];
            this.shareImg = config.serverUrl + 'shareLogo.png';
        }
        document.title = this.pathname || '        ';
        this.getJsSdkSignatureHttp();
    };
//    url  
    getJsSdkSignatureHttp = () => { //  jssdk  
        //           ,     url  ,    ?          ,   encodeURIComponent      
        axiosHttp('api/WeiXin/WeixinLogin/GetJsSdkSignature?url=' + (this.isIosFlag ? encodeURIComponent(window.sessionStorage.getItem('initLink')) : encodeURIComponent(window.location.href)), "", "GET").then((res) => {
            if (res.code === 200) {
                const {appId, timestamp, nonceStr, signature} = res.data;
                wx.config({
                    debug: false, //       ,     api         alert  ,         ,   pc   ,       log  ,  pc      。
                    appId: appId, //   ,        
                    timestamp: timestamp, //   ,        
                    nonceStr: nonceStr, //   ,        
                    signature: signature,//   ,  ,   1
                    jsApiList: [
                        'onMenuShareAppMessage',
                        'onMenuShareTimeline',
                        // 'updateAppMessageShareData',
                        // 'updateTimelineShareData',
                        //     1.4.0      ,             
                    ] //   ,     JS    ,  JS       2
                });
                let data = {
                    link: this.origin || window.location.href,
                    imgUrl: this.shareImg, //     
                    title: document.title || '        ', //     
                    desc: '',
                    success: () => {
                        //               
                    },
                    cancel: function () {
                        //               
                    }
                };


                wx.ready(() => {
                    //     
                    wx.onMenuShareAppMessage({...data, desc: this.shareDesc});
                    // wx.updateAppMessageShareData({...data, desc: this.shareDesc});

                    //      
                    wx.onMenuShareTimeline(data);
                    // wx.updateTimelineShareData(data);
                });
            }
        }).catch(e => {
            console.log(e);
        });
    };