Vue項目經過JSSDK調用微信分享接口

最近在作一個公司微信分享項目的功能，畢竟第一次作，對於小白也是個挑戰，特此記錄一下本身的開發過程，以便之後查閱。（轉載請標明出處，碼字好辛苦的qaq）

使用步驟：

　　1.綁定域名：

　　一開始固然是去查微信公衆平臺的文檔啦，由於公衆號帳號密碼什麼的是在產品手上的，並且要配域名也是現網的域名，因此無法自測，步驟一中的綁定域名就跳過了。

　　2.引入JS文件：

　　我在百度上看大部分人都是使用Npm install weixin-js-jssdk安裝依賴包的方法引用jssdk，可是考慮到npm是開源的，可能不太安全，因此直接採用引用官方js文件的方法。

　　原本在vue中引用外鏈JS是須要在index.html中的script標籤中引用的（http://res2.wx.qq.com/open/js/jweixin-1.4.0.js ），可是吧，這個項目裏沒有看到有webpack打包出來的index.html（別人開發初版以後咱們再開發第二版，因此代碼都不是本身寫的），因此只能把jssdk的js文件保存下來放在項目文件夾中。由於vue-cli打包的結構我還不熟悉，因此引用也是頗費一番功夫。

　　引用的時候要注意，jweixin-1.4.0.js中的第一個this要改成window，要否則是沒法全局使用裏面的方法的，而後我還在最後面把整個文件export default {}，在main.js中全局註冊這個組件：

　　3.經過config接口注入權限驗證配置：

　　全部須要使用JS-SDK的頁面必須先注入配置信息，不然將沒法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，因此使用pushState來實現web app的頁面會致使簽名失敗，此問題會在Android6.2中修復）。

　　官方文檔中說的很清楚了，config配置裏面的參數appid, timestamp, nonceStr, signature都是要後臺接口返回的，使用axios獲取簽名的時候須要將Access-Token在header中發送給後臺，後臺驗證經過後纔會返回對應的正確參數。

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

　由於每一個頁面都要注入config很是麻煩，因此我把config和調用接口分出來封裝成一個方法以便使用。

　　4.調用接口方法：

　　由於接口須要複用不少次，因此封裝出來成爲一個方法是比較方便的，我把他們都放在share.js中，而後將方法暴露出去，在main.js中掛載到vue原型實例中：

 

 

　　好了這下有人該問了，「爲何不用微信新更新的updateShareMenu這個接口呢，這個老接口不是要廢除了嗎？」，我也想用啊，還節省一些維護的成本，但是我用了分享不了啊真是奇了個怪了，先這樣用着吧沒辦法了。

 

5.在每一個頁面中調用方法

 　　在每一個你須要自定義分享的頁面進行調用方法，這裏就不詳細說明了。

6.測試

　　測試以後發現能夠啦。測試的時候相對麻煩一點，由於要在安全域名下才能調用，因此要布到安全域名的網下才能測試。

 

遇到的問題：

1.invalid signature

　　出現這個問題確定是獲取的簽名有問題，若是簽名沒有問題有別的問題是不會報這個的，簽名錯誤的緣由多是公衆號平臺配置有問題或者是後臺返回簽名接口的算法有問題。我在項目中遇到報這個問題，簽名獲取正確以後又報invalid url domain（由於我是在localhost域名下使用的，localhost不是公衆號配置的安全域名因此會報這個）。

2.permission denied

　　這個問題是沒有接口權限形成的，我一開始也弄了好久，後來發現本身的微信號沒有關注測試公衆號成爲開發人員致使的，關注了以後就有權限調用接口了。

3.自定義的縮略圖不顯示

　　這個問題我是由於路徑錯誤致使的，由於個人圖片是接口返回的動態圖片，再設置爲分享縮略圖，我直接就給這個參數賦了相對路徑；後來發現不能賦相對路徑，必定要是絕對路徑，由於是分享給別人看的，絕對路徑中的http://xxx.com.cn/icon.jpg的http://xxx.com.cn也是要加上的，不然會找不到圖片。另一個緣由就是圖片尺寸和類型問題，必定要是jpg（png有些手機不太友好）；還有尺寸我看網上不少人說300*300以上，有些人說100*100以上，反正不能太大不能過小，我就採用了100*100以上的jpg圖片，最好不超過32k，結果發現真的能夠。

4.二次分享致使不能調用自定義的接口

　　這個問題耗費了我不少時間去找緣由，我看網上都是說要url進行編碼以後傳給後臺獲取的簽名纔不會計算錯，由於微信會在分享後的連接後面加

from=singlemessage&isappinstalled=1這串字符串，我encodeURIComponent(location.href.split('#')[0])發現獲取的簽名反而非法！和後臺聯調以後發現是測試網http協議的問題；原本encode編碼後傳給後臺，後臺解析以後會將解碼的url發到前端，可是不知道爲何測試網老是把編碼後的url原封不動傳給我，致使計算簽名有點問題，後來是後臺那裏作了處理才解決了。不過encodeURIComponent(location.href.split('#')[0])最好仍是加上，由於有一些奇怪的字符好比$&%#之類的後臺計算可能會識別錯誤。還有一個，要等頁面加載了以後再分享調用jssdk接口才會生效！別操做這麼快了。

5.頁面沒法分享

　　當時有一個頁面調不起微信的分享，這個頁面是自定義link連接，不是直接分享當前頁面連接。後來發現是分享的link路徑的問題，我把路徑中？organized=8&最後面這些參數也加上去了，後來去掉就沒問題了。

6.正則處理富文本

　　自定義描述的時候發現接口返回的介紹是一段html代碼，多是平臺發佈文章是用富文本編輯框提交到後臺後臺再返回前端頁面的，那麼這時候就要過濾掉標籤，只取標籤中的內容，我是這麼寫的：

過濾掉<>標籤並取前100個字。

 

 

但願這篇文章能幫助更多的人，可是問題都是須要經歷事後才能深深的記住解決方案哦，不要只是複製代碼，要多理解qwq。