VueJs單頁應(yīng)用實現(xiàn)微信網(wǎng)頁授權(quán)及微信分享功能示例
在實際開發(fā)中，無論是做PC端、WebApp端還是微信公眾號等類型的項目的時候，或多或少都會涉及到微信相關(guān)的開發(fā)，最近公司項目要求實現(xiàn)微信網(wǎng)頁授權(quán)，并獲取微信用戶基本信息的功能及微信分享的功能，現(xiàn)在總算完成了，但開發(fā)過程中遇到好幾個坑。廢話不多說了，開始正題。
描述點
- 微信相關(guān)開發(fā)知識了解
- 怎么樣實現(xiàn)微信相關(guān)功能本地測試
- 微信網(wǎng)頁授權(quán)
- 微信分享
微信相關(guān)開發(fā)知識了解
- 微信公眾號的appId，AppSecret
- 當(dāng)我們注冊一個微信公眾號后，便能夠得到一個appId(每個微信公眾號只有一個，一個微信公眾號唯一的標識)和appSecret(可以進行重置)，這兩個信息是進行微信公眾號開發(fā)必不可少的，因為微信公眾號中幾乎所有功能的開發(fā)都與這兩個信息相關(guān)。
- 微信公眾號中IP白名單
- 在開發(fā)微信公眾功能的時候，需要我們添加IP白名單，這樣以便能夠獲取到access_token，關(guān)于access_token的介紹請看這里https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183
- 網(wǎng)頁授權(quán)域名以及JS接口安全域名
- 網(wǎng)頁授權(quán)域名:在我們的應(yīng)用中需要微信用戶進行登錄、獲取微信用戶基本信息的時候，需要設(shè)置這個域名
- JS接口安全域名:在我們的應(yīng)用中需要實現(xiàn)微信分享等功能，需要設(shè)置這個域名。
怎么樣實現(xiàn)微信相關(guān)功能本地測試
相對很多人都對這個問題比較感興趣，因為在進行涉及到微信公眾號中功能開發(fā)的時候，默認情況下我們是不能進行本地測試的，也就是說測試都需要將代碼進行部署才測試，但這非常不利于我們的測試開發(fā)，其實進行本地測試開發(fā)很簡單，只需要我們有一個域名就可以了，然后將我們本地的ip映射到這個域名上，就可以本地測試了。下面我就說說我是怎么做本地測試的.
因為購買域名需要進行備案操作之類的，比較麻煩，所以一般第三方平臺就可以讓我們得到一個域名。我是在natpp(ngrok)這個網(wǎng)站上注冊的https://natapp.cn/
我是花了五元錢購買了一個月的隧道，因為免費的不怎么靠譜，畢竟是免費的，哈哈。
注意，我們不能直接使用這個隧道，因為這個隧道是三級域名，無法用于微信開發(fā)，需要綁定一個二級域名或自主域名
當(dāng)綁定完域名之后，在本地我們需要將本地ip進行映射穿透操作。
windows下打開dos窗口，輸入 natapp -authtoken 你的隧道的authtoken
將你在上面設(shè)置的二級域名添加到上述說的網(wǎng)頁授權(quán)域名以及JS接口安全域名
接下來便可以進行本地測試了.最后說一下，開發(fā)過程中下載微信開發(fā)工具進行調(diào)試也是不錯的選擇，下載地址https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140
微信網(wǎng)頁授權(quán)
微信網(wǎng)頁授權(quán)的目的主要是實現(xiàn)三方站點微信的登錄、獲取微信用戶信息等
實現(xiàn)微信網(wǎng)頁授權(quán)獲取微信用戶的基本信息
先判斷當(dāng)前瀏覽器是不是微信內(nèi)置瀏覽器,微信網(wǎng)頁授權(quán)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 第一步：用戶同意授權(quán)，獲取code
2 第二步：通過code換取網(wǎng)頁授權(quán)access_token
3 第三步：刷新access_token（如果需要）
4 第四步：拉取用戶信息(需scope為 snsapi_userinfo)
5 附：檢驗授權(quán)憑證（access_token）是否有效
微信API里面關(guān)于這些都介紹得比較清楚的，我就說說在這個過程中我所遇到的問題，以及解決辦法
在第一步獲取code的時候，因為這個code在五分鐘之內(nèi)只能夠使用一次，所以必須對這個code進行緩存起來。否則會出現(xiàn)"errcode":40163,"errmsg":"code been used, hints: [ req_id: nOCEBa0466th12 ]"或{"errcode":40029,"errmsg":"invalid code"} 錯誤。
微信分享
微信分享其實用得非常得多，我就簡單說下在vue-cli中怎么引入微信分享的sdk，以及怎么樣實現(xiàn)分享功能.
微信分享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';
微信分享中最重要的是獲取到簽名，才能夠?qū)崿F(xiàn)微信的分享
再根據(jù)當(dāng)前的url去獲取到所需要的參數(shù)來完成簽名的驗證，參數(shù)主要用appId、nonceStr、timestamp、signature，然后通過wx對象的config方法去進行配置驗證簽名
wx.config({
debug: false,
appId: appId, // 和獲取Ticke的必須一樣------必填，公眾號的唯一標識
timestamp:timestamp, // 必填，生成簽名的時間戳
nonceStr: nonceStr, // 必填，生成簽名的隨機串
signature: signature,// 必填，簽名，見附錄1
//需要分享的列表項:發(fā)送給朋友，分享到朋友圈，分享到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], // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
imgUrl: _this.newDetailObj.thu_image, // 分享圖標
success: function (res) {
// 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
logUtil.printLog("分享到朋友圈成功返回的信息為:",res);
_this.showMsg("分享成功!")
},
cancel: function (res) {
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
logUtil.printLog("取消分享到朋友圈返回的信息為:",res);
}
});
//分享給朋友
wx.onMenuShareAppMessage({
title: _this.newDetailObj.title, // 分享標題
desc: _this.desc, // 分享描述
link: window.location.href.split('#')[0], // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
imgUrl: _this.newDetailObj.thu_image, // 分享圖標
type: '', // 分享類型,music、video或link，不填默認為link
dataUrl: '', // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認為空
success: function (res) {
// 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
logUtil.printLog("分享給朋友成功返回的信息為:",res);
},
cancel: function (res) {
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
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) {
// 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
logUtil.printLog("分享到QQ好友成功返回的信息為:",res);
},
cancel: function (res) {
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
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) {
// 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
logUtil.printLog("分享到QQ空間成功返回的信息為:",res);
},
cancel: function (res) {
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
logUtil.printLog("取消分享到QQ空間返回的信息為:",res);
}
});
});
在這個過程中出現(xiàn)的錯誤就是:config:invalid signature，這個錯誤就說明簽名不對，這時候需要靜下心來去想想，然后進行排除，我最后發(fā)現(xiàn)原來是當(dāng)前的url的錯誤，看了網(wǎng)上很多都是url需要進行編碼，我也是這樣做的，但一直出現(xiàn)config:invalid signature
原來的:
let url = encodeURIComponent(window.location.href.split('#')[0]);
修改后
let url = window.location.href.split('#')[0];
就不錯了，最后來看看效果
一般出現(xiàn)這個問題，大部分都是url的問題哦。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue項目及axios請求獲取數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本篇文章主要介紹了淺談Vuejs中nextTick()異步更新隊列源碼解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
Vue配合Vant使用時area省市區(qū)選擇器的使用方式
這篇文章主要介紹了Vue配合Vant使用時area省市區(qū)選擇器的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
V部落是一個多用戶博客管理平臺。這篇文章主要介紹了Vue+SpringBoot開發(fā)V部落博客管理平臺,需要的朋友可以參考下2017-12-12
這篇文章主要為大家詳細介紹了require.js+vue+vue-router+vue-resource開發(fā)微信上傳圖片組件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
為了給Vue一個提示,以便它能跟蹤每個節(jié)點的身份,從而重用和重新排序現(xiàn)有元素,你需要為每項提供一個唯一key屬性,下面這篇文章主要給大家介紹了關(guān)于Vue深入理解之v-for中key的真正作用,需要的朋友可以參考下2022-05-05
vue.js實現(xiàn)數(shù)據(jù)庫的JSON數(shù)據(jù)輸出渲染到html頁面功能示例
這篇文章主要介紹了vue.js實現(xiàn)數(shù)據(jù)庫的JSON數(shù)據(jù)輸出渲染到html頁面功能,結(jié)合實例形式分析了vue.js針對本地json數(shù)據(jù)的讀取、遍歷輸出相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
本篇文章主要介紹了webstorm和.vue中es6語法報錯的解決方法，小編總結(jié)了webstorm和.vue中出現(xiàn)的es6語法報錯，避免大家采坑，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
下面小編就為大家分享一篇淺談vue引入css,less遇到的坑和解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue如何實現(xiàn)未登錄不能訪問某些頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03