支付寶支付成功后通知在微信打開的提示頁面

背景

正常情況下，在微信瀏覽器使用支付寶支付，會出現一大坨鏈接，讓你手動的復制到瀏覽器打開去操作。

這樣的用戶體驗，別說用戶，就連沒有審美的程序員也不能忍的。

於是阿力餅餅給出了方案，倒不是解決跳轉的問題，只是把那個不友好的提示，通過判斷，給出已給相對友好的提示。

在園友的文章：騰騰流氓，雲雲更流氓（問微信怎樣接入支付寶支付），手賤的趕緊點，你會感謝我的 里，有詳細的介紹。

等到你在瀏覽器里支付完成之后（如果有喚起支付寶APP，那么將在APP里支付），手動的關閉瀏覽器，回到微信。

這個時候，你會發現，微信上還是那個友好的提示頁面。

關於這個問題，原文中也給出了辦法：

首先呢，在pay方法中添加一個參數，可以為orderid，然后同加密后的url一起跳轉到pay.htm，再然后，在pay.htm頁面中獲取到orderid，寫個定時器，每隔幾秒中去服務器查詢訂單的支付狀態，如果支付成功了，就跳轉到支付成功的頁面。用戶再返回微信的時候看到的就不會是“快到碗里來”的提示了。

這是個辦法，這個辦法同樣的適用於，在PC端使用微信掃碼支付后頁面的跳轉。見：https://www.zhihu.com/question/30355733

關於消息推送，可以看這篇文章獲取更多信息：WebSocket與消息推送。文章中提到了SignalR：

SignalR是一個ASP .NET下的類庫，可以在ASP .NET的Web項目中實現實時通信。在Web網頁與服務器端間建立Socket連接，當WebSockets可用時（即瀏覽器支持Html5）SignalR使用WebSockets，當不支持時SignalR將使用長輪詢來保證達到相同效果。
官網：http://signalr.net/
源碼：https://github.com/SignalR/SignalR

 

思路

那我們就嘗試使用SignalR解決此問題，解決思路如下：

1.支付寶支付完成

2.支付寶會請求你設置的notify_url

3.在此方法中，處理你的業務邏輯，處理成功，則通知在微信里的提示頁面

4.頁面獲取到通知信息，跳轉到支付成功頁面

5.等用戶返回微信后，看到的就是支付成功頁面了。

 

實現

首先我們下載官方demo:Tutorial: Getting Started with SignalR 2

是一個網頁聊天的例子，我們加以改造。

新建hub類：

    public class TestHub : Hub
    {

    }

控制器代碼：

  public class TestController : Controller
    {
        public void CallBack()
        {
            //模擬支付寶支付成功后，notify方法
            //業務邏輯......
            //通知客戶端
            var context = GlobalHost.ConnectionManager.GetHubContext<TestHub>();
            context.Clients.All.addNewMessageToPage("ok");
        }

        public ActionResult Default()
        {
            return View();
        }
    }

View頁面代碼：

@{
    ViewBag.Title = "SignalR";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link rel="stylesheet" href="/Theme/Css/Login.css">
<div class="main">
    接收到服務端的通知，我就跳轉至博客園
</div>

<script src="~/Theme/Js/jquery.signalR-2.0.3.min.js"></script>
<script src="~/signalr/hubs"></script>
<script>
    $(function () {
        // Reference the auto-generated proxy for the hub.
        var chat = $.connection.chatHub;

        // Create a function that the hub can call back to display messages.
        chat.client.addNewMessageToPage = function (str) {
            //服務器返回
            if (str == "ok") {
                window.location.href = "https://www.cnblogs.com/";
            }
        };

        $.connection.hub.start().done(function () {
            //chat.server.send("ok");
        });
    });
</script>

這樣的話，我們微信打開/Test/Default頁面，再訪問/Test/CallBack，就會發現/Test/Default頁面跳轉到博客園了。

（完）