一、vue+ h5页面如何分享；
1、安装sdk
npm install weixin-js-sdk --save
2、引入 sdk
3、config接口注入权限
4、因为很多页面要调用，所以封装了函数可以复用 以下是代码
```
var wx_share = new Array(4);
wx_share[0] = window.location.href.split('#')[0] + "/static/image/cart/shareLogo.png"; // share_img 分享缩略图图片
wx_share[1] = window.location.href.split('#')[0]; // share_link 分享页面的url地址，如果地址无效，则分享失败;
wx_share[2] = "零元制作优质广告，一元收获“万+”流量，低投入，高回报，宣传无忧。";// share_desc
wx_share[3] = "GGGO广告狗-推广好帮手，制作无忧，一元起投";// share_title
import { wxShare } from '@/api/pages'
import wx from 'weixin-js-sdk'
export const weiXinShare = (shareUrl) => {
wxShare({url: window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1]})
.then(res => {
if (res.code === "0000") {
//配置微信信息
wx.config({
// debug : true, // true:调试时候弹窗
appId : res.data.appId, // 微信appid
timestamp : res.data.timestamp, // 时间戳
nonceStr : res.data.nonceStr, // 随机字符串
signature : res.data.signature, // 签名
jsApiList : [
// 所有要调用的 API 都要加到这个列表中
'onMenuShareTimeline', // 分享到朋友圈接口
'onMenuShareAppMessage', // 分享到朋友接口
'onMenuShareQQ', // 分享到QQ接口
'onMenuShareQZone', // 分享到QQ空间
'onMenuShareWeibo' // 分享到微博接口
]
});
wx.ready(function() {
// 微信分享的数据
var shareData = {
"imgUrl" : wx_share[0], // 分享显示的缩略图地址
"link" : window.location.href.split('#')[0] + 'static/html/redirect.html?vueRedirect=' + encodeURIComponent(shareUrl), // 分享地址
"desc" : wx_share[2], // 分享描述
"title" : wx_share[3], // 分享标题
success : function() {
// 分享成功可以做相应的数据处理
let data = orderId
this.$router.push({name: 'checkstand', query: { data }})
},
cancel : function() {
// 用户取消分享后执行的回调函数
// alert("分享取消22");
let data = orderId
this.$router.push({name: 'checkstand', query: { data }})
}
};
wx.onMenuShareTimeline(shareData);
wx.onMenuShareAppMessage(shareData);
wx.onMenuShareQQ(shareData);
wx.onMenuShareQZone(shareData);
wx.onMenuShareWeibo(shareData);
});
wx.error(function(res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，
// 具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，
//对于SPA可以在这里更新签名。
// alert("好像出错了！！");
});
} else {
this.$message({
showClose: true,
type: 'error',
message: res.msg
})
}
});
}
```
当然，这些都是微信支持的一些方法，很简单，拿来使用就可以
在这个项目中主要是遇到的一个坑，项目是用vue写的，微信会自动截取url #后面的部分，导致分享所有的页面都是首页。
这个问题主要是要了解微信是什么时候把页面的地址截取的，经过反复测试，发现在页面打开加载完后的链接已经是截取了的，所以每次得到的链接自然就是不完整的。经测试，在created钩子函数链接是完整的，所以在分享页面created函数获取链接 并传参，就可以解决此问题
created() {
weiXinShare(window.location.href)
}
