【原創分享·微信支付】 C# MVC 微信支付教程系列之公眾號支付

本文轉載自查看原文 2016-05-30 15:13 17198

微信支付教程系列之公眾號支付

今天，我們接着講微信支付的系列教程，前面，我們講了這個微信紅包和掃碼支付。現在，我們講講這個公眾號支付。公眾號支付的應用環境常見的用戶通過公眾號，然后再通過公眾號里面的菜單鏈接，進入公眾號的商城，然后在里面完成購買和支付功能，我們可以看看官方對這個公眾號支付的場景的解釋，鏈接： https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_1，通過這個官方的解釋，那我們大概清楚這個公眾號的用途了，下面，我就說說，做這個公眾號支付的准備工作有哪些了。

1、下載微信web開發者工具，工具的使用方式，也看鏈接，地址： https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140&token=&lang=zh_CN

2、配置“微信支付”環境，如下圖：

3、授權獲取用戶信息，如下圖：

下面開始，一步一步往下走。

一、我們先開發程序，首先，新建一個MVC工程（asp.net的話，官方給的demo就是asp.net的，可以下載來參考： https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1 ），名為：微信支付之公眾號支付，如下圖：

然后右鍵項目，我們修改一下屬性，如下圖：

然后我們再把程序自動生成的HomeController.cs和View里面的刪掉，再新建一個HomeController.cs和添加View，代碼如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Web.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
    }
}

View代碼：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
    </div>
</body>
</html>

嗯，沒錯，目前還是空的，現在我們開始寫前台，代碼如下（我先貼上代碼，后續再解釋為啥這么做，因為如果一步步的寫下去，按照前面兩個的篇幅來，我覺得都可以開課了，所以，我先上代碼，然后再一步步解釋。）：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>電表充值服務</title>
    <link href="~/Scripts/jquery-easyui-1.4.5/themes/bootstrap/easyui.css" rel="stylesheet" />
    <link href="~/Scripts/jquery-easyui-1.4.5/themes/mobile.css" rel="stylesheet" />
    <link href="~/Scripts/jquery-easyui-1.4.5/themes/icon.css" rel="stylesheet" />
    <style type="text/css">
        body{
            margin:0;
            padding:0;
        }
        .logo {
            width: 100%;
            height: 70px;
            background: url(/Images/EleLogo.png) 0 0 no-repeat;
            background-size: 100% 100%;
            padding: 0;
            margin: 0;
        }

        .line {
            width: 100%;
            float: left;
            height: auto;
            text-align: center;
            margin-top: 10px;
        }

        .lineText {
            width: 100%;
            float: left;
            height: auto;
            text-indent: 5%;
            text-align: left;
            font-size: x-large;
            margin: 0;
        }

        .function {
            height: 60pt;
            line-height: 60pt;
            width: 45%;
            float: left;
            border-radius: 10px;
            background-color: #990000;
            margin-left: 8pt;
        }

        .title {
            font-family: "微軟雅黑";
            font-size: x-large;
            color: white;
        }

        a {
            text-decoration: none;
            color: white;
        }

        input {
            vertical-align: central;
        }

        label {
            vertical-align: central;
        }

        .lbBlock {
            border: 1px solid #808080;
            background-color: grey;
            width: 90%;
            margin-left: 5%;
            font-size: x-large;
            border-radius: 10px;
            text-align: left;
            text-indent: 10pt;
            height: 30pt;
            padding-top: 5pt;
        }

        .btn {
            width: 90%;
            height: 35pt;
            font-size: x-large;
            background-color: #990000;
            color: white;
            background: url(/Images/red.png) 0 0 repeat;
            border: none;
            border-radius: 10px;
            margin: 10px 0 0 0;
        }

        .input {
            height: 30pt;
            width: 90%;
            font-size: x-large;
            border-radius: 10px;
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <div class="logo">
    </div>
    <form id="ChargeForm">        
        <div class="line">
            <div class="lineText">
                充值金額:
            </div>
        </div>
        <div class="line">
            <input type="number" id="ChargeVal" name="ChargeVal" class="input" placeholder="單位:元" />
        </div>       
    </form>
    <div class="line">
        <input type="button" class="btn" value="立即充值" onclick="fCharge()" style="margin-top: 20px;" />
    </div>
    <div class="line">
        <input type="button" id="btnHome" class="btn" value="返回主頁" onclick="fBackHome()" />
    </div>
    <script src="~/Scripts/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="~/Scripts/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="~/Scripts/jquery-easyui-1.4.5/jquery.easyui.mobile.js"></script>
    <script src="~/Scripts/jquery-easyui-1.4.5/easyloader.js"></script>
    <script type="text/javascript">
        $(function () {
            var vCode = getQueryString("code");
            if (vCode != "" && vCode != null) {
                //alert(vCode);
                $.ajax({
                    type: 'post',
                    data: {
                        code: vCode
                    },
                    url: '/Home/getWxInfo',
                    success: function (sjson) {
                        //alert(sjson);
                        //var vData = JSON.stringify(sjson);
                        //alert(vData);
                        $.messager.show({
                            title: '提示',
                            msg: '歡迎您來到微信端充值中心。'
                        });
                    }
                })
            }
            else {
                $.ajax({
                    type: 'post',
                    url: '/Home/getCode',
                    success: function (sjson) {
                        //alert(sjson);
                        location.href = sjson;
                    }
                })
            }
        })
        //獲取url的參數
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }





        //初始化微信支付環境
        function fCharge() {
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                fPostCharge();
            }
        }
        //提交充值數據
        function fPostCharge() {
            var vChargeVal = $("#ChargeVal").val();
            vChargeVal = parseFloat(vChargeVal);
            if (vChargeVal > 0) {
                $.messager.progress({
                    title: "",
                    msg: "正在調用微信支付接口,請稍后..."
                });
                $.ajax({
                    type: "post",
                    data: "totalfee=" + vChargeVal,
                    url: "/Home/MeterRecharge",
                    success: function (json) {
                        $.messager.progress('close');//記得關閉
                        //var json = eval("(" + msg + ")");//轉換后的JSON對象
                        onBridgeReady(json);
                    },
                    error: function () {
                        $.messager.progress('close');//記得關閉
                        $.messager.alert("提示", '調用微信支付模塊失敗，請稍后再試。', 'info')
                    }
                })
            }
            else {
                alert("房間名或者充值金額不可以為空或者為負數,請確認后再試.")
            }
        }
        //調用微信支付模塊
        function onBridgeReady(json) {
            WeixinJSBridge.invoke(
           'getBrandWCPayRequest', {
               "appId": json.appId,     //公眾號名稱，由商戶傳入
               "timeStamp": json.timeStamp,         //時間戳，自1970年以來的秒數
               "nonceStr": json.nonceStr, //隨機串
               "package": json.packageValue,
               "signType": "MD5",         //微信簽名方式:
               "paySign": json.paySign //微信簽名
           },
           function (res) {
               if (res.err_msg == "get_brand_wcpay_request:ok") {
                   //alert("支付成功,請稍后查詢余額,如有疑問,請聯系管理員.");
                   fAlreadyPay();
               }     // 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在用戶支付成功后返回    ok，但並不保證它絕對可靠。
           }
            );
        }
        function fBackHome() {
            location.href = "/";
        }
    </script>
</body>
</html>

后台代碼如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Web.Models;
using WxPayAPI;

namespace Web.Controllers
{
    public class HomeController : Controller
    {
        JsApiPay jsApiPay = new JsApiPay();
        // GET: Home
        public ActionResult Index()
        {
            if (Session["openid"] == null)
            {
                try
                {
                    //調用【網頁授權獲取用戶信息】接口獲取用戶的openid和access_token
                    GetOpenidAndAccessToken();

                }
                catch (Exception ex)
                {
                    //Response.Write(ex.ToString());
                    //throw;
                }
            }
            return View();
        }


        /**
        * 
        * 網頁授權獲取用戶基本信息的全部過程
        * 詳情請參看網頁授權獲取用戶基本信息：http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html
        * 第一步：利用url跳轉獲取code
        * 第二步：利用code去獲取openid和access_token
        * 
        */
        public void GetOpenidAndAccessToken()
        {
            if (Session["code"] != null)
            {
                //獲取code碼，以獲取openid和access_token
                string code = Session["code"].ToString();
                Log.Debug(this.GetType().ToString(), "Get code : " + code);
                jsApiPay.GetOpenidAndAccessTokenFromCode(code);
            }
            else
            {
                //構造網頁授權獲取code的URL
                string host = Request.Url.Host;
                string path = Request.Path;
                string redirect_uri = HttpUtility.UrlEncode("http://" + host + path);
                //string redirect_uri = HttpUtility.UrlEncode("http://gzh.lmx.ren");
                WxPayData data = new WxPayData();
                data.SetValue("appid", WxPayConfig.APPID);
                data.SetValue("redirect_uri", redirect_uri);
                data.SetValue("response_type", "code");
                data.SetValue("scope", "snsapi_base");
                data.SetValue("state", "STATE" + "#wechat_redirect");
                string url = "https://open.weixin.qq.com/connect/oauth2/authorize?" + data.ToUrl();
                Log.Debug(this.GetType().ToString(), "Will Redirect to URL : " + url);
                Session["url"] = url;               
            }
        }


        /// <summary>
        /// 獲取code
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public ActionResult getCode()
        {
            object objResult = "";
            if (Session["url"] != null)
            {
                objResult = Session["url"].ToString();
            }
            else
            {
                objResult = "url為空。";
            }
            return Json(objResult);
        }

        /// <summary>
        /// 通過code換取網頁授權access_token和openid的返回數據
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public ActionResult getWxInfo()
        {
            object objResult = "";
            string strCode = Request.Form["code"];
            if (Session["access_token"] == null || Session["openid"] == null)
            {
                jsApiPay.GetOpenidAndAccessTokenFromCode(strCode);
            }
            string strAccess_Token = Session["access_token"].ToString();
            string strOpenid = Session["openid"].ToString();
            objResult = new { openid = strOpenid, access_token = strAccess_Token };
            return Json(objResult);
        }




        /// <summary>
        /// 充值
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public ActionResult MeterRecharge()
        {
            object objResult = "";
            string strTotal_fee = Request.Form["totalfee"];
            string strFee = (double.Parse(strTotal_fee) * 100).ToString();

            //若傳遞了相關參數，則調統一下單接口，獲得后續相關接口的入口參數
            jsApiPay.openid = Session["openid"].ToString();
            jsApiPay.total_fee = int.Parse(strFee);

            //JSAPI支付預處理
            try
            {
                string strBody = "南宮蕭塵微信支付";//商品描述
                WxPayData unifiedOrderResult = jsApiPay.GetUnifiedOrderResult(strBody);
                WxPayData wxJsApiParam = jsApiPay.GetJsApiParameters();//獲取H5調起JS API參數，注意，這里引用了官方的demo的方法，由於原方法是返回string的，所以，要對原方法改為下面的代碼，代碼在下一段

                ModelForOrder aOrder = new ModelForOrder()
                {
                    appId = wxJsApiParam.GetValue("appId").ToString(),
                    nonceStr = wxJsApiParam.GetValue("nonceStr").ToString(),
                    packageValue = wxJsApiParam.GetValue("package").ToString(),
                    paySign = wxJsApiParam.GetValue("paySign").ToString(),
                    timeStamp = wxJsApiParam.GetValue("timeStamp").ToString(),
                    msg = "成功下單,正在接入微信支付."
                };
                objResult = aOrder;
            }
            catch (Exception ex)
            {
                ModelForOrder aOrder = new ModelForOrder()
                {
                    appId = "",
                    nonceStr = "",
                    packageValue = "",
                    paySign = "",
                    timeStamp = "",
                    msg = "下單失敗，請重試,多次失敗,請聯系管理員."
                };
                objResult = aOrder;
            }
            return Json(objResult);
        }


    }
}

這里就是上面修改了的代碼，童鞋們請注意

        /**
        *  
        * 從統一下單成功返回的數據中獲取微信瀏覽器調起jsapi支付所需的參數，
        * 微信瀏覽器調起JSAPI時的輸入參數格式如下：
        * {
        *   "appId" : "wx2421b1c4370ec43b",     //公眾號名稱，由商戶傳入     
        *   "timeStamp":" 1395712654",         //時間戳，自1970年以來的秒數     
        *   "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //隨機串     
        *   "package" : "prepay_id=u802345jgfjsdfgsdg888",     
        *   "signType" : "MD5",         //微信簽名方式:    
        *   "paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 
        * }
        * @return string 微信瀏覽器調起JSAPI時的輸入參數，json格式可以直接做參數用
        * 更詳細的說明請參考網頁端調起支付API：http://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7
        * 
        */
        public WxPayData GetJsApiParameters()
        {
            Log.Debug(this.GetType().ToString(), "JsApiPay::GetJsApiParam is processing...");

            WxPayData jsApiParam = new WxPayData();
            jsApiParam.SetValue("appId", unifiedOrderResult.GetValue("appid"));
            jsApiParam.SetValue("timeStamp", WxPayApi.GenerateTimeStamp());
            jsApiParam.SetValue("nonceStr", WxPayApi.GenerateNonceStr());
            jsApiParam.SetValue("package", "prepay_id=" + unifiedOrderResult.GetValue("prepay_id"));
            jsApiParam.SetValue("signType", "MD5");
            jsApiParam.SetValue("paySign", jsApiParam.MakeSign());

            string parameters = jsApiParam.ToJson();
            Log.Debug(this.GetType().ToString(), "Get jsApiParam : " + parameters);
            return jsApiParam;
        }

ModelForOrder類的代碼：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Web.Models
{
    public class ModelForOrder
    {
        public string appId { get; set; }
        public string timeStamp { get; set; }
        public string nonceStr { get; set; }
        public string packageValue { get; set; }
        public string paySign { get; set; }

        public string msg { get; set; }
    }
}

還有一個地方需要注意，修改一下的就是這里WxLib/business/JsApiPay.cs，如下圖：

最后，把程序發布出來，這次咱們把Web發布在 http://gzh.lmx.ren上，然后再把接口權限，改為這樣的，如下圖：

注意，這里面的域名和上面我們發布的域名要一致。

除此以外，我們還需要改這里：

就是一定要授權這里，否則，支付的時候，會提示其他錯誤，具體，我就不測試了。

另外，這里其實已經完成了這個公眾號的支付的流程了，但是，我們頁面上，會友善的提醒（其實不友善，提示是紅色的，在頭部，提示別輸入密碼什么），這是因為，我們還沒把咱們這個 http://gzh.lmx.ren域名設置為安全域名，設置之后，就不會在提示了。設置方法如下圖：

在這里面加入咱們的域名，就完美了。。。

我的代碼都盡量精簡，多余的，我都會丟掉，就是為了避免混淆視聽。如果代碼里面，有寫的不清楚的，可以私信問我，或群里來問我，群號在文章末端。

現在，我開始一一解釋我上面的做法。

首先，在后端，頁面加載的時候，他會先執行

public ActionResult Index()
        {
            if (Session["openid"] == null)
            {
                try
                {
                    //調用【網頁授權獲取用戶信息】接口獲取用戶的openid和access_token
                    GetOpenidAndAccessToken();

                }
                catch (Exception ex)
                {
                    //Response.Write(ex.ToString());
                    //throw;
                }
            }
            return View();
        }

這里面就是為了獲取用戶的Openid和Access_token，這個用途很大，還有就是，我們通過代碼可以知道，我們通過這個方法，可以獲取到微信的一些相關信息，獲取完了之后，他會返回到我們的頁面上來，url就存在一個session里面，如下：

Session[ "url" ] = url;

接着，在前端：

當頁面加載完畢之后，會執行以下JS方法，如下：

  $(function () {
            var vCode = getQueryString("code");
            if (vCode != "" && vCode != null) {
                //alert(vCode);
                $.ajax({
                    type: 'post',
                    data: {
                        code: vCode
                    },
                    url: '/Home/getWxInfo',
                    success: function (sjson) {
                        //alert(sjson);
                        //var vData = JSON.stringify(sjson);
                        //alert(vData);
                        $.messager.show({
                            title: '提示',
                            msg: '歡迎您來到微信端充值中心。'
                        });
                    }
                })
            }
            else {
                $.ajax({
                    type: 'post',
                    url: '/Home/getCode',
                    success: function (sjson) {
                        //alert(sjson);
                        location.href = sjson;
                    }
                })
            }
        })

他會先獲取瀏覽器的url，然后獲取code，就是一般url后面的xxx.com?code=xxx，這里面就是首先判斷有無code，如果沒有code，則，我們去后台請求這個code。為什么請求這個code呢？我們來看這個方法： getWxInfo，如下圖：

 /// <summary>
        /// 獲取code
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public ActionResult getCode()
        {
            object objResult = "";
            if (Session["url"] != null)
            {
                objResult = Session["url"].ToString();
            }
            else
            {
                objResult = "url為空。";
            }
            return Json(objResult);
        }

他就會返回url到前端，前端通過js去訪問那個網址，那個網址就是微信端獲取到我們的信息之后，給我們按照規則再返回一個url，這rul就是我們后面需要后去的code的url。這個code對我們至關重要，因為后面我們要做跟支付有關的工作，都用到的。有了code，我們才能拿到openid和access_token。具體看代碼邏輯也可以明了。

好，走到這一步，我們已經知道openid和access_token了，這個時候，我們就負責處理前端的東西。

前端，我就一個金額輸入框，然后一個提交，實際應用中，我們肯定還需要傳入商品的參數，我這里面就不寫那些多余的了，后續你們自己加進去就可以了。這里面在點擊提交的時候，會調用微信的環境，看下面的代碼：

  //初始化微信支付環境
        function fCharge() {
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                fPostCharge();
            }
        }

他會初始化一下環境，如果初始化成功，代表，這個頁面是在微信客戶端里面運行的，那么我們就給他運行我們真正的充值代碼提交，所以，就會執行： fPostCharge();

提交之后，就會進入后台，后台需要組織我們前台需要用到的參數，其中包括如下：

/// <summary>
        /// 充值
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public ActionResult MeterRecharge()
        {
            object objResult = "";
            string strTotal_fee = Request.Form["totalfee"];
            string strFee = (double.Parse(strTotal_fee) * 100).ToString();

            //若傳遞了相關參數，則調統一下單接口，獲得后續相關接口的入口參數
            jsApiPay.openid = Session["openid"].ToString();
            jsApiPay.total_fee = int.Parse(strFee);

            //JSAPI支付預處理
            try
            {
                string strBody = "南宮蕭塵微信支付";//商品描述
                WxPayData unifiedOrderResult = jsApiPay.GetUnifiedOrderResult(strBody);
                WxPayData wxJsApiParam = jsApiPay.GetJsApiParameters();//獲取H5調起JS API參數

                ModelForOrder aOrder = new ModelForOrder()
                {
                    appId = wxJsApiParam.GetValue("appId").ToString(),
                    nonceStr = wxJsApiParam.GetValue("nonceStr").ToString(),
                    packageValue = wxJsApiParam.GetValue("package").ToString(),
                    paySign = wxJsApiParam.GetValue("paySign").ToString(),
                    timeStamp = wxJsApiParam.GetValue("timeStamp").ToString(),
                    msg = "成功下單,正在接入微信支付."
                };
                objResult = aOrder;
            }
            catch (Exception ex)
            {
                ModelForOrder aOrder = new ModelForOrder()
                {
                    appId = "",
                    nonceStr = "",
                    packageValue = "",
                    paySign = "",
                    timeStamp = "",
                    msg = "下單失敗，請重試,多次失敗,請聯系管理員."
                };
                objResult = aOrder;
            }
            return Json(objResult);
        }

我們主要需要提供的就是這個類 ModelForOrder 里面的參數，然后再把這些參數返回給前台調用，如下：

 //調用微信支付模塊
        function onBridgeReady(json) {
            WeixinJSBridge.invoke(
           'getBrandWCPayRequest', {
               "appId": json.appId,     //公眾號名稱，由商戶傳入
               "timeStamp": json.timeStamp,         //時間戳，自1970年以來的秒數
               "nonceStr": json.nonceStr, //隨機串
               "package": json.packageValue,
               "signType": "MD5",         //微信簽名方式:
               "paySign": json.paySign //微信簽名
           },
           function (res) {
               if (res.err_msg == "get_brand_wcpay_request:ok") {
                   //alert("支付成功,請稍后查詢余額,如有疑問,請聯系管理員.");
                   fAlreadyPay();
               }     // 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在用戶支付成功后返回    ok，但並不保證它絕對可靠。
           }
            );
        }

這樣，他就會彈出一個微信支付的窗口，如下：

然后我們確認付款之后，是否付款成功，如果付款成功，我們在執行： fAlreadyPay();

這個方法已經被我刪掉了，用途是用於，我們收到用戶的款之后，我們需要同步一些數據到我們的數據庫里面去，所以，該怎么操作，自己自行修改了。

到這里，就大功告成啦，接下來的東西，就由大家自己去展開拓展了，本次經驗分享到此結束，寫過博客的人都知道，好好寫一個博客，需要自己從頭重新走一遍代碼，所以，各種辛苦，只有自己能體會。所以您如果覺得寫得不錯，或者對你有幫助，請點“ 好文要頂”或者“ 關注我”，順帶也可以評論一兩句，大家互相交流交流， 轉載請保留原作者地址以及姓名 。

需要實時測試的,可以關注公眾號,測試相關功能(根據實際情況,可能會不定時更新程序,如果需要最新程序的,可以加群聯系,QQ群號在上面):