問(wèn)題描述：
微信公眾號(hào)中（頁(yè)面均用vue）挖胃，分享出去的頁(yè)面杂靶，二次分享不能獲取縮略和描述；
APP內(nèi)嵌的H5頁(yè)面（有用vue寫(xiě)的頁(yè)面酱鸭，也有jsp頁(yè)面）吗垮，分享給好友或朋友圈，二次分享不能獲取縮略和描述凹髓；
工具：GetwxLink
問(wèn)題思考：
百度總結(jié)烁登，發(fā)現(xiàn)網(wǎng)友貢獻(xiàn)最多的就是在body之后加一個(gè)img標(biāo)簽并且設(shè)置display:none,雖然這種方法感覺(jué)不科學(xué)，但我還是嘗試了一下蔚舀，發(fā)現(xiàn)在微信6.5.5版本之后已經(jīng)失效了饵沧。分享只能通過(guò)設(shè)置微信的分享接口來(lái)實(shí)現(xiàn)縮略圖和簡(jiǎn)介的調(diào)用锨络，接通jssdk。
不管是微信公眾號(hào)中分享的內(nèi)容 還是 普通的H5頁(yè)面 都需要微信簽名驗(yàn)證的狼牺。
解決方案
1.在jsp頁(yè)面中
頁(yè)面引入
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="/js/common/shareJssdk.js"></script>
shareJssdk.js內(nèi)容為：
$(function(){
? ? var url = encodeURIComponent(location.href.split('#')[0]);
? ? //分享
? ? $.ajax({
? ? ? ? type : "get",
? ? ? ? url : "/phjf/api/v1/sys/getJssdkSgin",
? ? ? ? dataType : "json",
? ? ? ? data:{
? ? ? ? ? ? url:url
? ? ? ? },
? ? ? ? success : function(result){
? ? ? ? ? ? wxstart(result.data);
? ? ? ? },
? ? ? ? error:function(data){
? ? ? ? ? ? alert("連接失斚鄱！");
? ? ? ? }
? ? });
? ? function wxstart(data){
? ? ? ? var url = location.href;? //分享的文章地址
? ? ? ? var appId = data.appId;
? ? ? ? var timestamp = data.timestamp;
? ? ? ? var nonceStr = data.nonceStr;
? ? ? ? var signature = data.signature;
? ? ? ? wx.config({
? ? ? ? ? ? debug: false, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶(hù)端alert出來(lái)锁右，若要查看傳入的參數(shù)失受，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出咏瑟，僅在pc端時(shí)才會(huì)打印拂到。
? ? ? ? ? ? appId: appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
? ? ? ? ? ? timestamp: timestamp, // 必填码泞，生成簽名的時(shí)間戳
? ? ? ? ? ? nonceStr: nonceStr, // 必填兄旬，生成簽名的隨機(jī)串
? ? ? ? ? ? signature: signature,// 必填，簽名余寥，見(jiàn)附錄1
? ? ? ? ? ? jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ" , "onMenuShareWeibo"] // 必填领铐，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄2
? ? ? ? });
? ? ? ? wx.ready(function(){
? ? ? ? ? ? var shareData = {
? ? ? ? ? ? ? ? title: document.title,
? ? ? ? ? ? ? ? desc: '政府牽頭推動(dòng)成立的惠民金融平臺(tái)',
? ? ? ? ? ? ? ? link: location.href,
? ? ? ? ? ? ? ? imgUrl: 'http://file.puhuijinfu.com/imgLoader/test/phjf/img/2018/10/11/xyswkVTROKdq1xBzEYMB.jpeg'
? ? ? ? ? ? };
? ? ? ? ? ? wx.onMenuShareAppMessage(shareData);
? ? ? ? ? ? wx.onMenuShareTimeline(shareData);
? ? ? ? ? ? wx.onMenuShareQQ(shareData);
? ? ? ? ? ? wx.onMenuShareWeibo(shareData);
? ? ? ? });
? ? }
})
確保你獲取用來(lái)簽名的url是動(dòng)態(tài)獲取的宋舷，動(dòng)態(tài)頁(yè)面可參見(jiàn)實(shí)例代碼中php的實(shí)現(xiàn)方式绪撵。如果是html的靜態(tài)頁(yè)面在前端通過(guò)ajax將url傳到后臺(tái)簽名，前端需要用js獲取當(dāng)前頁(yè)面除去’#‘hash部分的鏈接（可用location.href.split(’#’)[0]獲取,而且需要encodeURIComponent）祝蝠，因?yàn)轫?yè)面一旦分享音诈，微信客戶(hù)端會(huì)在你的鏈接末尾加入其它參數(shù)，如果不是動(dòng)態(tài)獲取當(dāng)前鏈接绎狭，將導(dǎo)致分享后的頁(yè)面簽名失敗细溅。
在vue中設(shè)置
安裝微信sdk
npm install weixin-js-sdk
在需要用到分享的頁(yè)面，引入sdk
import wx from 'weixin-js-sdk';
在App.vued的儡嘶，methods方法中加入這個(gè)公用方法
//獲取分享配置
? ? ? ? ? jssdkSgin(){? ? ? ? ? ?
? ? ? ? ? ? ? var _this = this;
? ? ? ? ? ? ? var url = encodeURIComponent(location.href.split('#')[0]);
? ? ? ? ? ? ? Http.getJssdkSgin(url).then(response => {
? ? ? ? ? ? ? ? ? var result = response.data;
? ? ? ? ? ? ? ? ? if(response.code == 1) {
? ? ? ? ? ? ? ? ? ? ? followUrl =? result.followUrl;
? ? ? ? ? ? ? ? ? ? ? localStorage.setItem('followUrl',result.followUrl);
? ? ? ? ? ? ? ? ? ? ? wx.config({
? ? ? ? ? ? ? ? ? ? ? ? ? debug: false,//生產(chǎn)環(huán)境需要關(guān)閉debug模式
? ? ? ? ? ? ? ? ? ? ? ? ? appId: result.appId,//appId通過(guò)微信服務(wù)號(hào)后臺(tái)查看
? ? ? ? ? ? ? ? ? ? ? ? ? timestamp: result.timestamp,//生成簽名的時(shí)間戳
? ? ? ? ? ? ? ? ? ? ? ? ? nonceStr: result.nonceStr,//生成簽名的隨機(jī)字符串
? ? ? ? ? ? ? ? ? ? ? ? ? signature: result.signature,//簽名
? ? ? ? ? ? ? ? ? ? ? ? ? jsApiList: [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 'onMenuShareTimeline','onMenuShareAppMessage'
? ? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? _this.$message({
? ? ? ? ? ? ? ? ? ? ? ? ? message: response.msg,
? ? ? ? ? ? ? ? ? ? ? ? ? center: true,
? ? ? ? ? ? ? ? ? ? ? ? ? duration:2000,
? ? ? ? ? ? ? ? ? ? ? ? ? customClass:'mesTip'
? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? })
? ? ? ? ? },
在頁(yè)面的methods中喇聊，加上shareWeChat方法，
data中的數(shù)據(jù)
//======data中的數(shù)據(jù)
shareConfig:{
? ? ? ? ? ? ? ? ? title:'GetwxLink',
? ? ? ? ? ? ? ? ? desc:'GetwxLink',
? ? ? ? ? ? ? ? ? share_url:location.href,
? ? ? ? ? ? ? ? ? share_img:'http://www.gettool.cn/GetwxLink/'
? ? ? ? ? ? ? ? },
//methods方法
//設(shè)置微信分享
? ? ? ? ? shareWeChat(){
? ? ? ? ? ? ? let share_title = this.shareConfig.title;
? ? ? ? ? ? ? let _this = this;
? ? ? ? ? ? ? var config = {
? ? ? ? ? ? ? ? ? title: share_title, // 分享標(biāo)題
? ? ? ? ? ? ? ? ? desc:_this.shareConfig.desc,
? ? ? ? ? ? ? ? ? link: _this.shareConfig.share_url, // 分享鏈接蹦狂，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
? ? ? ? ? ? ? ? ? imgUrl: _this.shareConfig.share_img,
? ? ? ? ? ? ? ? ? type:'link',
? ? ? ? ? ? ? ? ? success: function() {
? ? ? ? ? ? ? ? ? ? ? console.log("success")
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? cancel: function() {
? ? ? ? ? ? ? ? ? ? ? console.log("failf")
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? };
? ? ? ? ? ? ? wx.ready(function () {
? ? ? ? ? ? ? ? ? // 分享到朋友圈
? ? ? ? ? ? ? ? ? wx.onMenuShareTimeline(config);
? ? ? ? ? ? ? ? ? //分享給朋友
? ? ? ? ? ? ? ? ? wx.onMenuShareAppMessage(config);
? ? ? ? ? ? ? });
? ? ? ? ? },
注意：
特別注意誓篱，需要在公眾號(hào)中添加js安全域名。開(kāi)發(fā)公眾號(hào)中凯楔，好像只能添加一個(gè)窜骄；生產(chǎn)公眾號(hào)，最多可以添加3個(gè)啼辣。 不加安全域名，會(huì)報(bào)錯(cuò)的御滩。
特別注意url需要?jiǎng)討B(tài)獲取鸥拧，傳遞給后臺(tái)党远，否則會(huì)報(bào)錯(cuò)。因?yàn)槎畏窒淼臅r(shí)候富弦，微信會(huì)自動(dòng)在url后面追加一串沟娱。如果不傳遞，就會(huì)造成url不對(duì)腕柜，那么簽名就不正確
