vue 封装微信分享

迈不过友情╰ 2022-04-13 20:20 222阅读 0赞

/\*----------------------------share.js----------------------------\*/

import wx from 'weixin-js-sdk'
    import qs from 'qs'
    import {Toast} from 'mint-ui'
    import axios from "axios";
    axios.defaults.headers.common["Content-Type"] ="application/json; charset=UTF-8";
    axios.defaults.headers.common["clientType"] = "H5";
    axios.defaults.withCredentials = false;
    
    /**
     *分享
     * @param _this 当前域
     * @param shareTitle 标题
     * @param shareUrl 链接
     * @param shareImg 图片
     * @param shareDesc 描述
     */
    export const  commonShare = (_this, shareTitle, shareUrl, shareImg, shareDesc) => {
        let url = location.href.split('#')[0];
        let params = qs.stringify({
            shareUrl: url     //shareUrl是根据你的后台需要的参数名
        });
        axios.post("后台接口",params).then(data=>{
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.data.appId, // 必填，公众号的唯一标识
                    timestamp: data.data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.data.noncestr, //注意：服务端签名和前端参数名大小写不一致
                    signature: data.data.signature, // 必填，签名，见附录1
                    jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
                wx.ready(function () {
                    wx.onMenuShareTimeline({
                    title: shareTitle, // 分享标题
                    link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: shareImg, // 分享图标
                    success: function () {
                        // 用户确认分享后执行的回调函数
                        Toast('分享成功！！！');
                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                        Toast('取消分享！！！');
                    }
                    });
                    wx.onMenuShareAppMessage({
                    title: shareTitle, // 分享标题
                    desc: shareDesc, // 分享描述
                    link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: shareImg, // 分享图标
                    type: "", // 分享类型,music、video或link，不填默认为link
                    dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
                    success: function () {
                        // 用户确认分享后执行的回调函数
                        Toast('分享成功！！！');
                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                        Toast('取消分享！！！');
                    }
                    });
                });
            }).catch(err=>{
                console.log("自定义分享失败"+err);
            })
        
    };

/\*----------------------------main.js----------------------------\*/

//设置为全局
    import {commonShare} from './components/utils/share'
    Vue.prototype.commonShare = commonShare;

/\*----------------------------使用----------------------------\*/

this.commonShare(this,"111",window.location.href,"333","444");
    //分享的图片路径最好不要乱写，不要本地图片

/\*----------------------------细节----------------------------\*/

假如二次分享不能使用的话，本人有个小技巧，默认在app.vue调用一次，可认为是默认分享