① 手把手教你調用微信掃一掃！三分鍾包會
這是我第一次公眾號開發，本以為看著微信官方文檔直接復制粘貼就好了，沒想到是我天真了，爬過一個坑又入一個坑！就這么一個簡單的事，竟然搞了一下午，所以寫了這篇文章，希望可以幫到大家！
第一步：引入 weixin-js-sdk
直接在 html 文件內，使用 script 引入：
或者
第二步：許可權驗證配置
timestamp,nonceStr,signature 重要信息請根據自己的公眾號信息去獲取。需要注意的是 debug 調試的時候，設置為 true ，會自動彈出配置成功或失敗信息，調試時可以藉助它。
第三步：調用掃一掃介面
我們在需要的按鈕處，點擊事件處開始調用掃碼介面，如：
做了一個判斷處理，檢查只有微信瀏覽器，其他瀏覽器不可以調用：
第四步：真機測試
真機測試的時候，一直在提示：
errMsg:config:invalid signature
中文叫做簽名無效。
查找原因是因為我的簽名獲取來和官方 微信 js 介面簽名校驗工具獲取來的數據不一樣，很明顯獲取的簽名有問題，是因為我的 url 配置和前端調起介面的 url 不一致造成的。
第五步：蘋果手機測試
蘋果手機真機測試，提示錯誤信息為：
the permission value is offline verifying
翻譯為中文：許可權值正在離線驗證
這個錯誤原因是 config 沒有正確執行。
又繼續去檢查簽名的問題，最後發現是後台介面欄位寫錯了，欲哭無淚，總之還是簽名信息錯誤。
第六步：安卓正常，蘋果點擊無反應
用安卓測試的時候，竟然好了，完美展示掃碼結果，以為要好了。使用 ios 測試的時候，竟然發現點擊的時候沒有任何反應。
找了半天原因，是因為 window.location.href 不同造成的。
測試結果：
安卓：https://hp.******.net/
IOS：https://hp.******.net//
IOS 手機就是因為 url 與簽名配置處的 url 不同，所以導致 config 執行失敗。究其原因是因為我的 vue-router 是 hash 模式。
解決方案：把我的 hash 模式換成 history 模式。記得後台也需要配置 nginx 。
第七步：IOS 掃碼無反應
當 IOS 能調起介面的那一刻，我以為要成功了，哪知道它就是要與 安卓 與眾不同，掃碼之後沒有任何反應，但是如果你快速地連續多掃幾次就會出現結果。
你就說要命不？網上查找了半天，看見有的人說有延時，最後想乾脆加個延時算了。
果然加了延時之後就好了。
第八步：掃碼結果處理
可能存在問題：
1、iOS設備掃碼正常，Android設備掃碼後沒反應
2、Android設備掃碼正常，iOS設備掃碼後沒反應
原因 ：微信開發文檔並沒有說清楚，其實在微信後台可能是維護了2個介面， 或者是對設備類型進行了區別，總之在 回調 函數中返回的結果封裝對象並不是同一個， 所以這要求我們也進行相應的處理， 不然就會出現上面這種默認奇妙的問題。
IOS 返回結果：
Android 結果：
第九步：修改路由
本以為 蘋果安卓手機都能夠正常掃碼，沒問題了。但是領導換需求了，之前是掃碼放到外邊，可以匿名掃。現在要修改成登錄之後才可以掃碼。
我就把路由修改了一下，先在登錄頁登錄成功之後，再進入掃碼頁，後台也同步修改了 url 地址，修改完測試發現：
安卓的一切正常。
蘋果手機壞了！
奔潰了，看看錯誤提示：noPermissionJsApi:[],errMsg:"config:ok"。
確定之後有一個錯誤提示。
errMsg:scanQRCode:the perssion value is offline verifying
一頓網路猛如虎，半天原地打轉轉！
有前邊一次經驗教訓，我就又去找地址的原因。最後發現是竟然 $router.push 的跳轉影響了我的 url ，在 IOS 上的 push 跳轉不能寫入瀏覽器的地址欄，但是安卓可以，導致安卓和 ios 跳轉之後的地址不同，所以 ios 失敗了。
解決辦法：
此時就正常運行了。這下滿足項目要求了，不會再出什麼幺蛾子了！
微信官方開發文檔：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#4