H5分享功能--带图标、说明

代码实现

index.vue

<template>
    <div id="app">
       <SelfSharePage v-if="share_data.title" :shareInfo="share_data" />  <!-- 引用公用分享文件 -->
    </div>
</template>

data() {
        return {
            share_data:{//动态获取需要描述的内容
                img: "",
                title:'',
                intro:'',
            },
        };
    },

SelfSharePage.vue

<template>
    <div>

    </div>
</template>

<script>
import wx from 'weixin-js-sdk'//引用微信分享插件
import {shareUrlApi} from "../../api/index"//后端获取分享条件参数

export default {
    props:['shareInfo'],
    data() {
        return {
            img:'',
            title:'',
            intro:'',
            link:'',
        };
    },
    methods: {
        getWeiXinShare(s_img,s_title,s_intro,s_link){
            this.$axios.post(shareUrlApi,{
                url:window.location.href.split("#")[0]
            }).then((res)=>{
                if(parseInt(res.data.errCode)>=0){
                    wx.config({
                        debug: false,          // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: res.data.data.appId,         // 必填，公众号的唯一标识
                        timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
                        nonceStr: res.data.data.nonceStr,   // 必填，生成签名的随机串
                        signature: res.data.data.signature, // 必填，签名，见附录1
                        jsApiList: [
                            'onMenuShareTimeline',
                            'onMenuShareAppMessage',
                        ]
                    });

                    wx.ready(function () {
                        //分享到朋友圈
                        wx.onMenuShareTimeline({
                            title: s_title,   // 分享时的标题
                            // link: window.location.href.split("#")[0],     // 分享时的链接
                            link:s_link,
                            imgUrl: s_img,    // 分享时的图标
                            desc: s_intro, 
                            success: function () {
                                console.log("分享成功");
                            },
                            cancel: function () {
                                console.log("取消分享");
                            }
                        });
                        //分享给朋友
                        wx.onMenuShareAppMessage({
                            title:s_title,
                            desc: s_intro, 
                            link: s_link,
                            imgUrl: s_img,
                            type: '',
                            dataUrl: '', 
                            success: function () {
                                console.log("分享成功");
                            },
                            cancel: function () {
                                console.log("取消分享");
                            }
                        });
                       
                    })
                }
                else{

                }
            }).catch((err)=>{
                console.log(err)
            })
        }
    },
    mounted() {
        this.img=this.shareInfo.img?this.shareInfo.img:'参数为空时默认图片'
        this.title=this.shareInfo.title?this.shareInfo.title:'参数为空时默认标题'
        this.intro=this.shareInfo.intro?this.shareInfo.intro:'参数为空时默认说明'
        this.link=this.shareInfo.link?this.shareInfo.link:window.location.href.split("#")[0]
        this.getWeiXinShare(this.img,this.title,this.intro,this.link)
    }
};
</script>

<style  scoped>

</style>