微信公众号开发C#系列-3、搭建微信本地调试环境-借助花生壳实现

概述
通过前两篇文章的学习, 我们已经对微信的开发有了一个全新的认识,知道了整个开发的流程。由于微信开发所需要的中间服务器必须部署在外网上,作为每一个刚学习微信开发的开发者可能都有通过写日志来查看微信开发过程中遇到的问题。这种方式不得不说不仅浪费时间而且非常的麻烦,在微信开发过程中有没有一种类似我们平时开发时调试这样方便呢?答案是肯定的。通过本文的学习我相信你定能掌握这种方便的方法而进行轻松又愉快的开发。
在看后面的内容之前我们先来学习一个概念,什么叫内网穿透?内网穿透,又叫NAT(Network Address Translation)穿透,别看名字比较拽,按照NAT的字面意思解释,其实就是做了一次网络地址的转换。接下来,我们通俗地讲一下到底什么是内网穿透。
假设小区局域网的主机名为A,一台具备公网IP的主机名为B。通常情况下,A能直接ping通B,而B由于不知道主机A的确定IP地址,或者A的实际地址本就是一个局域网地址,因而无法主动联系上A。
不过,既然A能主动联系上B,那么是否可以先让A联系B,然后持续保持联系,在保持联系的过程中B不就能随时“主动”联系A了吗?没错,内网穿透的核心思想正是这个意思。
内网穿透常用在让任何地方都能访问自己家里的笔记本上的应用,让局域网的服务器可以被任何地方访问到。要实现内网穿透的工具很多,如:Ngrok、Ssh、autossh、Natapp、Frp、Lanproxy、Spike、花生壳。这么多工具如何选?通过我的比较,在国内优先选择花生壳或Natapp。本文主要以花生壳为例讲述如何借助花生壳实现内网穿透来进行微信开发过程中的调试。
上面的概念性东西讲了这么多,下面我们正式进入今天的主题。
准备工作
首先我们在花生壳的官网下载花生壳内网穿透工具,花生壳官网https://www.oray.com/,下载后按提示安装,安装的详细过程这儿就不阐述了。 安装完成后,需要注册一个账号。新注册的账号可能会没有免费使用的权限,但是官网是可以申请到资格的,请自行申请。登陆后,界面如下:

在上面的主界面中我们单击“我的域名“打开花生壳后台管理工具,如下图所示:

在上面的主界面中可以看到已经增加的域名,我们还可以单击后面的”域名诊断“来检测域名的状态。
单击左侧的”内网穿透“,增加一个映射,如我们增加的:

这儿需要特别说明的是微信要求的中间服务器必须指向80端口,这儿一定要注意。
我们增加的映射列表如下:

现在花生壳配置完成,接上一篇我们开发的微信接收信息的页面,我们可以用花生壳给我们分配的域名访问一下确定成功否,如下图所示:

接下来我们就可以进行IIS的配置与VS的调试工具了。
本地IIS映射配置
打开IIS管理工具,添加一个网站,主机名就是花生壳为我们分配的域名,端口设置为80,注意一般IIS安装后默认的网站已经指向了80端口,这儿添加会提示端口已被占用,可以先去停用默认的网站再在儿这添加即可。这儿特别要注意的一点就是添加网站时”物理路径“一定要指向我们VS项目所在的这个WEB项目路径。不需要用VS发布网站,直接指向项目所在的目录即可。

添加成功后我们可以看一下绑定信息。

网站添加成功后我们可以试着访问一下,确定添加的成功性,访问成功就可以进入下面的内容。
VS调试微信应用
在进行调试状态前我们还需要确定我们在上一篇文章“微信公众平台接入指南”中的微信接口配置信息是否正确,如下图所示:
在接口配置信息中的URL已经设定为我们花生壳分配的域名了。

通过上面的步骤,我们现在就可以正式进入VS调试微信应用了。使用管理员方式启动VS后打开微信应用。打开目标网站属性,选择web,IIS方式选外部托管,如下图:

然后在vs中选择菜单栏中的【调试】->【附加到进程】,或者按Control+Alt+P组合快捷键打开附加到进程窗口,如下图:

打开附加到进程窗口如下图,在下图中要选中”显示所有用户进程“复选框,在”可用进程”列表中找到w3wp.exe进程,点击附加按钮,进入即可进入调试。

下面就是让微信服务器调用我们的服务了。在微信公众号接入的时候,需要get请求到开发者的服务器,所以,这里使用接入url进行演示。在浏览器中输入接口配置信息中的URL,一切正常即可进入调试状态,如下图所示:


通过上面的详细介绍,我相信大家应该对微信开发如何调试有了一个全面的认识,并能应用到实际工作中。接下来我们就可以进入全面的微信开发之中了。
参考文章
RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件介绍
RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件介绍
RDIFramework.NET框架SOA解决方案(集Windows服务、WinForm形式与IIS形式发布)-分布式应用
RDIFramework.NET代码生成器全新V3.5版本发布-重大升级
一路走来数个年头,感谢RDIFramework.NET框架的支持者与使用者,大家可以通过下面的地址了解详情。
RDIFramework.NET官方网站:http://www.rdiframework.net/
RDIFramework.NET官方博客:http://blog.rdiframework.net/
同时需要说明的,以后的所有技术文章以官方网站为准,欢迎大家收藏!
RDIFramework.NET框架由专业团队长期打造、一直在更新、一直在升级,请放心使用!
欢迎关注RDIFramework.net框架官方公众微信(微信号:guosisoft),及时了解最新动态。
扫描二维码立即关注
