在實際開發中，無論是做PC端、WebApp端還是微信公眾號等類型的項目的時候，或多或少都會涉及到微信相關的開發，最近公司項目要求實現微信網頁授權，并獲取微信用戶基本信息的功能及微信分享的功能，現在總算完成了，但開發過程中遇到好幾個坑。廢話不多說了，開始正題。
描述點
微信相關開發知識了解
怎么樣實現微信相關功能本地測試
相對很多人都對這個問題比較感興趣，因為在進行涉及到微信公眾號中功能開發的時候，默認情況下我們是不能進行本地測試的，也就是說測試都需要將代碼進行部署才測試，但這非常不利于我們的測試開發，其實進行本地測試開發很簡單，只需要我們有一個域名就可以了，然后將我們本地的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
isweixin() { const ua = window.navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i) == 'micromessenger'){ return true; } else { return false; } },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:
npm install weixin-js-sdk --save-dev
然后通過require或者import引入
import wx from 'weixin-js-sdk';
微信分享中最重要的是獲取到簽名，才能夠實現微信的分享
再根據當前的url去獲取到所需要的參數來完成簽名的驗證，參數主要用appId、nonceStr、timestamp、signature，然后通過wx對象的config方法去進行配置驗證簽名
wx.config({ debug: false, appId: appId, // 和獲取Ticke的必須一樣------必填，公眾號的唯一標識 timestamp:timestamp, // 必填，生成簽名的時間戳 nonceStr: nonceStr, // 必填，生成簽名的隨機串 signature: signature,// 必填，簽名，見附錄1 //需要分享的列表項:發送給朋友，分享到朋友圈，分享到QQ，分享到QQ空間 jsApiList: [ 'onMenuShareAppMessage','onMenuShareTimeline', 'onMenuShareQQ','onMenuShareQZone' ] }); //處理驗證失敗的信息 wx.error(function (res) { logUtil.printLog('驗證失敗返回的信息:',res); }); //處理驗證成功的信息 wx.ready(function () { // alert(window.location.href.split('#')[0]); //分享到朋友圈 wx.onMenuShareTimeline({ title: _this.newDetailObj.title, // 分享標題 link: window.location.href.split('#')[0], // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: _this.newDetailObj.thu_image, // 分享圖標 success: function (res) { // 用戶確認分享后執行的回調函數 logUtil.printLog("分享到朋友圈成功返回的信息為:",res); _this.showMsg("分享成功!") }, cancel: function (res) { // 用戶取消分享后執行的回調函數 logUtil.printLog("取消分享到朋友圈返回的信息為:",res); } }); //分享給朋友 wx.onMenuShareAppMessage({ title: _this.newDetailObj.title, // 分享標題 desc: _this.desc, // 分享描述 link: window.location.href.split('#')[0], // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: _this.newDetailObj.thu_image, // 分享圖標 type: '', // 分享類型,music、video或link，不填默認為link dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認為空 success: function (res) { // 用戶確認分享后執行的回調函數 logUtil.printLog("分享給朋友成功返回的信息為:",res); }, cancel: function (res) { // 用戶取消分享后執行的回調函數 logUtil.printLog("取消分享給朋友返回的信息為:",res); } }); //分享到QQ wx.onMenuShareQQ({ title: _this.newDetailObj.title, // 分享標題 desc: _this.desc, // 分享描述 link: window.location.href.split('#')[0], // 分享鏈接 imgUrl: _this.newDetailObj.thu_image, // 分享圖標 success: function (res) { // 用戶確認分享后執行的回調函數 logUtil.printLog("分享到QQ好友成功返回的信息為:",res); }, cancel: function (res) { // 用戶取消分享后執行的回調函數 logUtil.printLog("取消分享給QQ好友返回的信息為:",res); } }); //分享到QQ空間 wx.onMenuShareQZone({ title: _this.newDetailObj.title, // 分享標題 desc: _this.desc, // 分享描述 link: window.location.href.split('#')[0], // 分享鏈接 imgUrl: _this.newDetailObj.thu_image, // 分享圖標 success: function (res) { // 用戶確認分享后執行的回調函數 logUtil.printLog("分享到QQ空間成功返回的信息為:",res); }, cancel: function (res) { // 用戶取消分享后執行的回調函數 logUtil.printLog("取消分享到QQ空間返回的信息為:",res); } }); });在這個過程中出現的錯誤就是:config:invalid signature，這個錯誤就說明簽名不對，這時候需要靜下心來去想想，然后進行排除，我最后發現原來是當前的url的錯誤，看了網上很多都是url需要進行編碼，我也是這樣做的，但一直出現config:invalid signature
原來的:
let url = encodeURIComponent(window.location.href.split('#')[0]);修改后
let url = window.location.href.split('#')[0];就不錯了，最后來看看效果
一般出現這個問題，大部分都是url的問題哦。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
