微信公衆平臺開發概述

時間 2019-11-15

標籤微信公衆平臺開發概述简体版

原文原文鏈接

微信公衆平臺基本知識介紹
開發步驟
Senparc.Weixin SDK 介紹
微信菜單介紹
微信JS SDK介紹
微信支付介紹
Code First設計微信公衆平臺後臺實體
BootStrap設計響應式佈局介紹

1、微信公衆平臺基本知識介紹

1.1請求流程

微信公衆平臺是基於HTTP請求和響應javascript

1.2 通信格式

1.2.1消息 XML

 
       < 
       xml 
       > 
      
 
            
       < 
       ToUserName 
       ><![CDATA[gh_a96a4a619366]]></ 
       ToUserName 
       > 
      
 
            
       < 
       FromUserName 
       ><![CDATA[olPjZjsXuQPJoV0HlruZkNzKc91E]]></ 
       FromUserName 
       > 
      
 
            
       < 
       CreateTime 
       >1357986928</ 
       CreateTime 
       > 
      
 
            
       < 
       MsgType 
       ><![CDATA[text]]></ 
       MsgType 
       > 
      
 
            
       < 
       Content 
       ><![CDATA[TNT2]]></ 
       Content 
       > 
      
 
            
       < 
       MsgId 
       >5832509444155992350</ 
       MsgId 
       > 
      
 
       </ 
       xml 
       > 
      

1.2.2其餘接口 JSON

{ "subscribe": 1, "openid": "o6_bmjrPTlm6_2sgVt7hMZOPfL2M", "nickname": "Band", "sex": 1, "language": "zh_CN", "city": "廣州", "province": "廣東", "country": "中國", "headimgurl": "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0", "subscribe_time": 1382694957 }

1.3 可能會踩到的一些坑

每條XML信息都有大小限制，如文本信息，建議Content內容不要超過600字。
上圖中，步驟2開始以後，微信服務器有一個等待時間：5秒，若是在這個時間內沒有進行到步驟4，那麼這個請求將會被關閉（包括數據傳輸的時間）。也就是說若是超過期間，即便網站服務器返回了數據，客戶端也沒法收到回覆。
在文本消息中，是容許添加<a>標籤來放置鏈接的，可是有許多朋友測試以後發現iOS沒問題，Android上連接沒法點擊，其實緣由是（至少目前爲止）：Android的微信客戶端對<a>標籤格式的斷定比較嚴格，請嚴格按照這個格式書寫：<a href="http://xxxx">內容</a>，href後不要使用單引號，也不要添加其餘屬性。
上面XML節點中的FromUserName即微信用戶的OpenId，對於同一個公衆帳號，這個OpenId的前6位是一致的，而且在整個公衆平臺的記錄中也是惟一的。也就是說同一個用戶關注了兩個不一樣的公衆帳號，他會有兩個不一樣的OpenId。
CreateTime使用的是Unix時間，所以若是使用C#的話，須要作一個轉換。
儘可能保持官方API中XML節點的順序，之前微信服務器是使用節點位置的方式讀取信息的（node[0]），而非節點名稱，如今這個問題彷佛有好轉，不過仍是要當心（￥…………&%&……）。
因爲這種特殊的通信方式，（至少目前爲止）全部請求必須從客戶端先發起，不要期望光使用API或SDK能夠實現由網站服務器主動推送消息到客戶端（固然其餘辦法仍是有的，好比模擬登錄）。
微信的網頁中的Cookie是比較特殊的，僅會短暫的存在，貌似是不能設置它在很長的時間內不過時的，因此，慎用！

1.4 微信公衆平臺分類

1.4.1 服務號

一個月能夠推送4條消息
擁有一些高級接口（Oauth、微信支付等）
推送的消息如好友消息同樣單獨展現

1.4.2 訂閱號

天天能夠推送1條消息
只擁有一些基本的權限
推送的消息在訂閱號「文件夾」中展現

1.4.3 企業號

　沒有研究過

1.4.4 開發者測試號

幾乎擁有全部權限，無支付權限，不能推送消息

1.5微信開發概況

目前市場上常見的對微信所作的開發主要分爲兩部分：html

1.5.1微網站

其實就是一個手機網站，只是不少時候須要調用微信的Oauth受權接口替代傳統的用戶登陸和註冊
能夠調用微信JS SDK的相關功能
能夠嵌入微信支付功能

1.5.2自動回覆消息

用戶主動向微信公衆平臺發送內容時，平臺自動響應
獲取用戶的地理位置信息，作一些響應
用戶點擊菜單時的響應
多客服系統

2、開發步驟

•定義好處理微信請求的URL

•微信後臺啓用開發者模式，填寫相關URL

•查看微信相關文檔，進行開發

•開發完成，部署到外網服務器中測試

3、Senparc.Weixin.MP SDK

3.1簡介

XX公司把微信官方提供的全部API都進行了封裝並開源，使開發人員能夠面向對象進行微信開發，避免了請求和調試微信的接口，從而節約大量時間java

官網地址：http://weixin.senparc.com /node

Nuget地址：https://www.nuget.org/packages/Senparc.Weixin.MP算法

舒適提醒：雖然SDK封裝好了不少的東西，但微信開發最終仍是以微信的官方文檔爲準，在須要時多看看微信文檔瀏覽器

3.2 使用SDK

新建ASP.NET MVC 解決方案
引用SDK(Nuget/項目/dll方式都可)
新建一個WeixinController來接收來自微信服務器的請求，新建Index Action，提供GET/POST兩種請求方式，以GET方式請求時，調用SDK的CheckSignature.Check方法，返回隨機字符串（合法性驗證），在後臺配置URL時，會須要這個GET，以POST方式請求時，先調用CheckSignature.Check方法，而後定義一個MessageHandler對接收到的消息使用處理，最後返回一個MessageHandler。

public class WeiXinController : Controller
    {
        public static readonly string Token = WeixinInfo.Token;//與微信公衆帳號後臺的Token設置保持一致，區分大小寫。
        /// <summary>
        /// 微信後臺驗證地址（使用Get），微信後臺的「接口配置信息」的Url填寫如：http://weixin.senparc.com/weixin
        /// </summary>
        [HttpGet]
        [ActionName("Index")]
        public ActionResult Get(string signature, string timestamp, string nonce, string echostr)
        {
            if (CheckSignature.Check(signature, timestamp, nonce, Token))
            {
                return Content(echostr); //返回隨機字符串則表示驗證經過
            }
            else
            {
                return Content("failed:" + signature + "," + Senparc.Weixin.MP.CheckSignature.GetSignature(timestamp, nonce, Token) + "。" +
                    "若是你在瀏覽器中看到這句話，說明此地址能夠被做爲微信公衆帳號後臺的Url，請注意保持Token一致。");
            }
        }

        /// <summary>
        /// 用戶發送消息後，微信平臺自動Post一個請求到這裏，並等待響應XML。
        /// PS：此方法爲簡化方法，效果與OldPost一致。
        /// v0.8以後的版本能夠結合Senparc.Weixin.MP.MvcExtension擴展包，使用WeixinResult，見MiniPost方法。
        /// </summary>
        [HttpPost]
        [ActionName("Index")]
        public ActionResult Post(PostModel postModel)
        {
            if (!CheckSignature.Check(postModel.Signature, postModel.Timestamp, postModel.Nonce, Token))
            {
                return Content("參數錯誤！");
            }
            postModel.Token = Token;
            postModel.EncodingAESKey = WeixinInfo.EncodingAESKey;//根據本身後臺的設置保持一致
            postModel.AppId = WeixinInfo.AppId;//根據本身後臺的設置保持一致

            //v4.2.2以後的版本，能夠設置每一個人上下文消息儲存的最大數量，防止內存佔用過多，若是該參數小於等於0，則不限制
            var maxRecordCount = 10;

            //自定義MessageHandler，對微信請求的詳細判斷操做都在這裏面。
            var messageHandler = new CustomMessageHandler(Request.InputStream, postModel, maxRecordCount);
             var logger = EngineContext.Current.Resolve<DefaultLogger>();
            try
            {

                /* 若是須要添加消息去重功能，只需打開OmitRepeatedMessage功能，SDK會自動處理。
                 * 收到重複消息一般是由於微信服務器沒有及時收到響應，會持續發送2-5條不等的相同內容的RequestMessage*/
                messageHandler.OmitRepeatedMessage = false;
                //執行微信處理過程
                messageHandler.Execute();              
                return new WeixinResult(messageHandler);//v0.8+
            }
            catch (Exception ex)
            {
                logger.Error("微信請求錯誤：" + DateTime.Now.Ticks, ex);
                return Content(""); 
            }
        }
    }

3.3 處理用戶發來的消息

•基本思路

重寫MessageHandler中的相應方法安全

public partial class CustomMessageHandler : MessageHandler<CustomMessageContext>
    {
    //some Code
    }

•上下文

因爲是微信服務器直接發送請求到開發者服務器，故Session、Cookie均沒法在微信公衆平臺開發中正常使用，SDK提供了WeixinContext用來處理上下文，能夠在MessageHandle中使用。服務器

public class CustomMessageContext : MessageContext<IRequestMessageBase, IResponseMessageBase>
    {
        public CustomMessageContext()
        {
            base.MessageContextRemoved += CustomMessageContext_MessageContextRemoved;
        }

        /// <summary>
        /// 當上下文過時，被移除時觸發的時間
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        void CustomMessageContext_MessageContextRemoved(object sender, Senparc.Weixin.Context.WeixinContextRemovedEventArgs<IRequestMessageBase, IResponseMessageBase> e)
        {
            /* 注意，這個事件不是實時觸發的（固然你也能夠專門寫一個線程監控）
             * 爲了提升效率，根據WeixinContext中的算法，這裏的過時消息會在過時後下一條請求執行以前被清除
             */

            var messageContext = e.MessageContext as CustomMessageContext;
            if (messageContext == null)
            {
                return;//若是是正常的調用，messageContext不會爲null
            }
        }
    }

3.4 SDK提供的經常使用消息事件列表

OnTextRequest微信	文字消息網絡
OnLocationRequest	位置消息
OnVoiceRequest	語音消息
OnVideoRequest	視頻消息
OnImageRequest	圖片消息
OnEvent_ClickRequest	點擊菜單
OnEvent_SubscribeRequest	用戶關注
OnEvent_UnsubscribeRequest	取消關注
OnEvent_ScanRequest	掃描二維碼

4、微信菜單介紹

4.1 基本介紹

自定義菜單分爲一級菜單和二級菜單
一級菜單數量爲1-3個，即打開公衆帳號直接能夠看到排列在最下方的最多3個按鈕。一級菜單的文字最多不能超過16字節（至關於8個漢字）
二級菜單從屬於一級菜單，數量爲1-5個。二級菜單的文字不最多不能超過40字節（至關於20個漢字）
當一個一級菜單下有二級菜單存在的時候，這個一級菜單按鈕被點擊不會有任何事件發生
能夠根據後臺設置的用戶分組不一樣，定製不一樣的菜單（new）

4.2菜單類型

click：點擊推事件
view：跳轉URL
scancode_push：掃碼推事
scancode_waitmsg：掃碼推事件且彈出「消息接收中」提示框
pic_sysphoto：彈出系統拍照發圖、pic_photo_or_album：彈出拍照或者相冊發圖
location_select：彈出地理位置選擇器
media_id：下發消息（除文本消息）
view_limited：跳轉圖文消息URL

5、微信JS SDK

地址：

JS地址：http ://res.wx.qq.com/open/js/jweixin-1.0.0.js

文檔地址：http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html

經常使用功能：

分享接口監聽
圖片接口（上傳、預覽、拍照等）
判斷網絡狀態
操做右上角菜單
微信支付 V2

使用步驟：

綁定域名
　先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。
引入JS文件

在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

調用接口

引用後，調用相應接口就ok了。

6、微信支付介紹

6.1 簡介

微信支付分爲V2 和V3 版本，V2版本嵌入在其JSSDK中，V3版本直接嵌入在微信中，無需引用任何文件。

支付方式分爲JS支付和掃碼支付，我只嘗試過JS支付，並無嘗試掃碼支付，因此下面所說的都是JS支付(V3)，掃碼支付聽說是還簡單一些。JS支付最終效果跟你用微信衝話費的流程是同樣的，你能夠腦海中YY一下。

測試號沒有微信支付接口，這是很是噁心的地方，你想玩玩支付？那你去註冊個公司吧~而後交點錢，註冊個服務號，再覈對公司公賬，而後！@#￥#￥%此處省略一萬步~

特別須要注意的是，在開發過程當中，微信的文檔是僅供參考的，他們目前對文檔管理的很是混亂，你根本不知道哪一個文檔是給哪裏用的，我也沒有太好的辦法，只能是多折騰吧~

6.2 準備工做

前提假設咱們已經弄到了一個有支付功能的帳號，下面的

6.2.1 配置JS接口安全域名

登錄微信公衆平臺後臺，進入公衆號設置頁面，找到功能設置，下面有個JS接口安全域名（貌似必定要是備案過的域名才能夠）

6.2.2 配置微信支付配置項

進入左側微信支付，找到開發配置，配置測試受權目錄，並把本身的微信帳號添加到測試白名單

MVC，若是支付頁面的Action是Index的話，測試受權目錄配置要配置到上一級，親測的結果是，個人支付目錄是:http://xxx.com/payment/（payment是Controller，Action是index,可是url中沒有體現）因此配置的時候，只須要配置到域名就能夠了，可是要加上/，我這個最終配置的測試受權目錄是:http://xxx.com/

6.2.3 Codding

代碼要處理的流程有:

生成支付商品頁面
生成appId、timeStamp、nonceStr、package、paySign等一系列的支付簽名須要的東西，並提供給支付頁面
JS調用微信的接口（V3）

<script language="javascript" type="text/javascript">
    // 當微信內置瀏覽器完成內部初始化後會觸發WeixinJSBridgeReady事件。
    function jsApiCall() {
        WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
         {
             "appId": "@ViewData["appId"]", //公衆號名稱，由商戶傳入
             "timeStamp": "@ViewData["timeStamp"]", //時間戳
             "nonceStr": "@ViewData["nonceStr"]", //隨機串
             "package": "@Html.Raw(ViewData["package"])",//擴展包
             "signType": "MD5", //微信簽名方式:MD5
             "paySign": "@ViewData["paySign"]" //微信簽名
         },//josn串
         function (res) {
             if (res.err_msg === "get_brand_wcpay_request:ok") {
                window.location.href = '@Url.Action("PaySuccess", new { orderNumber = Model.OrderNum })';
             }
         }
         );
    }

    function callpay() {
        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
            }
            else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', jsApiCall);
                document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
            }
        }
        else {
            jsApiCall();
        }
    }

</script>