開發工具
踩坑：在開發中使用的是chrome瀏覽器，結果打包后在微信中顯示樣式錯亂。
建議：使用微信開發者工具進行調試，它和微信都是x5內核，這樣保證開發和生產樣式一致。
openid
微信開發是繞不開openid這個字段的，可以簡單理解成用戶的id。
開發前一定要詢問清楚，后端如何給前端傳遞openid。
踩坑：曾經遇到一種方式，是后臺通過cookie方式存儲到瀏覽器，然而開發中存在延時問題，頁面加載完了，還獲取不到cookie,延時大約1s才可以獲取的到。
建議：穩妥方式是讓后臺寫一個登錄接口，通過該接口獲取openid。
jssdk
微信提供了jssdk，其中封裝了很多方便的功能。
安裝依賴
npm install weixin-js-sdk --save
jssdk需要通過config接口注入權限驗證配置，才可以正常使用，其中的參數都是后端返回的，前端只要通過接口獲取這些參數，并通過config驗證即可。
公眾平臺綁定域名
使用jssdk是需要綁定域名的。JS接口安全域名：需要是一個公網域名。
先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。
這就導致本地開發無法調試jssdk功能，因為localhost:8080不是JS接口安全域名。
內網穿透/轉發
想要調試jssdk，代碼需要發布到域名對應的ip服務器上。但是這樣上傳太頻繁了。
把內網映射到公網，這樣就可以在本地進行調試了。
常見工具：ngrok、魔法隧道、花生殼等。具體可搜索關鍵字內網穿透/轉發。
微信頭像跨域
踩坑：如果需要展示微信頭像，請求后臺返回的url會存在跨域問題。
建議：可以讓后臺返回頭像的二進制文件(blob)，在ajax中記得設置響應類型responseType:'blob'，然后前端將blob轉換成base64格式進行展示。
if (window.FileReader) {
let fr = new FileReader();
let img = new Image();
fr.readAsDataURL(blob);
fr.onloadend = (e) => {
img.src = e.target.result;
// appendChild(img)
}
}
生成海報/邀請函
通常會有生成海報、邀請函的需求，這些有兩種方案：
- 后端生成圖片
通過接口上傳圖片，后端生成圖片并返回，前端展示。 - 前端生成圖片
前端將dom轉換成canvas或img。
這里主要講第二種，前端生成圖片：
插件：dom-to-img、html2canvas
實際效果：html2canvas比較模糊，dom-to-img的png、jpeg格式同樣模糊，但是svg格式很清晰。
html2canvas模糊方案之一：
將 canvas 的寬高設置成容器寬高的 2 倍，處理生成的 canvas 圖片模糊失真
可參考：html2canvas截圖失真
注意： 除了模糊以外，html2canvas生成的圖片和dom樣式有不一致的地方。
長按保存/轉發圖片
踩坑：在微信網頁中，長按普通的圖片是可以保存或轉發的，但是通過上一步dom轉換的圖片是svg格式，微信是不支持保存。
建議：
- 生成圖片后上傳給后端，后端返回一個url。
- 前端將svg轉換成png
- 通過window.devicePixelRatio獲取設備像素比scale
- canvas畫布的大小是圖片的scale倍(相當于提高圖片精度)
- 調用canvas的drawImage()在畫布上繪圖。
- 調用toDataUrl()返回png格式的圖片展示
data URI - 設置img.src，并且寬高縮小scale倍(這里是等比縮放，所以不會模糊)
分享參數配置
jssdk分享接口中有一些參數配置項：
link
分享鏈接，vue-router的hash模式，#后面的部分會被忽略
建議：使用urlencode加密
或者在#前面加一個?imgUrl
分享圖標可以放到圖片服務器上
放到項目的assets目錄中
