微信公众平台开发概述

微信公众平台基本知识介绍
开发步骤
Senparc.Weixin SDK 介绍
微信菜单介绍
微信JS SDK介绍
微信支付介绍
Code First设计微信公众平台后台实体
BootStrap设计响应式布局介绍

一、微信公众平台基本知识介绍

1.1请求流程

微信公众平台是基于HTTP请求和响应

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微信开发概况

目前市场上常见的对微信所做的开发主要分为两部分：

1.5.1微网站

其实就是一个手机网站，只是很多时候需要调用微信的Oauth授权接口替代传统的用户登录和注册
可以调用微信JS SDK的相关功能
可以嵌入微信支付功能

1.5.2自动回复消息

用户主动向微信公众平台发送内容时，平台自动响应
获取用户的地理位置信息，做一些响应
用户点击菜单时的响应
多客服系统

二、开发步骤

•定义好处理微信请求的URL

•微信后台启用开发者模式，填写相关URL

•查看微信相关文档，进行开发

•开发完成，部署到外网服务器中测试

三、Senparc.Weixin.MP SDK

3.1简介

XX公司把微信官方提供的所有API都进行了封装并开源，使开发人员可以面向对象进行微信开发，避免了请求和调试微信的接口，从而节约大量时间

官网地址：http://weixin.senparc.com /

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.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

五、微信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.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>

接受支付成功后微信发回的确认信息，同时修改订单状态

这个过程细说有点复杂，下面是微信团队提供的支付流程图: