记vue的一个微信分享

项目需求： 对每个单页面进行微信分享的标题 描述 缩略图和链接设置 

1：引入微信sdk文件  安装依赖 

npm install weixin-js-sdk --save

2：在assets下新建一个js文件   wx_share.js     

import axioss from 'axios'

import wx from 'weixin-js-sdk'			//微信sdk依赖

const jsApiList = ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ','onMenuShareWeibo']
 //要用到微信AP

//  
export function getJSSDK(dataForWeixin) {
    let gourl = window.location.href.split("#")[0];
    let reqData = {};
    reqData.gourl = gourl;
    axioss.get('http://weixin.yizijob.com/activity/gotoPage.do' , {
        params:reqData
    }).then(res => {
      console.log(res)
      wx.config({
       
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        //下面这里不用管  让后台看一下  让他返给你 
        appId: 'wxc6f2e83fc1f53576', // 必填，公众号的唯一标识
        timestamp: res.data.content.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.content.nonceStr, // 必填，生成签名的随机串
        signature: res.data.content.signature, // 必填，签名
        jsApiList: [
            'onMenuShareAppMessage',
            'onMenuShareQQ'
        ] // 必填，需要使用的JS接口列表
      })
      console.log(res) //打印测试
      wx.ready(function () {
        wx.onMenuShareAppMessage({
          title: dataForWeixin.title,
          desc: dataForWeixin.desc,
          link: dataForWeixin.linkurl,
          imgUrl: dataForWeixin.img,
          trigger: function trigger(res) { },
          success: function success(res) {
            console.log('已分享');
          },
          cancel: function cancel(res) {
            console.log('已取消');
          },
          fail: function fail(res) {
            //alert(JSON.stringify(res));
          }
        });
        // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareTimeline({
          title: dataForWeixin.title,
          link: dataForWeixin.linkurl,
          imgUrl: dataForWeixin.img,
          trigger: function trigger(res) {
            // alert('用户点击分享到朋友圈');
          },
          success: function success(res) {
            //alert('已分享');
          },
          cancel: function cancel(res) {
            //alert('已取消');
          },
          fail: function fail(res) {
            //alert(JSON.stringify(res));
          }
        });
      // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
      wx.onMenuShareQQ({
          title: dataForWeixin.title,
          desc: dataForWeixin.desc,
          link: dataForWeixin.linkurl,
          imgUrl: dataForWeixin.img,
          trigger: function trigger(res) {
            //alert('用户点击分享到QQ');
          },
          complete: function complete(res) {
            //alert(JSON.stringify(res));
          },
          success: function success(res) {
            //alert('已分享');
          },
          cancel: function cancel(res) {
            //alert('已取消');
          },
          fail: function fail(res) {
            //alert(JSON.stringify(res));
          }
        });
        // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareWeibo({
          title: dataForWeixin.title,
          desc: dataForWeixin.desc,
          link: dataForWeixin.linkurl,
          imgUrl: dataForWeixin.img,
          trigger: function trigger(res) {
            //alert('用户点击分享到微博');
          },
          complete: function complete(res) {
            //alert(JSON.stringify(res));
          },
          success: function success(res) {
            //alert('已分享');
          },
          cancel: function cancel(res) {
            //alert('已取消');
          },
          fail: function fail(res) {
          //alert(JSON.stringify(res));
          }
        });
      })
      wx.error(function (res) {
            //alert("微信验证失败");
      });
    })
  }

3：在需要进行微信分享的vue页面进行引入方法  

import { getJSSDK } from "@/assets/js/wx_share.js"; // 微信分享

mounted(){
	let obj = {
		title: "my title",		  //分享标题
		desc: 'my desc',		  //分享内容
		linkurl: '##',            //分享链接
		img: "xxx.png",			  //分享内容显示的图片
	}
	getJSSDK(obj)
}