記錄一次開(kāi)發(fā)微信網(wǎng)頁(yè)分享的步驟
需求
最近在做一個(gè)項(xiàng)目需求,分享領(lǐng)好書(shū)活動(dòng),獲取用戶的個(gè)人信息以及unionID,并誘導(dǎo)用戶分享給好友或朋友圈,達(dá)到裂變拉新的目的。在做的過(guò)程中遇到了一些坑的地方,所以回過(guò)來(lái)總結(jié)一下
技術(shù)方案
使用微信JS-SDK自定義分享到好友和分享到朋友圈
實(shí)現(xiàn)步驟
1、要實(shí)現(xiàn)微信H5網(wǎng)頁(yè)自定義分享功能,必須先熟悉下微信公眾平臺(tái)開(kāi)發(fā)文檔,具體文檔里面說(shuō)的很詳細(xì),這里說(shuō)下需要注意的點(diǎn),別忘了綁定開(kāi)發(fā)者權(quán)限,還有綁定js安全域名,要不然有可能會(huì)報(bào)redirect_uri參數(shù)錯(cuò)誤。
2、首先一般在做微信H5網(wǎng)頁(yè)活動(dòng),都需要獲取用戶的個(gè)人信息,這就需要用戶授權(quán),一般授權(quán)有兩種方式,一種是靜默授權(quán),一種是網(wǎng)頁(yè)授權(quán),這個(gè)在微信開(kāi)發(fā)文檔說(shuō)的很詳細(xì)。
對(duì)于已關(guān)注公眾號(hào)的用戶,如果用戶從公眾號(hào)的會(huì)話或者自定義菜單進(jìn)入本公眾號(hào)的網(wǎng)頁(yè)授權(quán)頁(yè),即使是scope為snsapi_userinfo,也是靜默授權(quán),用戶無(wú)感知
一般網(wǎng)頁(yè)授權(quán)流程分為四步:
①引導(dǎo)用戶進(jìn)入授權(quán)頁(yè)面同意授權(quán),獲取code
②通過(guò)code換取網(wǎng)頁(yè)授權(quán)access_token(與基礎(chǔ)支持中的access_token不同)
③如果需要,開(kāi)發(fā)者可以刷新網(wǎng)頁(yè)授權(quán)access_token,避免過(guò)期
④通過(guò)網(wǎng)頁(yè)授權(quán)獲取用戶基本信息(openid 、UnionID、個(gè)人頭像、性別、省市、微信昵稱(chēng)等)
3、下面是具體實(shí)現(xiàn)代碼,說(shuō)下大概思路,通過(guò)判斷參數(shù)是否在微信瀏覽器中打開(kāi),是否讓用戶授權(quán),并重定向到微信的接口拿到code后通過(guò)接口傳給后端返回用戶的基本信息。
// 用戶授權(quán)
if (this.$route.query.from) {
// 跳轉(zhuǎn)微信頁(yè)面
let _nowUrl = window.location.href.split("?")[0] +`?pictureId=${this.$route.query.pictureId}`; // 參數(shù)拼接
let _shareUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=微信公眾號(hào)APPID&redirect_uri=${encodeURIComponent(_nowUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
window.location.href = _shareUrl; // 重定向到這個(gè)定義的URL
}
// 通過(guò)code獲取用戶信息
if (this.$route.query.code) {
let _code = this.$route.query.code;
this.handleWechatMsg(_code);
}
4、接下來(lái)就是如何自定義分享給好友或者朋友圈,同樣也是按照調(diào)用微信開(kāi)發(fā)文檔上說(shuō)的進(jìn)行配置和調(diào)用。在調(diào)用分享接口成功之后開(kāi)始調(diào)用分享api,并在調(diào)用成功之后的回調(diào)函數(shù)執(zhí)行跳頁(yè),這里微信那邊做了限制,如果用戶在點(diǎn)擊分享的時(shí)候取消了,默認(rèn)還是走success成功回調(diào)函數(shù),是拿不到最終分享成功的狀態(tài)。下面是實(shí)現(xiàn)分享的具體代碼
// 分享給朋友或朋友圈
wxChatShare(param) {
var that = this;
let _url = encodeURIComponent(param.url);
apiUrl.wechatConfig(_url).then(res => {
if (res.data.code == 200) {
wx.config({
debug: false,
appId: res.data.content.appid,
timestamp: res.data.content.timestamp, // 必填,生成簽名的時(shí)間戳
nonceStr: res.data.content.nonceStr, // 必填,生成簽名的隨機(jī)串
signature: res.data.content.signature, // 必填,簽名
jsApiList: [
"onMenuShareTimeline",
"onMenuShareAppMessage"
// "updateAppMessageShareData",
// "updateTimelineShareData"
]
});
// wx.ready(function() {
//分享到朋友圈
wx.onMenuShareTimeline({
title: param.title, // 分享標(biāo)題
link: param.link, // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
imgUrl: param.imgUrl, // 分享圖標(biāo)
success: function() {
// 用戶點(diǎn)擊了分享后執(zhí)行的回調(diào)函數(shù)
that.$Message.message("分享成功!");
that.toRouter();
}
});
//分享到好友
wx.onMenuShareAppMessage({
title: param.title, // 分享標(biāo)題
desc: param.desc, // 分享描述
link: param.link, // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
imgUrl: param.imgUrl, // 分享圖標(biāo)
type: param.type, // 分享類(lèi)型,music、video或link,不填默認(rèn)為link
dataUrl: param.dataUrl, // 如果type是music或video,則要提供數(shù)據(jù)鏈接,默認(rèn)為空
success: function() {
// 用戶點(diǎn)擊了分享后執(zhí)行的回調(diào)函數(shù)
that.$Message.message("分享成功!");
that.toRouter();
}
});
// wx.updateTimelineShareData({
// title: param.title, // 分享標(biāo)題
// link: param.link, // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
// imgUrl: param.imgUrl, // 分享圖標(biāo)
// success: function(res) {
// // 設(shè)置成功
// that.$Message.message("設(shè)置成功!");
// that.toRouter();
// }
// });
// //分享給朋友
// wx.updateAppMessageShareData({
// title: param.title, // 分享標(biāo)題
// desc: param.desc, // 分享描述
// link: param.link, // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
// imgUrl: param.imgUrl, // 分享圖標(biāo)
// success: function(res) {
// // 設(shè)置成功
// that.$Message.message("設(shè)置成功!");
// that.toRouter();
// }
// });
// });
wx.error(function(res) {
console.log("驗(yàn)證失敗返回的信息:", res);
});
} else {
console.log(res.data.message);
}
})
.catch(err => {
this.$Message.message(error);
});
},
總結(jié)
這里遇到比較坑的就是,在調(diào)用分享事件的時(shí)候,不能同時(shí)寫(xiě)四個(gè)分享按鈕事件,如果都寫(xiě)上,會(huì)造成在安卓機(jī)上還沒(méi)有點(diǎn)擊分享按鈕的時(shí)候,就已經(jīng)走分享成功success回調(diào)函數(shù)了,這里說(shuō)下為啥寫(xiě)四個(gè)分享按鈕事件,因?yàn)榘l(fā)現(xiàn)如果不寫(xiě)上即將廢掉的兩個(gè)onMenuShareTimeline、onMenuShareAppMessage會(huì)在安卓機(jī)上遇到不能分享的問(wèn)題,所以把新增的兩個(gè)分享按鈕事件updateAppMessageShareData、updateTimelineShareData注釋掉,就都可以分享了,iOS和安卓均沒(méi)問(wèn)題。
我發(fā)現(xiàn)其實(shí)遇到這種原因有可能是新舊兩個(gè)分享事件的執(zhí)行順序的問(wèn)題,也就是在調(diào)用新增的分享按鈕的時(shí)候,得先在wx.ready執(zhí)行,而即將廢棄的接口是不需要的。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于JS實(shí)現(xiàn)導(dǎo)航條之調(diào)用網(wǎng)頁(yè)助手小精靈的方法
在網(wǎng)站中加入網(wǎng)頁(yè)助手小精靈,當(dāng)用戶訪問(wèn)網(wǎng)站時(shí),向用戶問(wèn)好,或是傳遞一些網(wǎng)站的重要信息,給用戶帶來(lái)極好的體驗(yàn)感,那么基于js代碼是如何調(diào)用網(wǎng)頁(yè)助手小精靈的呢?下面跟著腳本之家小編一起學(xué)習(xí)吧2016-06-06
防止動(dòng)態(tài)加載JavaScript引起的內(nèi)存泄漏問(wèn)題
利用Script標(biāo)簽可以跨域加載并運(yùn)行一段JavaScript腳本, 但Neil Fraser先前已指出,腳本運(yùn)行后資源并沒(méi)被釋放,即使是Script標(biāo)簽移除后。2009-10-10
基于JavaScript偽隨機(jī)正態(tài)分布代碼實(shí)例
這篇文章主要介紹了基于JavaScript偽隨機(jī)正態(tài)分布代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
js中動(dòng)態(tài)創(chuàng)建json,動(dòng)態(tài)為json添加屬性、屬性值的實(shí)例
下面小編就為大家?guī)?lái)一篇js中動(dòng)態(tài)創(chuàng)建json,動(dòng)態(tài)為json添加屬性、屬性值的實(shí)例。小編覺(jué)的挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
JavaScript 判斷指定字符串是否為有效數(shù)字
最近在做一個(gè)ColdFusion的項(xiàng)目,有一個(gè)業(yè)務(wù)Check,需要用JavaScript實(shí)現(xiàn):判斷指定字符串是否為有效數(shù)字。2010-05-05
JS 輸入字?jǐn)?shù)判斷實(shí)現(xiàn)代碼
判斷輸入的字?jǐn)?shù)2009-08-08
使用Axios攔截器優(yōu)化HTTP請(qǐng)求與響應(yīng)的實(shí)踐案例
在前端開(kāi)發(fā)中,HTTP 請(qǐng)求是與后端交互的重要方式,為了提高代碼的可維護(hù)性、復(fù)用性以及用戶體驗(yàn),使用 Axios 攔截器是非常常見(jiàn)的做法,本文將詳細(xì)介紹如何使用 Axios 的請(qǐng)求攔截器和響應(yīng)攔截器,需要的朋友可以參考下2024-11-11
PHP自動(dòng)加載autoload和命名空間的應(yīng)用小結(jié)
PHP的自動(dòng)加載就是我們加載實(shí)例化類(lèi)的時(shí)候,不需要手動(dòng)去寫(xiě)require來(lái)導(dǎo)入這個(gè)class.php文件,程序自動(dòng)幫我們加載導(dǎo)入進(jìn)來(lái)這.篇文章主要介紹了PHP自動(dòng)加載autoload和命名空的應(yīng)用,需要的朋友可以參考下2017-12-12
JavaScript實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05
js canvas實(shí)現(xiàn)適用于移動(dòng)端的百分比儀表盤(pán)dashboard
這篇文章主要為大家詳細(xì)介紹了js canvas實(shí)現(xiàn)適用于移動(dòng)端的百分比儀表盤(pán)dashboard,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07

