本文通過(guò)自己開(kāi)發(fā)過(guò)程遇到一些坑做一次總結(jié)：
一梧疲、首先交代一下基本過(guò)程和工具
1、肯定是先擼一波文檔微信api接口文檔；
2幌氮、 配置 JS 接口安全域名：登錄微信公眾平臺(tái)缭受，配置安全域名
假設(shè)你的前端項(xiàng)目訪(fǎng)問(wèn)的主域名是 abc.com，那就填 abc.com浩销。
3贯涎、引入js文件
此處用的是vux內(nèi)置的插件 其他方式正常引入script即可；
import { WechatPlugin} from 'vux'
Vue.use(WechatPlugin); // 微信
const wx = Vue.wechat;
我推薦直接寫(xiě)在index.html的head中要不引入問(wèn)題可能會(huì)報(bào)錯(cuò)慢洋；要把sdk盡量往前放塘雳；
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title></title>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</head>
4、后端獲取微信簽名（傳路徑給后臺(tái)返回參數(shù)用于配置wx.config）
這個(gè)步驟需要后端寫(xiě)代碼和微信服務(wù)器進(jìn)行交互普筹，獲得「網(wǎng)頁(yè)授權(quán)access_token」败明，根據(jù)這個(gè) 「網(wǎng)頁(yè)授權(quán) access_token」 把關(guān)鍵的幾個(gè)參數(shù)算出來(lái)，傳給前端太防。這幾個(gè)參數(shù)分別是：
appId , timestamp , nonceStr , signature
后端要算出這幾個(gè)參數(shù)不僅僅需要 「網(wǎng)頁(yè)授權(quán) access_token」妻顶，還需要一個(gè) URL 參數(shù)。這個(gè) URL 是前端當(dāng)前的 URL蜒车。
比如 www.abc.com/123 這個(gè)頁(yè)面需要微信分享功能讳嘱，那么就把這個(gè) URL 傳個(gè)后端，后端算出來(lái)參數(shù)再返回給前端酿愧。
注意沥潭，只要 URL 發(fā)生變化，都得需要重新獲取微信分享參數(shù)嬉挡。除非個(gè)別頁(yè)面不需要微信分享功能钝鸽。
如果前端用的是 vue-router ，請(qǐng)盡量用 history 模式庞钢。如果你用的是 hash 模式拔恰，那么你給后端傳遞 URL 是有坑的，具體可以看這篇文章基括。
// 此處我是定義在vue原型中 這樣方便以后的調(diào)用 通過(guò) this.wxShare()調(diào)用
const imgUrl = 'http://xxx.xxxx.xxxx'; // 測(cè)試地址
Vue.prototype.wxShare = function (title, desc, link) {
const url = document.location.href;// 當(dāng)前url
http.get(getConfig(), {//請(qǐng)求配置
params: {
url: url
}
}).then(res => {// 獲得簽名配置
var Data = res.data.data;
// config信息驗(yàn)證后會(huì)執(zhí)行ready方法颜懊，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶(hù)端的異步操作
wx.config({
debug: false, // 開(kāi)啟調(diào)試模式,開(kāi)發(fā)時(shí)可以開(kāi)啟
appId: Data.appid, // 必填风皿，公眾號(hào)的唯一標(biāo)識(shí) 由接口返回
timestamp: Data.timestamp, // 必填饭冬，生成簽名的時(shí)間戳 由接口返回
nonceStr: Data.nonceStr, // 必填，生成簽名的隨機(jī)串 由接口返回
signature: Data.signature, // 必填揪阶，簽名 由接口返回
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 此處填你所用到的方法
});
});
wx.ready(() =>{
// ..... code
}
};
這步很重要，具體看下邊vue在微信中的坑患朱；
5鲁僚、定義方法（可以將該方法放在mounted中，并在其中放入‘分享給朋友’，‘分享至朋友圈’的js接口）
Vue.prototype.wxShare = function (title, desc, link) {
wx.config()
wx.ready(() => {
// 所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口冰沙，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來(lái)確保正確執(zhí)行侨艾。對(duì)于用戶(hù)觸發(fā)時(shí)才調(diào)用的接口，
// 則可以直接調(diào)用拓挥，不需要放在ready函數(shù)中唠梨。
wx.onMenuShareAppMessage({ // 分享給朋友
title: title, // 分享標(biāo)題
desc: desc, // 分享描述
link: link, // 分享鏈接 默認(rèn)以當(dāng)前鏈接
imgUrl: imgUrl + '/static/images/share.png',// 分享圖標(biāo)
// 用戶(hù)確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
success: function () {
var params = new URLSearchParams();
params.append('token', window.localStorage.getItem('token'));
params.append('type', 'share');
http.post(shareCallback(), params).then(res => { // 請(qǐng)求后端分享成功之后獲取一票的接口
if (res.data.error == 0) { // 表示當(dāng)天分享成功
store.commit('shareChange', {// vuex彈出分享成功獲取一票
isShare: true
});
} else {
return;
}
})
},
// 用戶(hù)取消分享后執(zhí)行的回調(diào)函數(shù)
cancel: function () {
console.log('分享到朋友取消');
}
});
//分享到朋友圈
wx.onMenuShareTimeline({});
});
};
然后在需要的鉤子里面調(diào)用即可,以上的流程都可以在文檔中查看;
6、到此處如果順利就可以成功分享侥啤。如果有坑接著往下看当叭；
二、vue在微信中的坑盖灸；
1蚁鳖，在hash模式下：
定義一下： A = http://vigor.dev.yaoguo.cn/#/
B = http://vigor.dev.yaoguo.cn/#/plan
index = 首頁(yè)路徑；
plan = 計(jì)劃頁(yè)路徑赁炎；
shareA = http://vigor.dev.yaoguo.cn/?from=singlemessage&isappinstalled=0#/醉箕；
shareB = http://vigor.dev.yaoguo.cn/?from=singlemessage&isappinstalled=0#/plan;
（1）在安卓和瀏覽器下（包括ios）都是正常顯示：從index 進(jìn)入項(xiàng)目，跳轉(zhuǎn)到plan顯示: index = A,plan = B;
（2）分享出去頁(yè)面：從index進(jìn)入項(xiàng)目徙垫，分享出去路徑：shareA ;點(diǎn)擊跳轉(zhuǎn)到plan讥裤，分享出去路徑：shareB ;
從plan進(jìn)入一樣，分享出去頁(yè)面為加from參數(shù)的當(dāng)前頁(yè)姻报；
（3）通過(guò)window.location.href alert出的路徑：index = A,plan = B;為正常能拿到己英；
然后說(shuō)下不同的地方：
在ios微信打開(kāi)：從index 進(jìn)入項(xiàng)目，跳轉(zhuǎn)到plan顯示：
（1）通過(guò)微信右上角打開(kāi)按鈕在其他瀏覽器打開(kāi)：通過(guò)index進(jìn)入項(xiàng)目逗抑，在瀏覽器打開(kāi)index頁(yè)面剧辐。點(diǎn)擊跳轉(zhuǎn)到plan頁(yè)面再通過(guò)其他瀏覽器打開(kāi)依然是index頁(yè)面； 從plan進(jìn)入項(xiàng)目邮府，在瀏覽器打開(kāi)plan頁(yè)面,點(diǎn)擊跳轉(zhuǎn)到index頁(yè)面再通過(guò)其他瀏覽器打開(kāi)依然是plan頁(yè)面;
（2） ios： 從index進(jìn)入項(xiàng)目荧关，在本頁(yè)分享，分享出去路徑：shareA;點(diǎn)擊到plan褂傀，分享出去路徑:shareA 此時(shí)分享出去的路徑是一樣的忍啤； 從plan進(jìn)入項(xiàng)目,分享出去頁(yè)面路徑一樣為:shareB ;
造成問(wèn)題：（1）wx.config簽名使用的url認(rèn)證錯(cuò)誤；
解決辦法：wx.config簽名使用的url仙辟，通過(guò)window.location.href.split('#')[0]獲韧ā；
（2）如果分享當(dāng)前頁(yè)叠国，需要做不同的處理未檩；
那么在分享認(rèn)證用路徑就有問(wèn)題：
拿 URL 換取微信分享 config 時(shí)，最好這么寫(xiě)：
const url = window.location.href.split('#')[0]粟焊；以下所有子頁(yè)面也就認(rèn)證成功冤狡；
注意這個(gè)url需要 encodeURIComponent(url);
或者直接寫(xiě)主域名孙蒙。例如：http://wwww.baidu.com/
如果：
報(bào)這個(gè)錯(cuò)誤：1、url不對(duì)悲雳；2,挎峦、后臺(tái)給你的數(shù)據(jù)算法不對(duì)（找接口改）；3合瓢、清除緩存坦胶；
-
ios上二次分享會(huì)出現(xiàn)簽名錯(cuò)誤, 并且莫名被拼接上了一串標(biāo)識(shí) 此問(wèn)題只有在ios上有
ios會(huì)在#號(hào)中間添加一串標(biāo)識(shí) 如下
http://test.aaa.bbbb.com/?from=singlemessage&isappinstalled=0#/details?id=2
// 原本鏈接 http://test.aaa.bbbb.com/#/details?id=2
這個(gè)問(wèn)題解決了兩天,建議在一開(kāi)始就開(kāi)啟debug模式,這樣能及時(shí)知道問(wèn)題所在
解決辦法:
一開(kāi)始以為是 ‘#’ 的問(wèn)題 于是乎開(kāi)啟vue HTML5 History 模式 去除掉# 結(jié)果發(fā)現(xiàn) 在進(jìn)入其他頁(yè)面的時(shí)候 復(fù)制連接還是首頁(yè)的鏈接 本質(zhì)上是 vue-router切換的時(shí)候 都是操作的瀏覽器歷史記錄 （此時(shí)你可以復(fù)制url 都是一樣的）真實(shí)URL為第一次剛進(jìn)入時(shí)的URL
導(dǎo)致錯(cuò)誤是 當(dāng)瀏覽者從分享窗口進(jìn)入后，他從分享頁(yè)按著正常路由跳轉(zhuǎn)到其他頁(yè)面晴楔，其他頁(yè)面的邏輯中如果有需要獲取當(dāng)前頁(yè)面url的需要顿苇，會(huì)發(fā)現(xiàn)這個(gè)url和正常路由跳轉(zhuǎn)的不一樣,導(dǎo)致簽名不一致,所以獲取不到正確的文案。
解決: 每次路由變化時(shí)都重新請(qǐng)求下簽名滥崩，簽名的URL 用第一次進(jìn)入時(shí)的URL就可以解決了.
但是我們需求不是所有頁(yè)面都是一樣的分享怎么辦岖圈？
在main.js驗(yàn)證成功config后，在需要的頁(yè)面把微信分享提供的代碼寫(xiě)入鉤子函數(shù)中就好了钙皮；
隱藏按鈕也一樣蜂科；
我們也可以禁止掉微信默認(rèn)分享；（具體看文檔）
wx.hideMenuItems({
menuList: [] // 要隱藏的菜單項(xiàng)短条，只能隱藏“傳播類(lèi)”和“保護(hù)類(lèi)”按鈕导匣，所有menu項(xiàng)見(jiàn)附錄3
});
使用方式，直接將項(xiàng)隱藏的菜單項(xiàng)
發(fā)送給朋友: "menuItem:share:appMessage"
分享到朋友圈: "menuItem:share:timeline"
分享到QQ: "menuItem:share:qq"
分享到Weibo: "menuItem:share:weiboApp"
收藏: "menuItem:favorite"
分享到FB: "menuItem:share:facebook"
分享到 QQ 空間/menuItem:share:QZone
放入到menuList:[]括號(hào)中茸时，具體拼接方式贡定，大概是","
三、開(kāi)發(fā)的時(shí)候可都，一定要下載一個(gè)微信開(kāi)發(fā)者工具缓待，在那里面進(jìn)行微信分享測(cè)試。代碼開(kāi)啟 debug 模式后渠牲，如果簽名錯(cuò)誤旋炒，微信開(kāi)發(fā)者工具會(huì)直接提醒你的。判斷簽名是否正確非常重要签杈。傳送門(mén)
四瘫镇、iOS下微信分享成功后不執(zhí)行success中的方法：
1、更新引入新的sdk:https://res.wx.qq.com/open/js/jweixin-1.3.2.js
2答姥、在success中加入
setTimeout(function(){
// 執(zhí)行函數(shù)
}, 500);
