VueJs單頁應用實現微信網頁授權及微信分享功能示例
在實際開發中,無論是做PC端、WebApp端還是微信公眾號等型別的專案的時候,或多或少都會涉及到微信相關的開發,最近公司專案要求實現微信網頁授權,並獲取微信使用者基本資訊的功能及微信分享的功能,現在總算完成了,但開發過程中遇到好幾個坑。廢話不多說了,開始正題。
描述點
- 微信相關開發知識瞭解
- 怎麼樣實現微信相關功能本地測試
- 微信網頁授權
- 微信分享
微信相關開發知識瞭解
- 微信公眾號的appId,AppSecret
- 當我們註冊一個微信公眾號後,便能夠得到一個appId(每個微信公眾號只有一個,一個微信公眾號唯一的標識)和appSecret(可以進行重置),這兩個資訊是進行微信公眾號開發必不可少的,因為微信公眾號中幾乎所有功能的開發都與這兩個資訊相關。
- 微信公眾號中IP白名單
- 在開發微信公眾功能的時候,需要我們新增IP白名單,這樣以便能夠獲取到access_token,關於access_token的介紹請看這裡https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183
- 網頁授權域名以及JS介面安全域名
- 網頁授權域名:在我們的應用中需要微信使用者進行登入、獲取微信使用者基本資訊的時候,需要設定這個域名
- JS介面安全域名:在我們的應用中需要實現微信分享等功能,需要設定這個域名。
怎麼樣實現微信相關功能本地測試
相對很多人都對這個問題比較感興趣,因為在進行涉及到微信公眾號中功能開發的時候,預設情況下我們是不能進行本地測試的,也就是說測試都需要將程式碼進行部署才測試,但這非常不利於我們的測試開發,其實進行本地測試開發很簡單,只需要我們有一個域名就可以了,然後將我們本地的ip對映到這個域名上,就可以本地測試了。下面我就說說我是怎麼做本地測試的.
因為購買域名需要進行備案操作之類的,比較麻煩,所以一般第三方平臺就可以讓我們得到一個域名。我是在natpp(ngrok)這個網站上註冊的https://natapp.cn/
我是花了五元錢購買了一個月的隧道,因為免費的不怎麼靠譜,畢竟是免費的,哈哈。
注意,我們不能直接使用這個隧道,因為這個隧道是三級域名,無法用於微信開發,需要繫結一個二級域名或自主域名
當繫結完域名之後,在本地我們需要將本地ip進行對映穿透操作。
windows下開啟dos視窗,輸入 natapp -authtoken 你的隧道的authtoken
將你在上面設定的二級域名新增到上述說的網頁授權域名以及JS介面安全域名
接下來便可以進行本地測試了.最後說一下,開發過程中下載微信開發工具進行除錯也是不錯的選擇,下載地址https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140
微信網頁授權
微信網頁授權的目的主要是實現三方站點微信的登入、獲取微信使用者資訊等
實現微信網頁授權獲取微信使用者的基本資訊
先判斷當前瀏覽器是不是微信內建瀏覽器,微信網頁授權api: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
1 2 3 4 5 6 7 8 |
|
1 第一步:使用者同意授權,獲取code
2 第二步:通過code換取網頁授權access_token
3 第三步:重新整理access_token(如果需要)
4 第四步:拉取使用者資訊(需scope為 snsapi_userinfo)
5 附:檢驗授權憑證(access_token)是否有效
微信API裡面關於這些都介紹得比較清楚的,我就說說在這個過程中我所遇到的問題,以及解決辦法
在第一步獲取code的時候,因為這個code在五分鐘之內只能夠使用一次,所以必須對這個code進行快取起來。否則會出現"errcode":40163,"errmsg":"code been used, hints: [ req_id: nOCEBa0466th12 ]"或{"errcode":40029,"errmsg":"invalid code"} 錯誤。
微信分享
微信分享其實用得非常得多,我就簡單說下在vue-cli中怎麼引入微信分享的sdk,以及怎麼樣實現分享功能.
微信分享APi: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
首先引入sdk:
1 |
|
然後通過require或者import引入
1 |
|
微信分享中最重要的是獲取到簽名,才能夠實現微信的分享
再根據當前的url去獲取到所需要的引數來完成簽名的驗證,引數主要用appId、nonceStr、timestamp、signature,然後通過wx物件的config方法去進行配置驗證簽名
1 2 3 4 5 6 7 8 9 10 11 12 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
|
在這個過程中出現的錯誤就是:config:invalid signature,這個錯誤就說明簽名不對,這時候需要靜下心來去想想,然後進行排除,我最後發現原來是當前的url的錯誤,看了網上很多都是url需要進行編碼,我也是這樣做的,但一直出現config:invalid signature
原來的:
1 |
|
修改後
1 |
|
就不錯了,最後來看看效果
一般出現這個問題,大部分都是url的問題哦。