国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

記錄一次開發(fā)微信網(wǎng)頁分享的步驟

來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 21:57:35
文檔

記錄一次開發(fā)微信網(wǎng)頁分享的步驟

記錄一次開發(fā)微信網(wǎng)頁分享的步驟:需求 最近在做一個項目需求,分享領(lǐng)好書活動,獲取用戶的個人信息以及unionID,并誘導(dǎo)用戶分享給好友或朋友圈,達(dá)到裂變拉新的目的。在做的過程中遇到了一些坑的地方,所以回過來總結(jié)一下 技術(shù)方案 使用微信JS-SDK自定義分享到好友和分享到朋友圈 實現(xiàn)步驟
推薦度:
導(dǎo)讀記錄一次開發(fā)微信網(wǎng)頁分享的步驟:需求 最近在做一個項目需求,分享領(lǐng)好書活動,獲取用戶的個人信息以及unionID,并誘導(dǎo)用戶分享給好友或朋友圈,達(dá)到裂變拉新的目的。在做的過程中遇到了一些坑的地方,所以回過來總結(jié)一下 技術(shù)方案 使用微信JS-SDK自定義分享到好友和分享到朋友圈 實現(xiàn)步驟

需求

最近在做一個項目需求,分享領(lǐng)好書活動,獲取用戶的個人信息以及unionID,并誘導(dǎo)用戶分享給好友或朋友圈,達(dá)到裂變拉新的目的。在做的過程中遇到了一些坑的地方,所以回過來總結(jié)一下

技術(shù)方案

使用微信JS-SDK自定義分享到好友和分享到朋友圈

實現(xiàn)步驟

1、要實現(xiàn)微信H5網(wǎng)頁自定義分享功能,必須先熟悉下微信公眾平臺開發(fā)文檔,具體文檔里面說的很詳細(xì),這里說下需要注意的點,別忘了綁定開發(fā)者權(quán)限,還有綁定js安全域名,要不然有可能會報redirect_uri參數(shù)錯誤。

2、首先一般在做微信H5網(wǎng)頁活動,都需要獲取用戶的個人信息,這就需要用戶授權(quán),一般授權(quán)有兩種方式,一種是靜默授權(quán),一種是網(wǎng)頁授權(quán),這個在微信開發(fā)文檔說的很詳細(xì)。

對于已關(guān)注公眾號的用戶,如果用戶從公眾號的會話或者自定義菜單進(jìn)入本公眾號的網(wǎng)頁授權(quán)頁,即使是scope為snsapi_userinfo,也是靜默授權(quán),用戶無感知
一般網(wǎng)頁授權(quán)流程分為四步:

①引導(dǎo)用戶進(jìn)入授權(quán)頁面同意授權(quán),獲取code

②通過code換取網(wǎng)頁授權(quán)access_token(與基礎(chǔ)支持中的access_token不同)

③如果需要,開發(fā)者可以刷新網(wǎng)頁授權(quán)access_token,避免過期

④通過網(wǎng)頁授權(quán)獲取用戶基本信息(openid 、UnionID、個人頭像、性別、省市、微信昵稱等)

3、下面是具體實現(xiàn)代碼,說下大概思路,通過判斷參數(shù)是否在微信瀏覽器中打開,是否讓用戶授權(quán),并重定向到微信的接口拿到code后通過接口傳給后端返回用戶的基本信息。

// 用戶授權(quán)
 if (this.$route.query.from) {
 // 跳轉(zhuǎn)微信頁面
 let _nowUrl = window.location.href.split("?")[0] +`?pictureId=${this.$route.query.pictureId}`; // 參數(shù)拼接
 let _shareUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=微信公眾號APPID&redirect_uri=${encodeURIComponent(_nowUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
 window.location.href = _shareUrl; // 重定向到這個定義的URL
 }
 // 通過code獲取用戶信息
 if (this.$route.query.code) {
 let _code = this.$route.query.code;
 this.handleWechatMsg(_code);
 }

4、接下來就是如何自定義分享給好友或者朋友圈,同樣也是按照調(diào)用微信開發(fā)文檔上說的進(jìn)行配置和調(diào)用。在調(diào)用分享接口成功之后開始調(diào)用分享api,并在調(diào)用成功之后的回調(diào)函數(shù)執(zhí)行跳頁,這里微信那邊做了限制,如果用戶在點擊分享的時候取消了,默認(rèn)還是走success成功回調(diào)函數(shù),是拿不到最終分享成功的狀態(tài)。下面是實現(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, // 必填,生成簽名的時間戳
 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īng)的公眾號JS安全域名一致
 imgUrl: param.imgUrl, // 分享圖標(biāo)
 success: function() {
 // 用戶點擊了分享后執(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īng)的公眾號JS安全域名一致
 imgUrl: param.imgUrl, // 分享圖標(biāo)
 type: param.type, // 分享類型,music、video或link,不填默認(rèn)為link
 dataUrl: param.dataUrl, // 如果type是music或video,則要提供數(shù)據(jù)鏈接,默認(rèn)為空
 success: function() {
 // 用戶點擊了分享后執(zhí)行的回調(diào)函數(shù)
 that.$Message.message("分享成功!");
 that.toRouter();
 }
 });

 // wx.updateTimelineShareData({
 // title: param.title, // 分享標(biāo)題
 // link: param.link, // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號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īng)的公眾號JS安全域名一致
 // imgUrl: param.imgUrl, // 分享圖標(biāo)
 // success: function(res) {
 // // 設(shè)置成功
 // that.$Message.message("設(shè)置成功!");
 // that.toRouter();
 // }
 // });
 // });
 wx.error(function(res) {
 console.log("驗證失敗返回的信息:", res);
 });
 } else {
 console.log(res.data.message);
 }
 })
 .catch(err => {
 this.$Message.message(error);
 });
 },

總結(jié)

這里遇到比較坑的就是,在調(diào)用分享事件的時候,不能同時寫四個分享按鈕事件,如果都寫上,會造成在安卓機(jī)上還沒有點擊分享按鈕的時候,就已經(jīng)走分享成功success回調(diào)函數(shù)了,這里說下為啥寫四個分享按鈕事件,因為發(fā)現(xiàn)如果不寫上即將廢掉的兩個onMenuShareTimeline、onMenuShareAppMessage會在安卓機(jī)上遇到不能分享的問題,所以把新增的兩個分享按鈕事件updateAppMessageShareData、updateTimelineShareData注釋掉,就都可以分享了,iOS和安卓均沒問題。

我發(fā)現(xiàn)其實遇到這種原因有可能是新舊兩個分享事件的執(zhí)行順序的問題,也就是在調(diào)用新增的分享按鈕的時候,得先在wx.ready執(zhí)行,而即將廢棄的接口是不需要的。


聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

記錄一次開發(fā)微信網(wǎng)頁分享的步驟

記錄一次開發(fā)微信網(wǎng)頁分享的步驟:需求 最近在做一個項目需求,分享領(lǐng)好書活動,獲取用戶的個人信息以及unionID,并誘導(dǎo)用戶分享給好友或朋友圈,達(dá)到裂變拉新的目的。在做的過程中遇到了一些坑的地方,所以回過來總結(jié)一下 技術(shù)方案 使用微信JS-SDK自定義分享到好友和分享到朋友圈 實現(xiàn)步驟
推薦度:
標(biāo)簽: 微信 分享 流程
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 久久精品国产免费中文 | 国产精选在线观看 | 日韩 欧美 亚洲 | 影音先锋亚洲综合小说在线 | 久久精品国产一区 | 国产欧美综合一区二区 | 国产偷自拍 | 国产一级α片 | 国产不卡视频在线播放 | 日韩欧美在线免费观看 | 欧美精品久久久亚洲 | 国产欧美一区二区精品性色99 | 99视频九九精品视频在线观看 | 亚洲一区二区三区四区在线观看 | 日本韩国一区二区 | 3a毛片| 成人看免费一级毛片 | 东京热毛片 | 欧美日韩国产三级 | 五月天色综合 | 日韩在线观看不卡 | 97在线视频免费 | 欧美日韩国内 | 日本成本人观看免费fc2 | 国产资源在线播放 | 日韩精品第1页 | 亚洲偷 | 国产欧美综合在线一区二区三区 | 亚洲专区欧美 | 国产精选一区二区 | 亚洲经典一区 | 久久亚洲精品国产精品婷婷 | 国精产品一区 | 亚洲色图 欧美 | 欧美日韩国产三级 | 全免费a级毛片免费毛视频 热re91久久精品国产91热 | 欧美色亚洲图 | 亚洲小视频在线 | 92国产精品| 精品亚洲性xxx久久久 | 卡通动漫亚洲 |