第2章　开发环境及技术介绍

本章主要介绍微信公众平台开发环境的搭建，以及用到的主要开发技术。

开发环境的选择跟使用的后端开发语言有一定的关系。微信公众号的开发后端语言不限，只要能和微信服务器正常交互即可。常见的后端开发语言有Java、PHP、C/C++、C#、Python、Node.js和Go语言等。微信官方的SDK代码示例有PHP、Java以及Node.js的版本。笔者选择的开发语言是PHP，并使用集成软件开发包XAMPP（Apache+ MySQL/MariaDB+PHP+Perl）。

2.1　集成软件包介绍

在本地开发时，需要在本地搭建一个能运行Web站点程序的环境。为了简化安装，我们可以选择集成软件包，这种环境集成了运行程序的基本环境，主要包括HTTP服务器，数据库管理软件以及程序设计语言运行环境，如图2-1所示。

这类集成软件开发包主要有以下4个。

• WAMP（Apache+MySQL/MariaDB+PHP/Perl/Python）
  只支持在Windows系统下安装使用，开源平台。

• LAMP（Linux+Apache+MySQL/MariaDB+PHP/Perl/Python）
  只支持在Linux系统下使用，开源平台。

• MAMP/MAMP Pro（Mac+Apache+MySQL+PHP）
  只支持在Mac系统下使用，开源平台，支持PHP多版本切换。

• XAMPP（Apache+ MySQL/MariaDB+PHP+Perl）
  开头的X代表X-OS，代表可以在任何常见操作系统下使用，包括Windows、Mac、Linux，开源平台。

图2-1　集成开发环境架构

上述几个集成软件开发包，从跨平台、易用性、可扩展性和可配置性等方面综合对比，笔者选择的集成开发环境是XAMPP。XAMPP是Apache（HTTP服务器）、MySQL（数据库管理软件）、PHP（程序设计语言）和Perl（脚本语言）的简称。新版本的XAMPP已支持PHP7。

2.2　XAMPP的安装与配置

XAMPP的下载地址是：https://www./zh_cn/index.html。读者可根据自己的操作系统选择合适的版本。XAMPP属于Apache发行版，是Apache Friends
（一个推广Apache服务器的非盈利性项目）下面的产品，感兴趣的读者还可以加入社区，地址是：https://community./。

笔者下载的是XAMPP for OS X版本。安装过程简单，需要注意的是，在选择安装组件这一步，如图2-2所示，需要勾选“XAMPP Core Files”，这样才能安装完整的集成软件开发包。XAMPP的默认安装目录是/Applications/XAMPP。

安装成功后，启动程序，然后选择Manage Servers，选择Apache Web Server 启动Apache。启动成功后，绿色小灯会亮起，如图2-3所示。假如启动失败，可以切换到Application log，查看原因，常见的原因是系统的80端口被占用。

图2-2　选择安装组件

图2-3　启动XAMPP

选择“Configure”，出现一个简单的设置界面，如图2-4所示。这里可以设置Http以及Https的端口，默认是80和443。在“Open Access Log”和“Open Error Log”中可以分别查看Apache的访问日志和错误日志。

笔者的本地开发环境，访问的URL地址是通过配置Virtual hosts来实现的，例如dev.。这样做的好处是，在多人协作开发时，只要保证各开发者本地的Virtual hosts是一致的，大家的访问URL就是一样的，并且URL中不出现localhost。需要通过以下4步来实现这一点。

图2-4　XAMPP设置界面

① 修改Apache配置文件：在XAMPP的设置界面，如图2-4所示，点击“Open Conf File”打开Apache的配置文件。定位到靠近文件底部的位置或直接搜索“Virtual hosts”，把下方被注释的“ Include etc/extra/httpd-vhosts.conf”这句前面的“#”去掉，如图2-5所示，假如没有被注释则直接跳过这一步。

图2-5　打开Virtual hosts功能

② 修改Apache的httpd-vhosts文件：进入Virtual hosts的目录，在Application/ XAMPP/xamppfiles/etc/extra目录下，打开httpd-vhosts.conf文件，在文件末尾新增配置代码，如下所示。

<VirtualHost *:80>
       DocumentRoot "/Applications/XAMPP/htdocs/dev./"
ServerName dev.
       ErrorLog "logs/dev..com-error_log"
       CustomLog "logs/dev.-access_log" common
       <Directory "/Applications/XAMPP/htdocs/dev.">
           Options Indexes FollowSymLinks Includes ExecCGI
           AllowOverride All
           Order deny,allow
           Allow from all
       </Directory>
</VirtualHoswt>

在这里，设置域名为dev.。域名可以根据自身开发情况修改。错误日志和访问日志均在logs/下，并设置了站点根目录的目录为：

/Applications/XAMPP/htdocs/dev.

③ 配置本地hosts文件：打开电脑终端，输入命令“sudo vim /etc/hosts”，按提示输入密码，如图2-6所示。进入vi模式，输入“i”编辑hosts文件，如图2-7所示。在文件末端新增一行代码，把域名“dev.” 映射到本地“127.0.0.1”。编辑完成后保存文件并退出。可以通过ping域名的方式来验证是否配置成功，如图2-8，输入以下命令：

ping dev.

图2-6　打开hosts文件

假如返回类似如下则说明配置成功：

PING dev. (127.0.0.1): 56 data bytes
64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.042 ms
64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.052 ms

图2-7　编辑本地hosts文件

图2-8　ping域名，看是否设置成功

④ 重启Apache：进入Apache的设置界面，在如图2-3所示的界面，点击“Restart”重启。

至此，Apache的配置完成。打开浏览器，输入dev.即可访问。如图2-9所示的输出信息，是CodeIgniter开发框架的默认页面，关于该框架稍后会有详细介绍。

图2-9　在浏览器中访问

2.3　PhpStorm的安装及配置

选择一款好用并且自己心仪的IDE（Integrated Development Environment）非常重要。能支持PHP语言的集成开发环境有很多，比如Eclipse、NetBeans、Zend Studio、PhpStorm等。选择自己习惯使用的开发环境即可，笔者选择的是PhpStorm。

PhpStorm是JetBrains公司开发的一款跨平台PHP集成开发环境，它是一款智能的PHP编辑器，并支持JavaScript、HTML/CSS的智能编写，支持PHP单元测试以及代码重构，如图2-10所示。

图2-10　PhpStorm 10的启动界面

JetBrains是一家位于布拉格的软件开发公司，该公司最为人所熟知的产品是Java语言的IDE—IntelliJ IDEA。该公司旗下的其他比较有名的编辑器主要有以下几款。

• IntelliJ IDEA：一套智能的Java语言开发工具，并支持Android开发。

• PhpStorm：跨平台PHP集成开发环境。

• PyCharm：Python集成开发环境。

• RubyMine：Ruby和Rails集成开发环境。

• WebStorm：智能的HTML/CSS/JS开发环境，Web前端开发人员的首选。

• AppCode：智能的iOS/OS X集成开发环境，与XCode类似。

• CLion：跨平台的C/C++集成开发环境。

• Rader：跨平台C#集成开发环境。

PhpStorm的官方下载地址是https://www./phpstorm/，下载安装后，会提示30天免费试用期，过了试用期需要购买才能继续使用。

安装完成之后，可以通过Create New Project（创建新工程）、Open（打开目录）、Create New Project from Existing Files（以向导的方式打开现有工程），或者Check out from Version Control（从源码版本管理器中Check out代码，如从Subversion或Github中下载代码）新建工程，如图2-11所示。

图2-11　PhpStorm打开工程的方法

笔者选择的是直接打开现有工程代码。为了更好地工作，笔者做了以下简单的设置。

① 设置主题：默认的主题是白色背景，不是很利于保护眼睛，可以设置为近黑色的背景，这样长期对着电脑屏幕眼睛不会那么累。在左上角找到PhpStorm菜单，依次打开“Preferences→Appearance&Behavior→Appearance→UI Options”，选择Darcula主题，然后点击右下角的Apply应用该设置就可以看到效果了，如图2-12所示。

② 设置文件头的模板：在文件的头部，可以写上一些作者和代码版本的信息，这样就可以智能地生成文档了。可以对PHP文件和JavaScript文件单独设置，如图2-13所示。笔者设置的文件头部信息如下。

/**
  * 
  * create at ${DATE}
  * @author hellojammy (http:///about)
  * @version 1.0
  *
  */

图2-12　设置PhpStorm的主题为Darcula

图2-13　设置文件的头部信息

这里用到了预定义变量，常用的有日期、时间和文件名等。在设置框的Description中有所有的预定义变量。这里使用了Apache Velocity模板引擎语言，感兴趣的读者可以在这里了解更多：http://velocity./engine/devel/user-guide.html#Velocity_Template_Language_VTL:_An_Introduction。

③ 设置常用快捷键：以笔者的经验来看，善用快捷键能从一定程度上提升工作效率。依次打开“Preferences→Keymap”，在Keymaps中选择一种你习惯的IDE快捷键，然后再根据自身的使用习惯做修改。笔者选择的是IntelliJ IDEA Classic(OS X)，先复制一份，然后再修改快捷键，如图2-14所示。

图2-14　设置快捷键

2.4　相关技术介绍

本小节介绍微信公众平台开发中涉及的常见技术，如HTTP的基本概念、POST/GET的基本区别、Redis以及HTML5的相关知识。对以上知识熟悉的读者可以直接略过本小节。

2.4.1　HTTP

HTTP（HyperText Transport Protocol）超文本传输协议，是互联网上应用最为广泛的一种网络协议。它的发展是万维网协会W3C（World Wide Web Consortium）和Internet工作小组IETF（Internet Engineering Task Force）合作的结果。最终发布了一系列的RFC，RFC 1945定义了HTTP/1.0版本。其中最著名的就是RFC 2616。RFC 2616定义了今天普遍使用的一个版本—HTTP 1.1。

HTTP用于从服务器传输超文本到本地浏览器，它可以使网络传输减少，浏览器更加高效。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示（如文本先于图形）等。

HTTP的请求响应模型如图2-15所示。HTTP协议是一个无状态协议，是客户端发起请求，服务器响应。

图2-15　HTTP的请求-响应模式

HTTP的请求方法主要包括这几种：GET、POST、HEAD、PUT、DELETE、OPTIONS、
TRACE、CONNECT。其中最常用的是GET、POST、DELETE和PUT，对应的是查、改、删和增4个操作。我们在工作中接触和使用的最多的是GET和POST操作。

GET用于获取/查询资源信息，它主要向服务器发送索取数据的请求，请求的键值对数据通常是通过附加到URL中一起发送给服务器。HTTP规定，GET请求应该是安全的和幂等的；POST用于更新资源信息，向服务器提交数据，请求的数据通常是放在HTTP包的包体中。

注意

　

网络上存在着一些对GET和POST方法的误解，比如从请求数据的长度等方面来比较二者，其实是不够准确和严谨的。在此，笔者查阅HTTP协议的文档后总结如下。

HTTP协议没有对GET和POST长度进行限制。之所以存在这个误解，是因为早期的IE浏览器限制URL长度在2048个字符以内，也会对POST请求的数据限制在80K字节/100K字节以内。不过，在实际项目中，也不宜构造过长的请求URL，一方面是可读性降低，另一方面是过长的URL会增加服务器的处理负担。

自1999年发布HTTP 1.1之后的十几年间，HTTP协议均无更新。HTTP 1.1也是现在使用最多的一个版本，它是HTTP 1.0的一个优化版本，从一定程度上解决了连接无法复用的问题。但是，HTTP 1.1也存在着诸多问题，例如报头字段过于冗长和重复，造成流量的浪费；无法支持服务器推送等。

针对HTTP 1.1的这些问题，业界也提出了各类优化方案，但这些方法都是在尝试绕开协议本身的缺陷，治本不治标。2012年，Google提出了基于TCP的应用层协议SPDY，用以最小化网络延迟，提升网络速度，优化用户的网络使用体验。SPDY并不是一种用于替代HTTP的协议，而是对HTTP协议的增强。HTTP 2.0协议标准的制定是以SPDY为原型进行讨论的，并于2015年正式发布，编号7540（相关链接：http://www./rfc/rfc7450.txt）。

相比HTTP/1.x，HTTP/2.0主要变更和优化点是多路复用、HEAD压缩、服务器推送和优先级请求。关于HTTP2.0和HTTP1.1协议的请求速度对比，可以参考由Akamai公司建立的一个官方演示，地址为：https://http2./demo。同时请求379张图片，从加载时间的对比可以看出HTTP/2在速度上的优势。

新协议的普及需要一定的时间，但HTTP本身属于应用层协议，和当年的IPv6网络层协议不同，它不需要网络基础硬件设施的改造，因此普及速度较快。另外，HTTP 2.0兼容HTTP 1.x协议。Firefox在2015年检测到有13%的HTTP流量使用了HTTP 2.0协议，27%的HTTPS流量也使用了HTTP 2.0协议。

移动端的HTTP 2.0普及情况也在有序地推进。在iOS方面，iOS9+开始自动支持HTTP 2.0。Android方面，需要基于Chrome内核的WebView才能支持HTTP 2.0，而Android系统WebView从Android4.4（KitKat）才改成基于Chrome内核的。

2.4.2　HTML5

HTML5是下一代的HTML，它是HTML、XHTML和HTML DOM的新标准。HTML5的第一份正式草案在2008年公布，经过多个组织和机构的完善和推动，于2014年定稿。

HTML5为下一代Web提供了全新功能，并将引领下一代Web实现类似于桌面应用的体验。它支持的新特性主要包括：本地视频音频的播放、动画、地理信息、硬件加速、本地运行（离线能力）、本地存储、语义化标记等。HTML5将会减少对外部插件的依赖（例如Flash）。目前，主流的浏览器如Chrome、Safari和Firefox均已实现了对HTML5新特性的支持，不过部分功能可能会因浏览器厂商的实现方式不同而产生微小差异。随着移动互联网的发展，HTML5也将成为一个能在各个终端运行的跨平台语言。

2.5　小结

本章主要介绍微信公众号的开发环境及其相关技术，首先介绍主流的集成软件开发包，并从不同维度进行对比，最后选定XAMPP作为讲解示例，并详细介绍了配置过程。IDE选择的是PhpStorm，并介绍了PhpStorm的基本配置。本章的开发环境搭建，只是作为一个示例，读者可以根据自身需求选择其他开发环境。接下来的一章将介绍微信公众号开发前需要具备的知识。