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