我曾經(jīng)在系列文章中的《C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(11)--微信菜單的多種表現(xiàn)方式介紹》中介紹了微信菜單里面的重定向操作，通過(guò)這個(gè)重定向操作，我們可以獲取一個(gè)code值，然后獲取用戶的openID，進(jìn)而就能獲取到更多的用戶信息，這個(gè)在會(huì)員信息的場(chǎng)景里面用的很多，本篇介紹在網(wǎng)站中迅速配置這樣的菜單鏈接，并介紹如何在后臺(tái)獲取相關(guān)的用戶信息，實(shí)現(xiàn)頁(yè)面數(shù)據(jù)個(gè)性化的展現(xiàn)操作。

我們知道，微信的自定義菜單分為兩大類(lèi)，分別對(duì)應(yīng)Click類(lèi)型和View類(lèi)型的，而重定向?qū)儆赩iew類(lèi)型的一種，如下所示。

1、微信重定向菜單的配置

微信重定向的菜單，就是通過(guò)傳入一個(gè)地址參數(shù)，讓微信服務(wù)器進(jìn)行跳轉(zhuǎn)，它的主要規(guī)則如下所示。

對(duì)于scope=snsapi_base方式的鏈接如下：

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 

而對(duì)于scope=snsapi_userinfo方式的鏈接如下：

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=123#wechat_redirect

這兩個(gè)菜單鏈接主要就是對(duì)我們給定的鏈接地址進(jìn)行UrlEncode處理，然后把它賦值給參數(shù)redirect_uri實(shí)現(xiàn)的。

由于鏈接地址比較長(zhǎng)，如果每次需要在配置菜單的時(shí)候，都復(fù)制過(guò)來(lái)修改，非常不方便，我們可以在自定義菜單的配置界面里面，增加一個(gè)按鈕功能，對(duì)內(nèi)容進(jìn)行處理，以便實(shí)現(xiàn)我們需要的地址轉(zhuǎn)換，我的門(mén)戶應(yīng)用平臺(tái)對(duì)自定義菜單的操作就是基于這個(gè)思路實(shí)現(xiàn)。

默認(rèn)我們只需要填寫(xiě)一個(gè)需要重定向的url地址就可以了，如下所示。

如果需要配置成重定向的菜單鏈接地址，那么調(diào)用【轉(zhuǎn)換重定向菜單】按鈕操作，使用腳本函數(shù)進(jìn)行轉(zhuǎn)換就可以了，轉(zhuǎn)換后的結(jié)果如下所示。

原來(lái)就是利用后臺(tái)的javascript實(shí)現(xiàn)參數(shù)的URL轉(zhuǎn)碼，還需要獲取后臺(tái)的AppId，這樣才能構(gòu)造成完整的地址連接。

2、腳本轉(zhuǎn)換操作的實(shí)現(xiàn)代碼

前面說(shuō)了，第一是需要實(shí)現(xiàn)URL轉(zhuǎn)碼，第二是獲取后臺(tái)的AppId，然后生成一個(gè)完整的URL就可以了。為了避免大家的重復(fù)研究，我把這部分代碼貼出來(lái)一起學(xué)習(xí)下。

在使用前，我們還需要注意一個(gè)問(wèn)題，就是重定向到指定頁(yè)面后，這個(gè)頁(yè)面會(huì)帶有一個(gè)code的參數(shù)，這個(gè)參數(shù)非常重要，我們需要獲取出來(lái)，當(dāng)然也是通過(guò)javascript來(lái)獲取對(duì)應(yīng)的code參數(shù)了。

這個(gè)邏輯可以用一個(gè)腳本函數(shù)來(lái)實(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;

        }

定義了這個(gè)函數(shù)后，我們?cè)谥囟ㄏ虻捻?yè)面里面，可以獲取code參數(shù)的操作如下所示。

var code = getUrlVars()["code"];

先放下這些，我們先來(lái)討論如何把鏈接地址轉(zhuǎn)換為需要的鏈接地址操作。

我們?yōu)榱藢?shí)現(xiàn)鏈接地址的互相轉(zhuǎn)換（為了方便），我們可以判斷鏈接地址是否含有qq的域名就可以了。

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)換為重定向的鏈接地址，如下所示。

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);

                }

其中重定向鏈接需要帶有一個(gè)當(dāng)前微信開(kāi)發(fā)用戶的appId,這個(gè)不是固定的，是不同的開(kāi)發(fā)人員都不一樣的東西，這里使用了MVC的動(dòng)態(tài)對(duì)象進(jìn)行綁定：@ViewBag.appid。

在對(duì)應(yīng)的MenuController控制器里面，給它賦值就可以了。

        /// <summary>

        /// 默認(rèn)的視圖控制方法

        /// </summary>

        /// <returns></returns>

        public override ActionResult Index()

        {

            ViewBag.appid = GetAppId();

            return View();

        }

這樣配置后的重定向菜單地址列表就如下所示了，我們打開(kāi)對(duì)應(yīng)的記錄詳細(xì)頁(yè)面，可以通過(guò)頁(yè)面里面的功能按鈕，隨時(shí)對(duì)重定向菜單的地址進(jìn)行轉(zhuǎn)換，方便了解詳細(xì)的鏈接內(nèi)容。

3、重定向頁(yè)面的設(shè)計(jì)及處理 

配置了上面的鏈接地址后，我們需要在網(wǎng)站里面增加這樣的一個(gè)頁(yè)面進(jìn)行處理用戶的信息，一般情況下，我們可能是為了方便用戶查看自己的微信基礎(chǔ)信息，也為了給用戶綁定用戶個(gè)人數(shù)據(jù)使用的用途的，如用戶可以綁定手機(jī)、Email郵箱等操作，還可以綁定和業(yè)務(wù)系統(tǒng)相關(guān)的用戶名。這樣用戶就可以快速注冊(cè)會(huì)員或者和后臺(tái)的系統(tǒng)進(jìn)行關(guān)聯(lián)了。

我設(shè)計(jì)的兩個(gè)用戶信息展示界面如下所示。

這兩個(gè)界面主要使用了Jquery Mobile的相關(guān)內(nèi)容，對(duì)界面進(jìn)行了處理，整個(gè)模塊結(jié)合了短信驗(yàn)證碼的方式，對(duì)用戶的手機(jī)進(jìn)行驗(yàn)證處理，這樣能夠更高效的實(shí)現(xiàn)信息準(zhǔn)確的綁定操作，當(dāng)然，還可以結(jié)合外部系統(tǒng)，綁定用戶的賬號(hào)密碼，這樣用戶可以在微信進(jìn)入微網(wǎng)站平臺(tái)進(jìn)行購(gòu)物、數(shù)據(jù)維護(hù)、業(yè)務(wù)管理等操作了，其實(shí)一旦綁定外部系統(tǒng)的ID，也就是提供了一個(gè)快速進(jìn)行外部系統(tǒng)的入口了。

具體的內(nèi)容在下一篇繼續(xù)介紹了。 

如果對(duì)這個(gè)《C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用》系列感興趣，可以關(guān)注我的其他文章，系列隨筆如下所示：

C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(20)-微信企業(yè)號(hào)的菜單管理

C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(19)-微信企業(yè)號(hào)的消息發(fā)送（文本、圖片、文件、語(yǔ)音、視頻、圖文消息等）

C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(18)-微信企業(yè)號(hào)的通訊錄管理開(kāi)發(fā)之成員管理

C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(17)-微信企業(yè)號(hào)的通訊錄管理開(kāi)發(fā)之部門(mén)管理

C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(16)-微信企業(yè)號(hào)的配置和使用

C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(15)-微信菜單增加掃一掃、發(fā)圖片、發(fā)地理位置功能

 C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(14)-在微信菜單中采用重定向獲取用戶數(shù)據(jù)

C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(13)-使用地理位置擴(kuò)展相關(guān)應(yīng)用

C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(12)-使用語(yǔ)音處理

C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(11)--微信菜單的多種表現(xiàn)方式介紹

C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(10)--在管理系統(tǒng)中同步微信用戶分組信息

C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(9)-微信門(mén)戶菜單管理及提交到微信服務(wù)器

C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(8)-微信門(mén)戶應(yīng)用管理系統(tǒng)功能介紹

C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(7)-微信多客服功能及開(kāi)發(fā)集成

C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(6)--微信門(mén)戶菜單的管理操作

C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(5)--用戶分組信息管理

C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(4)--關(guān)注用戶列表及詳細(xì)信息管理

C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(3)--文本消息和圖文消息的應(yīng)答

C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(2)--微信消息的處理和應(yīng)答

C#開(kāi)發(fā)微信門(mén)戶及應(yīng)用(1)--開(kāi)始使用微信接口