1. 微信如何掃二維碼登錄
您好,1、打開電腦。
2、找到桌面上的微信APP,雙擊微信打開。
3、點擊「切換賬號」。
4、用手機微信的掃一掃掃描二維碼。
5、顯示出「請在手機確認登錄」界面。
6、在手機上確認界面點擊「登錄」。
7、顯示出微信列表後即掃碼登陸成功。
2. 手把手教你調用微信掃一掃!三分鍾包會
這是我第一次公眾號開發,本以為看著微信官方文檔直接復制粘貼就好了,沒想到是我天真了,爬過一個坑又入一個坑!就這么一個簡單的事,竟然搞了一下午,所以寫了這篇文章,希望可以幫到大家!
第一步:引入 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