最近在做一個公司微信分享項目的功能，畢竟第一次做，對於小白也是個挑戰，特此記錄一下自己的開發過程，以便以后查閱。（轉載請標明出處，碼字好辛苦的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。