微信分享踩坑記（一）——微信生態右上角自定義分享（微信JS-SDK）

使用框架：Vue.js、微信JS-SDK、HTML5+（HBuilder）
兩種場景：微信生態右上角自定義分享、APP分享到微信

1’ 公衆號設置JS安全域名

公衆號開發者可在該域名下調用微信開放的JS接口（詳細步驟請自行檢索*）

Q：其中的一個.txt校驗文件需要放在域名的根目錄下面，但是vue中使用webpack打包出來的靜態文件通常是放在static下面的，這樣會報錯
A：將文件放在項目的根目錄，並在webpack的這兩個目錄中添加這一段代碼（要保證：域名/文件名.txt能直接訪問）

2’ vue中引入微信相關的模塊

Vue.use(WechatPlugin);
const wx = Vue.wechat;

3’ 通過config接口注入權限驗證配置（需要後臺提供接口）

wx.config({
    debug: true, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
    appId: '', // 必填，公衆號的唯一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名
    jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 必填，需要使用的JS接口列表
});

Q：各種奇怪的報錯：簽名無效、40001、invalid url domain
A：
微信 JS 接口簽名校驗工具
40001的話是後臺獲取的token不對（請小夥伴檢查一下）
invalid url domain：域名跟微信的安全域名不匹配（需要發佈到線上測試）

4’ 通過ready接口處理成功驗證

wx.ready(() => {
    // config信息驗證後會執行ready方法，所有接口調用都必須在config接口獲得結果之後，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
    wx.ready(function () {   //需在用戶可能點擊分享按鈕前就先調用
	    wx.onMenuShareAppMessage({ 
	        title: '', // 分享標題
	        desc: '', // 分享描述
	        link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
	        imgUrl: '', // 分享圖標
	        success() {
	          console.log('成功分享給朋友');
	        },
	        cancel() {
	          console.log('分享到朋友取消');
	        },
		});
		// 分享到朋友圈
	    wx.onMenuShareTimeline({
	       title: '', // 分享標題
	       desc: '', // 分享描述
	       link: '', // 分享鏈接
	       imgUrl: '', // 分享圖標
	       success() {
	         console.log('成功分享到朋友圈');
	       },
	       cancel() {
	         console.log('分享到朋友圈取消');
	       },
	    });
});

最後：
微信網頁開發的SDK分享只能分享圖文鏈接，
如果一定要分享圖片：
1.提示長按保存發給好友/保存後自己發朋友圈；
2.還是一個鏈接，但是裏面有一張圖