我們知道,微信的自訂選單分為兩大類,分別對應(yīng)Click類型和View類型的,而重定向?qū)凫禫iew類型的一種,如下所示。
1、微信重定向選單的設(shè)定
微信重定向的選單,就是透過傳入一個位址參數(shù),讓微信伺服器進行跳轉(zhuǎn),它的主要規(guī)則如下所示。
scope=snsapi_base方式的連結(jié)如下:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3d81fc2886d86526&redirect_uri=http%3A%2F%2Fwww .iqidi.com%2Ftestwx.ashx&response_type=code&scope=snsapi_base&state=123#wechat_redirect?
而scope=snsapi_userinfo方式的連結(jié)如下:
https://open.weixin.qq.com/ connect/oauth2/authorize?appid=wx3d81fc2886d86526&redirect_uri=http%3A%2F%2Fwww.iqidi.com%2Ftestwx.ashx&response_type=code&scope=snsapi_userinfo&state&Fed#wem&state_c3#web&state_Ft#weiv&state&Ft#we的連結(jié)位址進行UrlEncode處理,然後把它賦值給參數(shù)redirect_uri實現(xiàn)的。
由於連結(jié)位址比較長,如果每次需要在設(shè)定選單的時候,都複製過來修改,非常不方便,我們可以在自訂選單的設(shè)定介面裡面,增加一個按鈕功能,對內(nèi)容進行處理,以便實現(xiàn)我們需要的地址轉(zhuǎn)換,我的門戶應(yīng)用平臺對自訂選單的操作就是基於這個思路實現(xiàn)。
預(yù)設(shè)我們只需要填入一個需要重定向的url位址就可以了,如下所示。
如果需要配置成重定向的選單連結(jié)位址,那麼呼叫【轉(zhuǎn)換重定向選單】按鈕操作,使用腳本函數(shù)進行轉(zhuǎn)換就可以了,轉(zhuǎn)換後的結(jié)果如下圖所示。
原來是利用後臺的javascript實作參數(shù)的URL轉(zhuǎn)碼,還需要取得後臺的AppId,這樣才能建構(gòu)成完整的位址連線。
2、腳本轉(zhuǎn)換操作的實作代碼
前面說了,第一是需要實作URL轉(zhuǎn)碼,第二是取得後臺的AppId,然後產(chǎn)生一個完整的URL就可以了。為了避免大家的重複研究,我把這部分程式碼貼出來一起學(xué)習(xí)下。
在使用前,我們還需要注意一個問題,就是重定向到指定頁面後,這個頁面會帶有一個code的參數(shù),這個參數(shù)非常重要,我們需要取得出來,當然也是透過javascript來取得了對應(yīng)的code參數(shù)。
這個邏輯可以用一個腳本函數(shù)來實現(xiàn),如下所示
function getUrlVars(){ var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; }定義了這個函數(shù)後,我們在重在定向的頁麵裡面,可以取得code參數(shù)的操作如下圖所示。
var code = getUrlVars()["code"];
先放下這些,我們先來討論如何把連結(jié)位址轉(zhuǎn)換為需要的連結(jié)位址操作。
我們?yōu)榱藢崿F(xiàn)連結(jié)位址的互相轉(zhuǎn)換(為了方便),我們可以判斷連結(jié)位址是否含有qq的網(wǎng)域就可以了。
if (url.indexOf("https://open.weixin.qq.com/connect/oauth2/authorize?") == 0) { var redirect_uri = getUrlVars(url)["redirect_uri"]; if (redirect_uri != "") { var newUrl = decodeURIComponent(redirect_uri); $("#" + ctrlName).val(newUrl); } }
而如果是我們輸入的正常鏈接,那麼就應(yīng)該把它轉(zhuǎn)換為重定向的連結(jié)地址,如下所示。
else { var newUrl = encodeURIComponent(url); var reNewUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=@ViewBag.appid&redirect_uri=" + newUrl + "&response_type=code&scope=snsapi_base&state=123#wechat_redirect"; $("#" + ctrlName).val(reNewUrl); }
其中重定向連結(jié)需要帶有一個當前微信開發(fā)用戶的appId,這個不是固定的,是不同的開發(fā)人員都不一樣的東西,這裡使用了MVC的動態(tài)物件來綁定:@ViewBag.appid。
在對應(yīng)的MenuController控制器裡面,將它賦值就好了。
/// <summary> /// 默認的視圖控制方法 /// </summary> /// <returns></returns> public override ActionResult Index() { ViewBag.appid = GetAppId(); return View(); }
這樣配置後的重定向選單位址清單就如下所示了,我們開啟對應(yīng)的記錄詳細頁面,可以透過頁面裡面的功能按鈕,隨時對重定向選單的位址進行轉(zhuǎn)換,方便了解詳細的連結(jié)內(nèi)容。
3、重定向頁面的設(shè)計及處理?
配置了上面的連結(jié)位址後,我們需要在網(wǎng)站裡面增加這樣的一個頁面進行處理用戶的信息,一般情況下,我們可能是為了方便用戶查看自己的微信基礎(chǔ)訊息,也為了給用戶綁定用戶個人資料使用的用途的,如用戶可以綁定手機、Email郵箱等操作,還可以綁定和業(yè)務(wù)系統(tǒng)相關(guān)的用戶名。這樣用戶就可以快速註冊會員或和後臺的系統(tǒng)進行關(guān)聯(lián)了。
我設(shè)計的兩個使用者資訊展示介面如下所示。
這兩個介面主要使用了Jquery Mobile的相關(guān)內(nèi)容,對介面進行了處理,整個模組結(jié)合了簡訊驗證碼的方式,對用戶的手機進行驗證處理,這樣能夠更有效率的實現(xiàn)訊息精確的綁定操作,當然,還可以結(jié)合外部系統(tǒng),綁定使用者的帳號密碼,這樣使用者可以在微信進入微網(wǎng)站平臺進行購物、資料維護、業(yè)務(wù)管理等操作了,其實一旦綁定外部系統(tǒng)的ID ,也就是提供了一個快速進行外部系統(tǒng)的入口了。
??
更多C#開發(fā)微信入口網(wǎng)站及應(yīng)用程式在微信選單中採用重定向取得使用者資料相關(guān)文章請關(guān)注PHP中文網(wǎng)!

熱AI工具

Undress AI Tool
免費脫衣圖片

Undresser.AI Undress
人工智慧驅(qū)動的應(yīng)用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境

Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)