vue 項目如何使用微信分享接口

首先做微信網頁都要接入微信sdk；

安裝sdk

 npm install weixin-js-sdk --save

具體可以查看微信公眾平台技術文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

引入sdk

vue是單頁面項目，比如你想要接入微信分享功能，分享功能在每個路由地址都要有，因為每個路由的url是不一樣的，就需要在每個路由地址都引入一遍。

import wx from 'weixin-js-sdk'

在組建的生命周期creatd()和mounted()里面放代碼

//通過config接口注入權限驗證配置  只要調后端接口就可以了。后端會把那些信息處理好，然后通過一個接口返給你這些參數

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

//通過error接口處理失敗驗證

wx.error(function(res){
    // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名。
});

//通過ready接口處理成功驗證

wx.ready(function () { //需在用戶可能點擊分享按鈕前就先調用
 wx.updateAppMessageShareData({ 
　　　　title: '', // 分享標題
　　　　desc: '', // 分享描述
　　　　link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
　　　　imgUrl: '', // 分享圖標
 success: function () { 
 // 設置成功
 　　　　}
});

坑點：url這里要注意的就是url的問題，如果url沒有正確傳遞，后端也會返回信息，但是簽名信息會是錯誤的。上面提到的完整url指的是：’http(s)://’部分，以及’？’后面的GET參數部分,

但不包括’#’hash后面的部分。可以通過location.href來獲取。

注意： 如果你的vue項目，路由沒有開啟history 模式,也就是你的url上面包含“#”，這個時候要從后端正確獲取簽名，就需要去掉url上#后面的字符。（url去掉’#’hash部分，可用encodeURIComponent(location.href.split('#')[0]），先編碼再傳遞）

封裝調用

因為每個頁面都要注入sdk，代碼量巨大，建議封裝全局變量。