vue 微信分享（實戰）
摘要：
今天碰到了微信分享的需求，總體上來講還是比較簡單的，但是還是碰到了一個假想的坑(真的是假想),:innocent:
api地址
1. 思路
步驟一：繫結域名
引入JS檔案
通過config介面注入許可權驗證配置(反正微信的東西都有這一步):stu...
今天碰到了微信分享的需求，總體上來講還是比較簡單的，但是還是碰到了一個假想的坑(真的是假想),:innocent:
api地址1. 思路
- 步驟一：繫結域名
- 引入JS檔案
- 通過config介面注入許可權驗證配置(反正微信的東西都有這一步):stuck_out_tongue:
- 通過ready介面處理成功驗證
- 通過error介面處理失敗驗證
2. 實現
1.繫結域名，在公眾號後臺繫結域名，所以最後的測試一定要是線上(環境要麼用內網穿透，這樣容易除錯,不用每一次都發測試環境)
2.在index.html檔案裡面引入
http://res.wx.qq.com/open/js/jweixin-1.4.0.js// 注意協議
3.通過config介面注入許可權驗證配置, 下面五個引數都是通過請求後臺，後臺返回給你的。 注意: 當前頁面的url是要在這個接口裡給後臺的，它們才能生成可用的, 簽名算髮, url的格式如下: url（當前網頁的URL，不包含#及其後面部分),所以要注意vue-router的模式(通過config介面注入許可權驗證配置,jsApiList是呼叫的事件，api文件附錄2裡面有)
wx.config({
debug: false, // 是否開啟除錯模式
appId: appId, //appid
timestamp: timestamp, // 時間戳
nonceStr: nonceStr, // 隨機字串，只有這個是駝峰:jack_o_lantern:
signature: signature, // 簽名
jsApiList: [
"onMenuShareTimeline",
"onMenuShareAppMessage",
"onMenuShareQQ",
"onMenuShareWeibo",
"onMenuShareQZone"
] // 需要使用的JS介面列表
});
// 判斷當前客戶端版本是否支援指定JS介面 ,這步可無
wx.checkJsApi({
jsApiList: [
"onMenuShareTimeline",
"onMenuShareAppMessage",
"onMenuShareQQ",
"onMenuShareWeibo",
"onMenuShareQZone"
], // 需要檢測的JS介面列表，所有JS介面列表見附錄2,
success: function(res) {
console.log(res);
// 以鍵值對的形式返回，可用的api值true，不可用為false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
// 通過ready介面處理成功驗證
wx.ready(function() {
const share = {
title: mainTitle,// 分享出去的title
desc: subTitle,// 描述資訊
imgUrl: smallIcons, // 分享的小圖示
link: url,// 分享的除去的url
success: function() {
dosometing();// 分享成功，成功之後要做的事情
},
cancel: function() {
dosometing();// 分享取消，取消之後要做的事情
}
};
wx.onMenuShareAppMessage(share); // 微信好友
wx.onMenuShareTimeline(share); // 朋友圈
wx.onMenuShareQQ(share); // QQ
wx.onMenuShareQZone(share); // QQ空間
wx.onMenuShareWeibo(share); // 騰訊微博
});
// 如果失敗 , 獲取失敗資訊
wx.error(function(res) {
console.log("錯誤", res);
});
3.假想的坑
我看別人的分享，點選分享都是有如上一個引導圖的(以為是官網自帶的)，但是我做好沒有引導圖，我開始一隻以為我那一步出問題了，後來我發現，這個圖是要自己加的，點選分享，開啟這個蒙層，在成功回撥裡面，把這個蒙層去掉。:sweat_smile: