本章主要介紹微信公眾平臺開發(fā)環(huán)境的搭建，以及用到的主要開發(fā)技術(shù)。

開發(fā)環(huán)境的選擇跟使用的后端開發(fā)語言有一定的關(guān)系。微信公眾號的開發(fā)后端語言不限，只要能和微信服務(wù)器正常交互即可。常見的后端開發(fā)語言有Java、PHP、C/C++、C#、Python、Node.js和Go語言等。微信官方的SDK代碼示例有PHP、Java以及Node.js的版本。筆者選擇的開發(fā)語言是PHP，并使用集成軟件開發(fā)包XAMPP（Apache+ MySQL/MariaDB+PHP+Perl）。

2.1　集成軟件包介紹

在本地開發(fā)時，需要在本地搭建一個能運(yùn)行Web站點(diǎn)程序的環(huán)境。為了簡化安裝，我們可以選擇集成軟件包，這種環(huán)境集成了運(yùn)行程序的基本環(huán)境，主要包括HTTP服務(wù)器，數(shù)據(jù)庫管理軟件以及程序設(shè)計(jì)語言運(yùn)行環(huán)境，如圖2-1所示。

這類集成軟件開發(fā)包主要有以下4個。

• WAMP（Apache+MySQL/MariaDB+PHP/Perl/Python）
  只支持在Windows系統(tǒng)下安裝使用，開源平臺。

• LAMP（Linux+Apache+MySQL/MariaDB+PHP/Perl/Python）
  只支持在Linux系統(tǒng)下使用，開源平臺。

• MAMP/MAMP Pro（Mac+Apache+MySQL+PHP）
  只支持在Mac系統(tǒng)下使用，開源平臺，支持PHP多版本切換。

• XAMPP（Apache+ MySQL/MariaDB+PHP+Perl）
  開頭的X代表X-OS，代表可以在任何常見操作系統(tǒng)下使用，包括Windows、Mac、Linux，開源平臺。

圖2-1　集成開發(fā)環(huán)境架構(gòu)

上述幾個集成軟件開發(fā)包，從跨平臺、易用性、可擴(kuò)展性和可配置性等方面綜合對比，筆者選擇的集成開發(fā)環(huán)境是XAMPP。XAMPP是Apache（HTTP服務(wù)器）、MySQL（數(shù)據(jù)庫管理軟件）、PHP（程序設(shè)計(jì)語言）和Perl（腳本語言）的簡稱。新版本的XAMPP已支持PHP7。

2.2　XAMPP的安裝與配置

XAMPP的下載地址是：https://www./zh_cn/index.html。讀者可根據(jù)自己的操作系統(tǒng)選擇合適的版本。XAMPP屬于Apache發(fā)行版，是Apache Friends
（一個推廣Apache服務(wù)器的非盈利性項(xiàng)目）下面的產(chǎn)品，感興趣的讀者還可以加入社區(qū)，地址是：https://community./。

筆者下載的是XAMPP for OS X版本。安裝過程簡單，需要注意的是，在選擇安裝組件這一步，如圖2-2所示，需要勾選“XAMPP Core Files”，這樣才能安裝完整的集成軟件開發(fā)包。XAMPP的默認(rèn)安裝目錄是/Applications/XAMPP。

安裝成功后，啟動程序，然后選擇Manage Servers，選擇Apache Web Server 啟動Apache。啟動成功后，綠色小燈會亮起，如圖2-3所示。假如啟動失敗，可以切換到Application log，查看原因，常見的原因是系統(tǒng)的80端口被占用。

圖2-2　選擇安裝組件

圖2-3　啟動XAMPP

選擇“Configure”，出現(xiàn)一個簡單的設(shè)置界面，如圖2-4所示。這里可以設(shè)置Http以及Https的端口，默認(rèn)是80和443。在“Open Access Log”和“Open Error Log”中可以分別查看Apache的訪問日志和錯誤日志。

筆者的本地開發(fā)環(huán)境，訪問的URL地址是通過配置Virtual hosts來實(shí)現(xiàn)的，例如dev.。這樣做的好處是，在多人協(xié)作開發(fā)時，只要保證各開發(fā)者本地的Virtual hosts是一致的，大家的訪問URL就是一樣的，并且URL中不出現(xiàn)localhost。需要通過以下4步來實(shí)現(xiàn)這一點(diǎn)。

圖2-4　XAMPP設(shè)置界面

① 修改Apache配置文件：在XAMPP的設(shè)置界面，如圖2-4所示，點(diǎn)擊“Open Conf File”打開Apache的配置文件。定位到靠近文件底部的位置或直接搜索“Virtual hosts”，把下方被注釋的“ Include etc/extra/httpd-vhosts.conf”這句前面的“#”去掉，如圖2-5所示，假如沒有被注釋則直接跳過這一步。

圖2-5　打開Virtual hosts功能

② 修改Apache的httpd-vhosts文件：進(jìn)入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>

在這里，設(shè)置域名為dev.。域名可以根據(jù)自身開發(fā)情況修改。錯誤日志和訪問日志均在logs/下，并設(shè)置了站點(diǎn)根目錄的目錄為：

/Applications/XAMPP/htdocs/dev.

③ 配置本地hosts文件：打開電腦終端，輸入命令“sudo vim /etc/hosts”，按提示輸入密碼，如圖2-6所示。進(jìn)入vi模式，輸入“i”編輯hosts文件，如圖2-7所示。在文件末端新增一行代碼，把域名“dev.” 映射到本地“127.0.0.1”。編輯完成后保存文件并退出?？梢酝ㄟ^ping域名的方式來驗(yàn)證是否配置成功，如圖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域名，看是否設(shè)置成功

④ 重啟Apache：進(jìn)入Apache的設(shè)置界面，在如圖2-3所示的界面，點(diǎn)擊“Restart”重啟。

至此，Apache的配置完成。打開瀏覽器，輸入dev.即可訪問。如圖2-9所示的輸出信息，是CodeIgniter開發(fā)框架的默認(rèn)頁面，關(guān)于該框架稍后會有詳細(xì)介紹。

圖2-9　在瀏覽器中訪問

2.3　PhpStorm的安裝及配置

選擇一款好用并且自己心儀的IDE（Integrated Development Environment）非常重要。能支持PHP語言的集成開發(fā)環(huán)境有很多，比如Eclipse、NetBeans、Zend Studio、PhpStorm等。選擇自己習(xí)慣使用的開發(fā)環(huán)境即可，筆者選擇的是PhpStorm。

PhpStorm是JetBrains公司開發(fā)的一款跨平臺PHP集成開發(fā)環(huán)境，它是一款智能的PHP編輯器，并支持JavaScript、HTML/CSS的智能編寫，支持PHP單元測試以及代碼重構(gòu)，如圖2-10所示。

圖2-10　PhpStorm 10的啟動界面

JetBrains是一家位于布拉格的軟件開發(fā)公司，該公司最為人所熟知的產(chǎn)品是Java語言的IDE—IntelliJ IDEA。該公司旗下的其他比較有名的編輯器主要有以下幾款。

• IntelliJ IDEA：一套智能的Java語言開發(fā)工具，并支持Android開發(fā)。

• PhpStorm：跨平臺PHP集成開發(fā)環(huán)境。

• PyCharm：Python集成開發(fā)環(huán)境。

• RubyMine：Ruby和Rails集成開發(fā)環(huán)境。

• WebStorm：智能的HTML/CSS/JS開發(fā)環(huán)境，Web前端開發(fā)人員的首選。

• AppCode：智能的iOS/OS X集成開發(fā)環(huán)境，與XCode類似。

• CLion：跨平臺的C/C++集成開發(fā)環(huán)境。

• Rader：跨平臺C#集成開發(fā)環(huán)境。

PhpStorm的官方下載地址是https://www./phpstorm/，下載安裝后，會提示30天免費(fèi)試用期，過了試用期需要購買才能繼續(xù)使用。

安裝完成之后，可以通過Create New Project（創(chuàng)建新工程）、Open（打開目錄）、Create New Project from Existing Files（以向?qū)У姆绞酱蜷_現(xiàn)有工程），或者Check out from Version Control（從源碼版本管理器中Check out代碼，如從Subversion或Github中下載代碼）新建工程，如圖2-11所示。

圖2-11　PhpStorm打開工程的方法

筆者選擇的是直接打開現(xiàn)有工程代碼。為了更好地工作，筆者做了以下簡單的設(shè)置。

① 設(shè)置主題：默認(rèn)的主題是白色背景，不是很利于保護(hù)眼睛，可以設(shè)置為近黑色的背景，這樣長期對著電腦屏幕眼睛不會那么累。在左上角找到PhpStorm菜單，依次打開“Preferences→Appearance&Behavior→Appearance→UI Options”，選擇Darcula主題，然后點(diǎn)擊右下角的Apply應(yīng)用該設(shè)置就可以看到效果了，如圖2-12所示。

② 設(shè)置文件頭的模板：在文件的頭部，可以寫上一些作者和代碼版本的信息，這樣就可以智能地生成文檔了?？梢詫HP文件和JavaScript文件單獨(dú)設(shè)置，如圖2-13所示。筆者設(shè)置的文件頭部信息如下。

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

圖2-12　設(shè)置PhpStorm的主題為Darcula

圖2-13　設(shè)置文件的頭部信息

這里用到了預(yù)定義變量，常用的有日期、時間和文件名等。在設(shè)置框的Description中有所有的預(yù)定義變量。這里使用了Apache Velocity模板引擎語言，感興趣的讀者可以在這里了解更多：http://velocity./engine/devel/user-guide.html#Velocity_Template_Language_VTL:_An_Introduction。

③ 設(shè)置常用快捷鍵：以筆者的經(jīng)驗(yàn)來看，善用快捷鍵能從一定程度上提升工作效率。依次打開“Preferences→Keymap”，在Keymaps中選擇一種你習(xí)慣的IDE快捷鍵，然后再根據(jù)自身的使用習(xí)慣做修改。筆者選擇的是IntelliJ IDEA Classic(OS X)，先復(fù)制一份，然后再修改快捷鍵，如圖2-14所示。

圖2-14　設(shè)置快捷鍵

2.4　相關(guān)技術(shù)介紹

本小節(jié)介紹微信公眾平臺開發(fā)中涉及的常見技術(shù)，如HTTP的基本概念、POST/GET的基本區(qū)別、Redis以及HTML5的相關(guān)知識。對以上知識熟悉的讀者可以直接略過本小節(jié)。

2.4.1　HTTP

HTTP（HyperText Transport Protocol）超文本傳輸協(xié)議，是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議。它的發(fā)展是萬維網(wǎng)協(xié)會W3C（World Wide Web Consortium）和Internet工作小組IETF（Internet Engineering Task Force）合作的結(jié)果。最終發(fā)布了一系列的RFC，RFC 1945定義了HTTP/1.0版本。其中最著名的就是RFC 2616。RFC 2616定義了今天普遍使用的一個版本—HTTP 1.1。

HTTP用于從服務(wù)器傳輸超文本到本地瀏覽器，它可以使網(wǎng)絡(luò)傳輸減少，瀏覽器更加高效。它不僅保證計(jì)算機(jī)正確快速地傳輸超文本文檔，還確定傳輸文檔中的哪一部分，以及哪部分內(nèi)容首先顯示（如文本先于圖形）等。

HTTP的請求響應(yīng)模型如圖2-15所示。HTTP協(xié)議是一個無狀態(tài)協(xié)議，是客戶端發(fā)起請求，服務(wù)器響應(yīng)。

圖2-15　HTTP的請求-響應(yīng)模式

HTTP的請求方法主要包括這幾種：GET、POST、HEAD、PUT、DELETE、OPTIONS、
TRACE、CONNECT。其中最常用的是GET、POST、DELETE和PUT，對應(yīng)的是查、改、刪和增4個操作。我們在工作中接觸和使用的最多的是GET和POST操作。

GET用于獲取/查詢資源信息，它主要向服務(wù)器發(fā)送索取數(shù)據(jù)的請求，請求的鍵值對數(shù)據(jù)通常是通過附加到URL中一起發(fā)送給服務(wù)器。HTTP規(guī)定，GET請求應(yīng)該是安全的和冪等的；POST用于更新資源信息，向服務(wù)器提交數(shù)據(jù)，請求的數(shù)據(jù)通常是放在HTTP包的包體中。

注意

　

網(wǎng)絡(luò)上存在著一些對GET和POST方法的誤解，比如從請求數(shù)據(jù)的長度等方面來比較二者，其實(shí)是不夠準(zhǔn)確和嚴(yán)謹(jǐn)?shù)?。在此，筆者查閱HTTP協(xié)議的文檔后總結(jié)如下。

HTTP協(xié)議沒有對GET和POST長度進(jìn)行限制。之所以存在這個誤解，是因?yàn)樵缙诘腎E瀏覽器限制URL長度在2048個字符以內(nèi)，也會對POST請求的數(shù)據(jù)限制在80K字節(jié)/100K字節(jié)以內(nèi)。不過，在實(shí)際項(xiàng)目中，也不宜構(gòu)造過長的請求URL，一方面是可讀性降低，另一方面是過長的URL會增加服務(wù)器的處理負(fù)擔(dān)。

自1999年發(fā)布HTTP 1.1之后的十幾年間，HTTP協(xié)議均無更新。HTTP 1.1也是現(xiàn)在使用最多的一個版本，它是HTTP 1.0的一個優(yōu)化版本，從一定程度上解決了連接無法復(fù)用的問題。但是，HTTP 1.1也存在著諸多問題，例如報(bào)頭字段過于冗長和重復(fù)，造成流量的浪費(fèi)；無法支持服務(wù)器推送等。

針對HTTP 1.1的這些問題，業(yè)界也提出了各類優(yōu)化方案，但這些方法都是在嘗試?yán)@開協(xié)議本身的缺陷，治本不治標(biāo)。2012年，Google提出了基于TCP的應(yīng)用層協(xié)議SPDY，用以最小化網(wǎng)絡(luò)延遲，提升網(wǎng)絡(luò)速度，優(yōu)化用戶的網(wǎng)絡(luò)使用體驗(yàn)。SPDY并不是一種用于替代HTTP的協(xié)議，而是對HTTP協(xié)議的增強(qiáng)。HTTP 2.0協(xié)議標(biāo)準(zhǔn)的制定是以SPDY為原型進(jìn)行討論的，并于2015年正式發(fā)布，編號7540（相關(guān)鏈接：http://www./rfc/rfc7450.txt）。

相比HTTP/1.x，HTTP/2.0主要變更和優(yōu)化點(diǎn)是多路復(fù)用、HEAD壓縮、服務(wù)器推送和優(yōu)先級請求。關(guān)于HTTP2.0和HTTP1.1協(xié)議的請求速度對比，可以參考由Akamai公司建立的一個官方演示，地址為：https://http2./demo。同時請求379張圖片，從加載時間的對比可以看出HTTP/2在速度上的優(yōu)勢。

新協(xié)議的普及需要一定的時間，但HTTP本身屬于應(yīng)用層協(xié)議，和當(dāng)年的IPv6網(wǎng)絡(luò)層協(xié)議不同，它不需要網(wǎng)絡(luò)基礎(chǔ)硬件設(shè)施的改造，因此普及速度較快。另外，HTTP 2.0兼容HTTP 1.x協(xié)議。Firefox在2015年檢測到有13%的HTTP流量使用了HTTP 2.0協(xié)議，27%的HTTPS流量也使用了HTTP 2.0協(xié)議。

移動端的HTTP 2.0普及情況也在有序地推進(jìn)。在iOS方面，iOS9+開始自動支持HTTP 2.0。Android方面，需要基于Chrome內(nèi)核的WebView才能支持HTTP 2.0，而Android系統(tǒng)WebView從Android4.4（KitKat）才改成基于Chrome內(nèi)核的。

2.4.2　HTML5

HTML5是下一代的HTML，它是HTML、XHTML和HTML DOM的新標(biāo)準(zhǔn)。HTML5的第一份正式草案在2008年公布，經(jīng)過多個組織和機(jī)構(gòu)的完善和推動，于2014年定稿。

HTML5為下一代Web提供了全新功能，并將引領(lǐng)下一代Web實(shí)現(xiàn)類似于桌面應(yīng)用的體驗(yàn)。它支持的新特性主要包括：本地視頻音頻的播放、動畫、地理信息、硬件加速、本地運(yùn)行（離線能力）、本地存儲、語義化標(biāo)記等。HTML5將會減少對外部插件的依賴（例如Flash）。目前，主流的瀏覽器如Chrome、Safari和Firefox均已實(shí)現(xiàn)了對HTML5新特性的支持，不過部分功能可能會因?yàn)g覽器廠商的實(shí)現(xiàn)方式不同而產(chǎn)生微小差異。隨著移動互聯(lián)網(wǎng)的發(fā)展，HTML5也將成為一個能在各個終端運(yùn)行的跨平臺語言。

2.5　小結(jié)

本章主要介紹微信公眾號的開發(fā)環(huán)境及其相關(guān)技術(shù)，首先介紹主流的集成軟件開發(fā)包，并從不同維度進(jìn)行對比，最后選定XAMPP作為講解示例，并詳細(xì)介紹了配置過程。IDE選擇的是PhpStorm，并介紹了PhpStorm的基本配置。本章的開發(fā)環(huán)境搭建，只是作為一個示例，讀者可以根據(jù)自身需求選擇其他開發(fā)環(huán)境。接下來的一章將介紹微信公眾號開發(fā)前需要具備的知識。