H5微信分享

父组件调用

// 分享
sharePage() {
    let me = this;
    this.shareConfig = {
        url: 'http://www.baidu.com',
        title: '测试',
        desc: 'desc-----',
        img: 'https://www.baidu.com/img/dong_54209c0ff3da32eecc31f340c08a18f6.gif',
        type: 2
    };
    // 浏览器默认分享优先级最高
    if (window.navigator.share === undefined) {
        this.$refs.shareInfo.shareShow();
    }
    else {
        window.navigator.share({
            title: this.config.title,
            text: this.config.desc,
            url: this.config.url
        }).then(() => {
            me.$refs.shareInfo.shareShow();
        }).catch(err => {
            console.log(err);
        });
    }
}

子组件

<template>
<section>
    <nut-actionsheet :is-visible="isVisible" 
        @close="shareShow">
        <div slot="custom" class="custom-wrap">
            <div class="share-l" @click="handleShare(1)">朋友圈</div>
            <div class="share-r" @click="handleShare(8)">好友</div>
        </div>
    </nut-actionsheet>
</section>
</template>
<script>

import commonjs from './common';
import jwx from 'weixin-js-sdk';

export default {
    data() {
        return {
            isVisible: false,
            qqBridgeLoaded: false
        };
    },
    props: [
        'config'
    ],
    mixins: [commonjs],
    components: {
        
    },
    created() {
        let UA = navigator.appVersion;

        /**
         * 是否是 UC 浏览器
         */
        this.uc = UA.split('UCBrowser/').length > 1 ? 1 : 0;

        /**
         * 判断 qq 浏览器
         * 然而qq浏览器分高低版本
         * 2 代表高版本
         * 1 代表低版本
         */
        this.qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0;

        /**
         * 是否是微信
         */
        this.wx = /micromessenger/i.test(UA);

        /**
         * 浏览器版本
         */
        this.qqVs = this.qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0;
        this.ucVs = this.uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0;

        this.os = this.osType();

    },
    methods: {
        shareShow() {
            this.isVisible = !this.isVisible;
            if (this.isVisible) {
                this.initwx(this.config);
                this.loadqqApi(() => {
                    this.qqBridgeLoaded = true;
                });
            }
        },
        osType() {
            let ua = navigator.userAgent;

            if (/iphone|ipod/i.test(ua)) {
                return 1;
            } else if (/android/i.test(ua)) {
                return 2;
            } else {
                return 0;
            }
        },
        initwx(config) {
            this.$axios({
                url: '/bizcrm/prism/followUpRecord',
                // url: '/bizcrm/prism/wechatShare',
                method: 'POST',
                data: {
                    params: {
                        url: config.url
                    }
                }
            }).then(res => {
                let self = this;
                self.readFlag = false;
                if (+res.code === 0) {
                    const jsApiList = ['onMenuShareTimeline', 'onMenuShareAppMessage'];
                    jwx.config({
                        debug: true,
                        appId: 'wxd981cc94fb1a8d81',
                        timestamp: res.data.timeStamp,
                        nonceStr: res.data.nonceStr,
                        accessToken: res.data.accessToken,
                        signature: res.data.signature,
                        jsApiList: jsApiList
                    });
                    jwx.ready(() => {
                        self.readFlag = true;
                    });

                    jwx.error(function (res) {
                        self.readFlag = false;
                        console.error(res);
                    });
                }
            }).catch(res => {
            });
        },
        handleShare(type) {
            let me = this;
            if (typeof type !== 'undefined') {
                this.config.type = type;
            }

            try {
                if (this.uc) {
                    this.ucShare(this.config);
                    me.isVisible = false;
                }
                else if (this.qq && !this.wx) {
                    this.qqShare(this.config);
                    me.isVisible = false;
                }
                else if (this.wx) {
                    this.wxShare(this.config);
                }
                else {
                    // if (window.navigator.share === undefined) {
                        this.wxShare(this.config);
                    // }
                    // else { // 浏览器默认分享
                    //     window.navigator.share({
                    //         title: this.config.title,
                    //         text: this.config.desc,
                    //         url: this.config.url
                    //     }).then(() => {
                    //         me.isVisible = false;
                    //     }).catch(err => {
                    //         console.log(err);
                    //     });
                    // }
                }
            }
            catch (e) {}
        },
        // UC浏览器分享
        ucShare(config) {
            // 关于platform
            // ios: kWeixin || kWeixinFriend;
            // android: WechatFriends || WechatTimeline
            // uc 分享会直接使用截图

            let platform = '';
            let shareInfo = null;

            // 指定了分享类型
            if (config.type) {
                if (+this.os === 2) {
                    platform = +config.type === 1 ? 'WechatTimeline' : 'WechatFriends';
                } else if (+this.os === 1) {
                    platform = +config.type === 1 ? 'kWeixinFriend' : 'kWeixin';
                }
            }

            shareInfo = [config.title, config.desc, config.url, platform, '', '', ''];

            // android
            if (window.ucweb) {
                window.ucweb.startRequest && window.ucweb.startRequest('shell.page_share', shareInfo);
                return;
            }

            if (window.ucbrowser) {
                window.ucbrowser.web_share && window.ucbrowser.web_share.apply(null, shareInfo);
                return;
            }
        },
        // qq 浏览器分享函数
        qqShare(config) {
            let type = config.type;

            // 微信好友 1, 微信朋友圈 8
            type = type ? ((type === 1) ? 8 : 1) : '';

            let share = function () {
                let shareInfo = {
                    url: config.url,
                    title: config.title,
                    description: config.desc,
                    'img_url': config.img,
                    'img_title': config.title,
                    'to_app': type,
                    'cus_txt': ''
                };

                if (window.browser) {
                    window.browser.app && window.browser.app.share(shareInfo);
                } else if (window.qb) {
                    window.qb.share && window.qb.share(shareInfo);
                }
            };

            if (this.qqBridgeLoaded) {
                share();
            } else {
                this.loadqqApi(share);
            }
        },

        // qq浏览器下面 根据不同版本 加载对应的bridge
        loadqqApi(cb) {
            // qq == 0
            if (!this.qq) {
                return cb && cb();
            }

            let script = document.createElement('script');
            script.src = (+this.qq === 1) ? '//3gimg.qq.com/html5/js/qb.js' : '//jsapi.qq.com/get?api=app.share';

            /**
             * 需要等加载过 qq 的 bridge 脚本之后
             * 再去初始化分享组件
             */
            script.onload = function () {
                cb && cb();
            };

            document.body.appendChild(script);
        },
        // 微信浏览器分享
        wxShare(config) {
            let me = this;
            if (+config.type === 8) { // 好友
                jwx.onMenuShareAppMessage({
                    title: config.title, // 分享标题
                    desc: config.desc, // 分享描述
                    link: config.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: config.img, // 分享图标
                    type: 'link', // 分享类型,music、video或link，不填默认为link
                    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                    success: () => {
                        me.isVisible = false;
                    }
                });
            }
            else { // 朋友圈
                jwx.onMenuShareTimeline({
                    title: config.title, // 分享标题
                    desc: config.desc, // 分享描述
                    link: config.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: config.img, // 分享图标
                    type: 'link', // 分享类型,music、video或link，不填默认为link
                    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                    success: () => {
                        me.isVisible = false;
                    }
                });
            }
        }
    },

    destroyed() {
    }
};
</script>
<style lang='less' scoped>
.custom-wrap {
    width: 100%;
    height: 660px;
    display: flex;
    justify-items: flex-start;
    align-content: center;
    font-size: 42px;
    .share-l {
        width: 50%;
        height: 100%;
        background-image: url(../../assets/share.png);
        background-repeat: no-repeat;
        background-position: 50% 180px;
        background-size: auto 150px;
        padding-top: 350px;
        text-align: center;
    }
    .share-r {
        width: 50%;
        height: 100%;
        background-image: url(../../assets/share.png);
        background-repeat: no-repeat;
        background-position: 50% 180px;
        background-size: auto 150px;
        padding-top: 350px;
        text-align: center;
    }
}
</style>