小程序分享功能

在软件开发中，经常会被用到的功能之一：分享----悄悄咪咪的献给小伙伴

onShareAppMessage（）

这个函数就是在分享的时候必须要用到的钩子：分享跳转的页面

这里我的分享是封装的组件 ，大伙使用的时候要看清楚了哦~

father.vue

• 父组件中申明相对应的参数

data (){
	return{
		share: {
                    sharehrefTitle: '', // 分享标题
                    shareImg: '', // 分享图片
                    ewmImg: '', // 保存的海报
                    shareContent: '', // 分享内容
                    shareHref: '', // H5 分享地址
                    shareHref2: '', // 小程序分享页面路径
                    shareMask: false, // 微信小程序下的显示分享判断
                    saveEWM: false, // 显示海报
                    // isDistribution: false, // 是否是分销商品
                    
                    prevent:true,
                    is_sale:true,
                },
        }
}

• 这是小程序分享的时候会用到的函数，哪个页面有分享功能就写到哪个页面（我这里是写在父组件中）

onShareAppMessage: function(res) {
            this.share.shareMask = false
            return {
                title: this.share.sharehrefTitle,
                path: this.share.shareHref2,
                imageUrl: this.share.shareImg,
                bgImgUrl: this.share.shareImg
            };
        },

getGoodsDetailParams () {
                var url = uni.getStorageSync('h5_url');
                this.share.shareHref = url + 'pages/index/share?pages=goodsDetail&id=' + this.prevet_id + '&present=true&is_buy=true&fatherId' + uni.getStorageSync('user_id'); //h5的分享
                this.share.shareHref2 = '/pagesC/giftBag/goodsDetail?id=' + this.prevet_id + '&present=true&is_buy=true&fatherId' + uni.getStorageSync('user_id');
                
                this.share = Object.assign({}, this.share)
            },
//分享礼包
showShareMask() {
   this.getGoodsDetailParams();
   this.$refs.share.showShareMask();
},

children.vue

data() {
        return {
            is_shop: false, // 是否是店铺分享
            shop_id: 1, // 店铺分享id
            sharehrefTitle: '', // 分享标题
            shareImg: '', // 分享图片
            ewmImg: '', // 保存的海报
            shareContent: '', // 分享内容
            shareHref: '', // H5 分享地址
            shareHref2: '', // 小程序分享页面路径
            shareDiv: false,
            isDistribution: false, // 是否是分销商品
            shareMask: false, // 微信小程序下的显示分享判断
            shareH5Mask: false, // H5下的显示分享判断
            saveEWM: false, // 显示海报
            shareWay: [
                // #ifndef MP-WEIXIN
                {
                    name: '微信',
                    imgUrl: this.LaiKeTuiCommon.LKT_ROOT_VERSION_URL + 'images/icon1/wechat.png'
                },
                {
                    name: '朋友圈',
                    imgUrl: this.LaiKeTuiCommon.LKT_ROOT_VERSION_URL + 'images/icon1/fdc.png'
                },
                {
                    name: '二维码分享',
                    imgUrl: this.LaiKeTuiCommon.LKT_ROOT_VERSION_URL + 'images/icon1/ewmShare.png'
                }
                // #endif
            ],
        }
    },

// 显示分享弹窗
        showShareMask() {
            // #ifdef H5
            setTimeout(() => {
                this.shareH5Mask = true;
            }, 300)

            // #endif

            // #ifndef H5
            // #ifdef MP-WEIXIN
            this.shareMask = true;
            // #endif
            // #ifndef MP-WEIXIN
            // #ifndef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
            this.shareDiv = true;
            // #endif
            // #endif
            // #endif
        },
        // 关闭分享弹窗和海报弹窗
        _closeAllMask() {
            this.shareH5Mask = false;
            this.shareMask = false;
            
            this.saveEWM = false;
        },
        /**
         * 显示分享海报
        */
        showSaveEWM(string) {
            if (this.is_shop) {
                this.LaiKeTuiShopEWM();
            } else if(this.share.prevent || this.share.giftFlag){
                this.LaiKeTuiShowGiftEWM(string)
            }else{
                this.LaiKeTuiShowSaveEWM(string);
            }
        },

• 我这边是做了店铺分享，商品分享，礼包/礼品卡分享

/**
         * 显示商品分享海报
        */
        LaiKeTuiShowSaveEWM(string) {
            let me = this;
            // #ifdef APP-PLUS
            string = 'app'
            // #endif
            // #ifdef MP-ALIPAY
            string = 'ali'
            // #endif
            // #ifdef MP-WEIXIN
            string = 'wx'
            // #endif
            // #ifdef MP-TOUTIAO
            string = 'tt'
            // #endif
            var data = {
                module: 'app',
                action: 'getcode',
                m: 'share',
                proId: me.pro_id,
                href: me.shareHref,
                path: me.shareHref.replace(uni.getStorageSync('h5_url'), ''),
            }
            
            if (this.type === 'JF') {
                data.share_type = 2
            } else if (this.type === 'JP') {
                data.type = 'JP'
                data.bindding_id = this.$store.state.bindding_num
            } else if (this.isDistribution) {
                data.type = 'fx'
                data.fx_id = me.fx_id
            }
            
            if(this.share.is_sale && this.share.giftFlag){
                var data = {
                    module:'app',
                    action:'getcode',
                    m:'gift_bag_share',
                    id:me.pro_id // 礼包ID
                }
            }
            
            if(this.share.is_sale && this.share.prevent){
                var data ={
                    module:'app',
                    action:'getcode',
                    m:'gift_card_share',
                    id:this.pro_id // 礼品卡ID
                }
            }
            
            me.$req.post({data}).then(res => {
                console.log(res);
                
                if (res.code == 200) {
                    me.ewmImg = uni.getStorageSync('endurl') + res.data.imgUrl
                    me.saveEWM = true
                } else {
                    uni.showToast({
                        title: res.message,
                        duration: 1500,
                        icon: 'none'
                    })
                }
            })
        },
        /**
         * 显示礼包/礼品卡分享海报
        */
        LaiKeTuiShowGiftEWM(string) {
            let me = this;
            // #ifdef APP-PLUS
            string = 'app'
            // #endif
            // #ifdef MP-ALIPAY
            string = 'ali'
            // #endif
            // #ifdef MP-WEIXIN
            string = 'wx'
            // #endif
            // #ifdef MP-TOUTIAO
            string = 'tt'
            // #endif
            
            if(this.share.is_sale && this.share.giftFlag){
                var data = {
                    module:'app',
                    action:'getcode',
                    m:'gift_bag_share',
                    id:this.pro_id ,// 礼包ID
                    price:this.pro.price
                }
            }
            
            if(this.share.is_sale && this.share.prevent){
                var data ={
                    module:'app',
                    action:'getcode',
                    m:'gift_card_share',
                    id:this.pro_id // 礼品卡ID
                }
            }
            
            me.$req.post({data}).then(res => {
                console.log(res);
                
                if (res.code == 200) {
                    me.ewmImg = uni.getStorageSync('endurl') + res.data.imgUrl
                    me.saveEWM = true
                } else {
                    uni.showToast({
                        title: res.message,
                        duration: 1500,
                        icon: 'none'
                    })
                }
            })
        },

• 小程序的邀请：配合onShareAppMessage()函数

/**
         * 邀请
         * @param type
         * @param me
         * @constructor
         */
        LaiKeTuiInvite(type, me) {
            if (type == '二维码分享') {
                me.showSaveEWM('app')
                return
            }
            if (type == '朋友圈') {
                uni.share({
                    provider: 'weixin',
                    scene: 'WXSenceTimeline',
                    type: 0,
                    href: me.shareHref,
                    title: me.sharehrefTitle,
                    summary: me.shareContent,
                    imageUrl: me.shareImg,
                    success: function(res) {
                        me.fastTap = true
                        uni.showToast({
                            title: me.language.toasts.goodsDetailed.shareOk,
                            icon: 'none'
                        })
                    },
                    fail: function(err) {
                        me.fastTap = true
                        uni.showToast({
                            title: me.language.toasts.goodsDetailed.shareFail,
                            icon: 'none'
                        })
                    }
                })
            } else if (type == '微信') {
                let shareType = 2;
                if (me.LaiKeTuiCommon.IS_SHARE_WECHAT_MINI_PROGRAM && !me.is_shop) {
                    shareType = 5
                }

                let shareContent = me.shareContent;
                if (me.is_shop) {
                    shareContent = `我在${me.sharehrefTitle}发现了一件不错的商品，快来看看吧。`;
                }

                if (shareType === 2) {
                    uni.share({
                        provider: 'weixin',
                        scene: 'WXSceneSession',
                        type: 0,
                        href: me.shareHref,
                        title: me.sharehrefTitle,
                        summary: shareContent,
                        imageUrl: me.shareImg,
                        success: function(res) {
                            me.fastTap = true
                            uni.showToast({
                                title: me.language.toasts.goodsDetailed.shareOk,
                                icon: 'none'
                            })
                        },
                        fail: function(err) {
                            me.fastTap = true
                            uni.showToast({
                                title: me.language.toasts.goodsDetailed.shareFail,
                                icon: 'none'
                            })
                        }
                    })
                } else {
                    uni.share({
                        provider: 'weixin',
                        scene: 'WXSceneSession',
                        type: 5,
                        imageUrl: me.ewmImg,
                        title: me.sharehrefTitle,
                        miniProgram: {
                            id: me.LaiKeTuiCommon.WECHAT_MINI_PROGRAM_ID,
                            path: me.shareHref2,
                            type: 0,
                            webUrl: me.shareHref
                        },
                        success: function(res) {
                            console.log(res);
                        },
                        fail: function(err) {
                            console.error(err);
                        }
                    });
                }
                
                
            }
        },