Vue项目 --- JSJDK微信分享朋友和朋友圈功能

1. 在Vue项目index.html引入官方js

https://res.wx.qq.com/open/js/jweixin-1.4.0.js 

2. src下新建文件夹 weixin/wxjdk.js，代码如下

import axios from 'axios'

export default {

    wxShowMenu: function() {

        let url = location.href; //获取当前页面地址

        axios.get('hyr/user/customApply/getJsapiTicket?url='+url).then(function(res) {

            var getMsg = res.data.resultBody;

            console.log(getMsg.appid,getMsg.timestamp,getMsg.nonceStr,getMsg.signature)

            wx.config({

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

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

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

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

                signature: getMsg.signature, //签名

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

                    'onMenuShareTimeline', //分享给好友

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

                ]

            });

            wx.ready(function() {

                //分享到朋友圈

                wx.onMenuShareTimeline({

                    title: "", // 分享标题

                    desc: "", //分享描述

                    link:url,

                    imgUrl: '' , // 分享图标

                });

                //分享给朋友

                wx.onMenuShareAppMessage({

                    title: "", // 分享标题

                    desc: "", // 分享描述

                    link:url,

                    imgUrl: '' , // 分享图标

                    success: function () {

                        // 成功回调函数

                    },

                    cancel: function () {

                        // 失败回调函数

                    }

                });

 });

})

}

}

3.  main.js中导入

import WXConfig from './weixin/wxsdk' // 微信分享

Vue.prototype.WXConfig = WXConfig

4. 页面调用

this.WXConfig.wxShowMenu();