1.4 微信公众平台的开发模式和开发流程

微信公众平台提供了前端开发和后端开发2种开发模式，每种开发模式所使用的语言和开发流程各不相同。

1.4.1 Web应用程序的开发模式

1. C/S架构应用程序

在Web应用程序出现之前，“客户机/服务器”（C/S）是应用程序的主流架构。C/S架构应用程序的工作原理如图1-41所示。

图1-41　C/S架构应用程序的工作原理

C/S架构应用程序的特点是客户机通过发送一条消息或一个操作来启动与服务器之间的交互，而服务器通过返回消息进行响应。客户端程序为用户提供管理和操作界面，而数据通常保存在服务器端。在部署C/S架构的应用程序时，需要为每个用户安装客户端程序，升级应用程序时也同样需要升级客户端程序。这无疑增加了维护成本。典型的客户机/服务器网络模型就是支持多用户的数据库管理系统。

客户机/服务器结构把整个任务划分为客户机上的任务和服务器上的任务。下面以数据库管理系统为例说明。

客户机必须安装操作系统和必要的客户端应用软件，客户机上的任务主要如下。

• 建立和断开与服务器的连接。

• 提交数据访问请求。

• 等待服务通告，接受请求结果或错误。

• 处理数据库访问结果或错误，包括重发请求和终止请求。

• 提供应用程序的友好用户界面。

• 数据输入/输出及验证。

同样，服务器也必须安装操作系统和必要的服务器端应用软件，服务器上的任务主要如下。

• 为多用户管理一个独立的数据库。

• 管理和处理接收到的数据访问请求，包括管理请求队列、管理缓存、响应服务、管理结果和通知服务完成等。

• 管理用户账号、控制数据库访问权限和其他安全性。

• 维护数据库，包括数据库备份和恢复等。

• 保证数据库数据的完整或为客户提供完整性控制手段。

在C/S网络模型中，客户端和服务器都需要安装相应的应用程序，而且不同的应用程序需要安装不同的客户端程序，系统部署的工作量很大。

2. B/S架构应用程序

1990年，欧洲原子物理研究所的英国科学家Tim Berners-Lee发明了WWW（World Wide Web）。通过Web，用户可以在一个网页里比较直观地表示出互联网上的资源。因此，TimBernersLee被称为互联网之父。

随着互联网的应用和推广，浏览器/服务器（B/S）网络模型诞生了，其工作原理如图1-42所示。

图1-42　浏览器/服务器（B/S）网络模型

B/S结构的应用程序只需要部署在Web服务器上即可，应用程序可以是HTML（HTM）文件或ASP、PHP等脚本文件。用户只需要安装Web浏览器就可以浏览所有网站的内容。这无疑比C/S结构应用程序要方便得多。

采用B/S网络模型开发的应用程序被称为Web应用程序，Web应用程序使用Web文档（网页）来表现用户界面，而Web文档都遵循标准HTML格式（包括2000年推出的XHTML标准格式）。因为所有Web文档都遵循标准化的格式，所以在客户端可以使用不同类型的Web浏览器查看网页内容。只要用户选择安装一种Web浏览器，就可以查看所有Web文档，从而解决了为不同应用程序安装不同客户端程序的问题。

Web应用程序只部署在服务器端。用户在客户端使用浏览器浏览服务器上的页面。客户端与服务器之间使用超文本传输协议（HTTP）进行通信。早期的Web服务器只能简单地响应浏览器发送过来的HTTP请求，并将存储在服务器上的HTML文件返回给浏览器。客户端只接收到经过服务器端处理的静态网页。

静态页面和动态页面并不是指页面的内容是静止的还是动态的视频或画面。静态页面指页面的内容在设计时就固定在页面的编码中，而动态页面则可以从数据库或文件中动态读取数据，并显示在页面中。以网上商场系统为例，如果使用静态页面浏览商品的信息，则只能在设计时为每个商品设计一个页面，新增商品，就需要新增对应的页面；如果使用动态页面浏览商品的信息，则可以使用一个页面显示各种商品的详细信息，页面中的程序根据商品编号从数据库中读取商品，然后显示在页面中。

Web应用程序产生之初，Web页面都是静态的，用户可以通过单击超链接等方式与服务器进行交互，访问不同的网页。

最早能够动态生成HTML页面的技术是CGI（Common Gateway Interface）。1993年，NCSA（National Center for Supercomputing Applications）提出了CGI 1.0的标准草案；1995年，NCSA开始制定CGI 1.1标准；1997年，CGI 1.2也被纳入了议事日程。CGI技术允许服务端的应用程序根据客户端的请求，动态生成HTML页面，这样客户端就可以和服务端实现动态信息交换了。早期的CGI程序大多是编译后的可执行程序，其编程语言可以是C、C++、Pascal等任何通用的程序设计语言，也可以是Perl和Python等脚本语言。

1994年，Rasmus Lerdorf发明了专门用于Web服务端编程的PHP（Hypertext Preprocessor）语言。与以往的CGI程序不同，PHP语言将HTML代码和PHP指令结合成为完整的服务端动态页面，程序员可以以一种更加简便、快捷的方式实现动态Web功能。

1995年，Netscape公司推出了一种在客户端（也称为前端）运行的脚本语言——JavaScript。它可以在HTML语言中嵌入JavaScript程序，给HTML网页添加动态功能，例如，响应用户的各种操作等。

1996年，Macromedia公司推出了Flash，它是一种矢量动画播放器。它可以作为插件添加到浏览器中，从而在网页中显示动画。

同样在1996年，Microsoft公司推出了ASP 1.0。这是Microsoft公司推出的第1个服务器端脚本语言，使用ASP可以生成动态的、交互式的网页。从Windows NT 4.0开始，所有的Windows服务器产品都提供IIS（Internet Information Services）组件，它可以提供对ASP语言的支持。使用ASP可以开发服务器端Web应用程序。

1997～1998年，Servlet技术和JSP技术相继问世，这两者的组合（还可以加上JavaBean技术）让Java开发者同时拥有了类似CGI程序的集中处理功能和类似PHP的HTML嵌入功能。此外，Java的运行时编译技术也大大提高了Servlet和JSP的执行效率。

2002年，Microsoft正式发布.NET Framework和Visual Studio .NET开发环境。它引入了ASP.NET这样一种全新的Web开发技术。ASP.NET可以使用VB.NET、C#等编译型语言，支持Web Form、.NET Server Control、ADO.NET等高级特性。

1.4.2 Web应用程序的基本开发流程

在完成需求分析和总体设计的情况下，开发Web应用程序的基本流程如图1-43所示。

图1-43　开发Web应用程序的基本流程

1. 设计Web应用程序中包含的模块和页面

在开始开发Web应用程序之前，应由项目经理将Web应用程序划分成若干模块，并定义每个模块包含的页面以及模块间的接口。这是项目组成员分工合作的前提。

2. 配置Web服务器

运行Web应用程序需要一个载体，即Web服务器。一个Web服务器可以放置多个Web应用程序，也可以把Web服务器称为Web站点。

通常服务器有两层含义，一方面它代表计算机硬件设备，用来安装操作系统和其他应用软件；另一方面它又代表安装在硬件服务器上的相关软件。

要配置Web应用程序，首先需要准备一台硬件服务器，如果没有特殊需要，选择普通的PC服务器即可。PC服务器的组件与普通计算机相似，只是PC服务器比普通计算机拥有更高的性能和更好的稳定性。在开发和测试阶段，或者比较小的网络环境下，也可以使用普通计算机作为Web服务器。

Web服务器应用程序可以响应用户通过浏览器提交的请求。常用的Web服务器应用程序包括IIS和Apache等。

数据库服务器用来存储网站中的数据。例如，注册用户的信息、用户发贴的信息等。常用的数据库产品包括SQL Server、Access、Oracle和MySQL等。

3. 前端开发

通常需要根据总体设计文档将每个功能模块划分成若干个网页文件；前端开发的主要任务是设计网页的架构、显示风格、特效和一些客户端功能。通常由美工设计网页中需要使用的图片和flash等资源，再使用DreamWeaver设计网页的界面，包括网页的基本框架和网页中的静态元素。例如，表格、静态图像和静态文本等，然后使用JavaScript程序实现网页特效和客户端功能。

4. 后端开发

在完成需求分析和总体设计后，程序员（通常项目组里有专门负责数据库管理和编程的人员）需要根据总体设计的要求设计具体的数据库结构，包括创建数据库、决定数据库中包含哪些表和视图、设计表和视图结构等。

在设计数据库结构后，可以通过编写数据库脚本来创建这些数据库对象。在安装应用程序时就可以执行这些数据库脚本来创建数据库对象了。

后端开发的重点还在于程序员在网页中添加ASP、PHP或ASP.NET代码，访问数据库、完成网页的具体功能。

5. 集成

在很多情况下，前端开发和后端开发是由一个人完成的。此时就不存在前端和后端的集成问题了。如果有专门的前端开发人员，则需要在开发前期约定好网页的框架和数据接口，然后分别开发，最后将前端开发和后端开发的成果集成在一起。完成集成工作的程序员需要同时熟悉前端开发技术和后端开发技术。通常可以由前端开发人员在实现了后端开发功能的网页中添加前端开发的代码，实现网页特效。后端开发人员的主要职责是准备数据，前端开发人员的主要职责是界面显示。

6. 测试Web应用程序，通过测试后上线运行

在Web应用程序开发完成后，需要测试其具体功能的实现情况。在通过测试达到实际应用的需求后，可以将Web应用程序部署到Web服务器上。通常需要准备一个备份Web服务器，以便实现数据备份，并且在增加新功能时提供测试环境。

1.4.3 微信公众平台的前端开发模式

1. 什么是Web前端开发

Web前端开发是近几年才真正开始受到重视的一个新兴领域，所谓Web前端开发，从字面理解，就是设计前端用户浏览的界面。说到这儿，可能有的读者会联想到美工。事实上Web前端开发工程师的前身就是美工，在Web 1.0时代，网站多由HTML文件组成，Web前端开发工程师的主要工作就是设计静态网页，他们使用的工具多为DreamWeaver和Photoshop。随着Web 2.0和Web 3.0时代的到来，静态网页设计已经不是Web前端开发工程师的主要工作了。Web应用程序越来越向桌面软件靠拢，使用JavaScript语言开发动态网页已经是Web前端开发的重要组成部分。

2. Web前端开发的要素

Web前端开发技术包括下面3个要素。

（1）HTML：Hypertext Markup Language的缩写，即超文本标记语言，是用于描述网页文档的一种标记语言。因此，了解HTML是Web前端开发工程师的基本技能。

HTML的最新版本是HTML5。尽管到目前为止HTML5还只是草案，离真正的规范还有相当的一段路要走，但HTML5还是引起了业内的广泛兴趣，Google Chrome、Firefox、Opera、Safari等主流浏览器都已经支持HTML5技术。HTML5无疑会成为未来10年最热门的互联网技术。

（2）CSS：CSS是Cascading Style Sheet（层叠样式表）的缩写，是一种能使网页格式化的标准。它可以扩展HTML的功能，重新定义HTML元素的显示方式。CSS所能改变的属性包括字体、文字间的空间、列表、颜色、背景、页边距和位置等。使用CSS的好处在于用户只需要一次性定义文字的显示样式，就可以在各个网页中统一使用了，这样既避免了用户的重复劳动，也可以使系统的界面风格统一。

CSS的最新版本是CSS3，使用CSS3可以定义活泼、新颖的网页界面。

（3）JavaScript：除了JavaScript的基本语法外，Web前端开发工程师还应该了解AJAX和jQuery等相关热门技术。

3. 微信公众平台前端开发技术

腾讯公司为微信提供了充分的前端技术支持，包括一个与微信原生视觉体验一致的基础样式库WeUI、一个基于微信内的网页开发工具包JS-SDK和微信浏览器私有接口WeixinJSBridge。使用它们可以开发出与微信紧密结合的、独特的手机网页。本书将在第10章介绍微信前端开发技术的具体情况。

1.4.4 微信公众平台的后端开发模式

后端开发是相对于前端开发而言的。前端程序运行在客户端的浏览器，而后端程序则运行于Web服务器。比较流行的开发后端程序的语言包括Java、PHP、ASP.NET和Python等。本书内容是基于ASP.NET的。后端程序的主要任务是为前端程序提供数据以及提供一些数据设置功能。

腾讯公司为微信设计了很多开发接口，每个开发接口实际上就是一个URL。开发者可以通过GET方式访问开发接口获取微信公众号的相关消息，也可以通过POST方式将数据提交到开发接口，从而实现对微信公众号的相关配置（例如对某些数据的增、删、改）。如果使用GET方式，则按下提交按钮时浏览器会立即传送表单数据；如果使用POST方式，则浏览器会等待服务器来读取数据。使用GET方法的效率较高，但传递的信息量仅为2K，而POST方法没有此限制，所以通常使用POST方法向服务器提交数据。

公众号的粉丝可以直接向公众号发送消息，也可以通过微信访问公众号的菜单打开部署在Web服务器上的网页。

微信公众号应用程序的工作原理如图1-44所示。

图1-44　微信公众号应用程序的工作原理

1.4.5 开发者与微信公众平台之间的数据交互方式

开发者在调用开发接口时，可以向开发接口提交数据，也会收到微信公众平台返回的数据。

1. 向开发接口提交数据

通常可以通过下面两种方式向开发接口提交数据。

（1）在URL中带参数。例如，大多数开发接口都需要在URL中带上access_token，代码如下。

https://api.weixin.qq.com/cgi-bin/xxxxxxx?access_token=ACCESS_TOKEN

（2）将特定格式的数据以POST形式提交至开发接口。提交的数据通常是JSON格式或XML格式的字符串。

JSON是JavaScript Object Notation的缩写，是一种轻量级的数据交换格式。JSON字符串具有如下特点。

• 以键值对的形式表示数据。键是数据的名字，包含在双引号中，值跟在键的后面。键和值之间以冒号分隔。

• 数据以逗号分隔。

• 使用花括号{}保存对象。

• 使用方括号[]保存数组。

例如，下面的JSON字符串包含两个数据。一个名为errcode，值为0；另一个名为errmsg，值为“ok”。

{"errcode":0,"errmsg":"ok"}

2. 接收微信公众平台发送的数据

微信公众平台会在以下情况下向开发者发送数据。

（1）当开发者调用某些开发接口时。

（2）当微信公众收到消息后，会将消息封装成XML字符串，然后按照配置将XML字符串以POST方式发送给开发者。XML是一种标记语言，它是可扩展的，使用者可以创建自定义元素以满足创作需要。关于XML字符串的具体情况将在第5章中介绍。

1.4.6 本书实例的开发模式

本书实例采用ASP.NET MVC开发模式，关于MVC开发模式将在2.1.1介绍。在MVC开发模式中，V代表视图，用于实现前端开发；C代表控制器，用于后端开发。在本书实例中通常在视图中通过WebUI、JS-SDK或WeixinJSBridge设计微信网页，在控制器中通过调用开发接口与微信公众平台通信，具体如图1-45所示。关于本书实例的具体情况将在第3章中介绍。

图1-45　本书实例的开发模式