這個問題折磨了好久锯厢，問了很多人都覺得很簡單海渊，的確很簡單相對于做過了的人來說的話，的確如此哲鸳，但是第一次做的話臣疑，太多坑要踩了，決定記錄下來
1徙菠、公眾號配置：
如果你們的公眾號有專人保管讯沈，那么跟他說把安全域名加一下，安全域名用于微信的驗證婿奔，沒有這一步操作缺狠，下面的都白搭。比如我們的測試公眾號萍摊，綁定的就是我們測試服務器的域名挤茄。同理，生產也是如此冰木。
2穷劈、后端配置VUE:
要想使用微信的JS-SDK功能，需要生成簽名踊沸，配合appId才能使用歇终，這些步驟通常是由后端生成的。這里省去3000字描述如何生成簽名逼龟，反正你找后端同學就對了评凝。
3、前端配置
終于輪到我們前端上場了腺律，啰嗦了那么多奕短，下面讓我們正式起飛宜肉。
4，安裝微信JS-SDK
首先我們通過npm 安裝 微信的js-sdk翎碑，當然你也可以在index.html頁面中直接加
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
引用崖飘，哪種方式都可以。
//安裝
npm install weixin-js-sdk --save
//在需要使用的路由里進行引用 也可以進行全局引用
import wx from 'weixin-js-sdk'
話不多說杈女，先上代碼了
//微信分享
WeChatshare(){
let that=this;
let data={url:window.location.href.split('#')[0]};
this.axios.post('/api/v1/signture',data)
.then((res)=>{
wx.config({
debug: false, //開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)吊圾，可以在pc端打開达椰，參數(shù)信息會通過log打出，僅在pc端時才會打印项乒。
appId: res.data.data.appId, //必填啰劲，公眾號的唯一標識
timestamp: res.data.data.timestamp, // 必填，生成簽名的時間戳
nonceStr: res.data.data.nonceStr, // 必填檀何，生成簽名的隨機串
signature: res.data.data.signature, // 必填蝇裤，簽名
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
});
//拼接當前地址
let shareUrl=window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1];
shareUrl = shareUrl.split('#')[0] + 'static/html/redirect.html?app3Redirect=' + encodeURIComponent(shareUrl);
wx.ready(function () {
//分享給朋友
wx.onMenuShareAppMessage({
title: that.fenxi_title,
desc: that.fenxi_describe,
link: shareUrl,
imgUrl: that.fenxi_img,
success: function (res) {
alert('分享成功频鉴！');
},
cancel:function(res){
alert('分享失斔ü肌！');
}
})
//分享到朋友圈
wx.onMenuShareTimeline({
title: that.fenxi_title,
link: shareUrl,
imgUrl: that.fenxi_img,
success: function (res) {
alert('分享成功垛孔！');
},
cancel:function(res){
alert('分享失斉核Α！');
}
})
});
})
.catch((res)=>{
// console.log(res);
})
},
還是分解下吧
一開始還是先查看微信公眾平臺
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來周荐，若要查看傳入的參數(shù)狭莱，可以在pc端打開，參數(shù)信息會通過log打出概作，僅在pc端時才會打印腋妙。
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填讯榕，生成簽名的時間戳
nonceStr: '', // 必填骤素，生成簽名的隨機串
signature: '',// 必填，簽名
jsApiList: [] // 必填愚屁，需要使用的JS接口列表
});
wx.ready(function () {
//分享給朋友
wx.onMenuShareAppMessage({
title: "",// 分享標題
desc: "",// 分享描述
link: "",// 分享鏈接谆甜，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: "",// 分享圖標
success: function (res) {
alert('分享成功！');
},
cancel:function(res){
alert('分享失敿隆规辱！');
}
})
//分享到朋友圈
wx.onMenuShareTimeline({
title: "",// 分享標題
link: "",// 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: "",// 分享圖標
success: function (res) {
alert('分享成功栽燕！');
},
cancel:function(res){
alert('分享失敽贝改淑！');
}
})
});
根據(jù)sdk文檔的教程來，如果都沒問題的話還是報簽名錯誤浴讯，那應該是后臺的問題了
后面可能還會出現(xiàn)分享的鏈接一直跳轉至首頁問題朵夏，我用的vue 帶hash '#/' 微信分享后點開鏈依然是首頁，百度了下榆纽，記錄下來
第一種方法
網(wǎng)上很多網(wǎng)友都說這個方法可行 通過嘗試后發(fā)現(xiàn)依然還是出現(xiàn)那個問題
//將地址拼接
window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1]
第二種方法 使用url重定向 測試有效
在static文件夾下仰猖，新建html/redirect.html。
redirect.html 內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
let url = location.href.split('?')
let pars = url[1].split('&')
let data = {}
pars.forEach((n, i) => {
let p = n.split('=')
data[p[0]] = p[1]
})
if (!!data.app3Redirect) {
self.location = decodeURIComponent(data.app3Redirect)
}
</script>
</body>
</html>
然后最后的地址
let shareUrl=window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1];
shareUrl = shareUrl.split('#')[0] + 'static/html/redirect.html?app3Redirect=' + encodeURIComponent(shareUrl);//需要分享的地址
到了這里就結束了奈籽，可能寫的不是太好饥侵，請打算指教
