vue爬坑路之----微信转发分享功能

最近做VUE转发分享功能，转发出去的页面没有详情及图片，搜集了一些资料，原来是因为转发链接写成了后台传来的链接地址了【笑哭自己】，我们前端应该获取当前页面的URL并传递给后台，让后端使用我们的URL，而不是自己接口URL，以此记录下来，以防再入坑

一、index.html中引入微信官方分享 js

二、在 【src–assets–js】下新建JS文件 wx.jsapi.js

import axios from ‘axios’

export default {

wxShowMenu: function() {

    let data = location.href.split('#')[0]; //获取当前页面地址

    axios.post('后台接口地址',{url: data}).then(function(res) {

        var getMsg = res.data.data;

        wx.config({

            debug: false, //生产环境需要关闭debug模式

            appId: getMsg.appId, //appId通过微信服务号后台查看

            timestamp: getMsg.timestamp, //生成签名的时间戳

            nonceStr: getMsg.nonceStr, //生成签名的随机字符串

            signature: getMsg.signature, //签名

            jsApiList: [ //需要调用的JS接口列表

                'onMenuShareTimeline', //分享给好友

                'onMenuShareAppMessage', //分享到朋友圈

                'showMenuItems',

                'hideMenuItems'

            ]

        });

        wx.ready(function() {

            wx.checkJsApi({

                jsApiList: ["showMenuItems"],

                success: function(res) {

                    wx.showMenuItems({

                        menuList: [

                            'menuItem:share:appMessage', //发送给朋友

                            'menuItem:share:timeline' //分享到朋友圈

                        ]

                    });

                }

            });

            //分享到朋友圈

            wx.onMenuShareTimeline({

                title: "", // 分享标题

                desc: "", //分享描述

                link: location.href.split('#')[0], // 分享链接，一定要获取当前页面的URL

                imgUrl: '' , // 分享图标

            });



            //分享给朋友

            wx.onMenuShareAppMessage({

                title: "", // 分享标题

                desc: "", // 分享描述

                link: location.href.split('#')[0], // 分享链接

                imgUrl: '' , // 分享图标

                

            });

        });

    })

}

}
三、在main.js中引入并挂在vue的原型上

import WXConfig from './assets/js/wx.jsapi.js' // 微信分享
Vue.prototype.WXConfig = WXConfig

四、在需要转发的页面进行import 引用并在mounted中执行

import WXConfig from '@/assets/js/wx.jsapi'

mounted(){
        this.WXConfig.wxShowMenu();
    },

至此，微信转发完成，新手VUE，欢迎大牛指导【比心】