记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) }