微信技術(shù)實操（9）：公眾賬號發(fā)送歡迎圖文消息

昨天已經(jīng)講了如何實現(xiàn)用戶訂閱公眾賬號時發(fā)送歡迎詞，但這個貌似體現(xiàn)不出開發(fā)模式的優(yōu)勢啊，我用編輯模式做不是更加簡單嘛，那么今天就來個升級版的歡迎詞吧。先看最后的效果，如下圖：

 

 

當用戶關(guān)注公眾賬號時自動回復(fù)一個多圖文消息，每個圖文消息可以對應(yīng)一篇文章或者自己網(wǎng)站的某個網(wǎng)頁，用戶點擊就可以查看，是不是非常棒，特別適合一些企業(yè)用來做公司業(yè)務(wù)介紹?，F(xiàn)在就教大家如何實現(xiàn)，順便就可以把圖文消息的回復(fù)講了。

一、使用SAE的分布式存儲服務(wù)

在編輯模式里做圖文消息回復(fù)時，直接通過關(guān)鍵字回復(fù)就可以很方便的實現(xiàn)，但是編輯模式下的關(guān)注回復(fù)不能用圖文消息，所以大家都是用文字的，但是在開發(fā)模式里就可以使用了，圖文消息的輸出格式如下：

 

 

其中圖片是用圖片鏈接（在上圖標簽PicUrl處）的形式出現(xiàn)，也就是圖片得先上傳到服務(wù)器，然后將圖片連接放置到輸出代碼里，這里提供三種圖片連接生成方法：

1、直接復(fù)制第三方網(wǎng)站的圖片鏈接，比如我們在百度圖片搜索到某張圖片，將該圖片的鏈接直接復(fù)制過來就可以，非常方便，但是如果第三方網(wǎng)站把圖片刪除或者說有防盜鏈機制，就會造成圖片不顯示。所以不推薦這類方式，除非可以保證該圖片鏈接永久有效。

2、將圖片上傳到新浪微博、騰訊微博這些地方發(fā)微博（微信的素材管理圖片鏈接不能使用），然后將圖片鏈接復(fù)制過來，這里要注意的是記得把微博水印關(guān)掉，否則這個圖片上就帶著你的微博名字了。

3、咱們都已經(jīng)在用云計算平臺了，就順便用下云存儲服務(wù)吧，我目前自己是在用又拍云存儲，那個有點復(fù)雜后面做具體完整項目時再介紹。

現(xiàn)在先使用SAE的 Storage存儲服務(wù)，這是SAE為開發(fā)者提供分布式文件存儲，因為SAE平臺限制使用本地存儲，所有需要持久化的文件比如圖片、音樂等只能保存到Storage上。

首先是啟動Storage服務(wù)，進入咱們的應(yīng)用首頁，在左邊導(dǎo)航里找到”Storage”這個選項，如下圖：

 

點擊打開后右邊頁面會進入開啟“Storage”服務(wù)的設(shè)置頁面，如下圖：

 

 

點擊“新建一個domain”按鈕，進入存儲空間的設(shè)置頁面，如下圖：

 

 

存儲空間的名稱，只能由數(shù)字和字母組成，根據(jù)自己喜好取個吧。

存儲空間的介紹，用來提示該空間的用途，比如我這個是用來放圖片和音樂文件的。

是否私有云存儲，如果打勾則無法通過URL直接訪問，只能通過程序接口讀取訪問，咱們不用搞那么復(fù)雜所以別打勾了

緩存時間。這個可以減少服務(wù)器的負擔(dān)，一般設(shè)6小時就可以了。

防盜鏈設(shè)置。可以設(shè)置能夠訪問文件的白名單網(wǎng)址，咱們也不用搞那么復(fù)雜所別打勾了。

創(chuàng)建成功以后在右邊會出現(xiàn)存儲空間管理，如圖：

 

 

存儲空間屬性修改，除了名稱不能修改以外其他都可以，包括設(shè)置訪問權(quán)限、說明、防盜鏈以及緩存時間修改等。

刪除該存儲空間，刪除時將會將會把該空間內(nèi)所有文件都刪除，所以小心操作。

管理存儲空間。點擊后進入管理頁面，可以看到存儲空間默認的容量是10G，肯定夠用，如下圖：

 

 

下載客戶端，直接用應(yīng)用程序管理存儲空間，有點像FTP管理，咱們現(xiàn)在是初學(xué)者，不用去管這個。

返回Storage的管理首頁。

新建子目錄方便文件分類，比如可以建一個目錄叫pic，里面存放圖片文件。

上傳文件，點擊后彈出文件上傳窗口，跟普通的文件上傳操作一樣，支持批量上傳，我就不多介紹了，微信開發(fā)模式只支持jpg和png文件，請注意圖片文件格式。另外需要注意的是文件名需要規(guī)范，不要和之前的已經(jīng)上傳的文件同名，否則會覆蓋掉，建議每次上傳前使用日期+編號+文件名的方式。這里給大家一個我上傳圖片后的樣例：

 

 

點擊圖片名稱就會在新窗口打開該圖片，復(fù)制瀏覽器的URL就是該圖片的鏈接，可以直接用到圖文消息的代碼里。

可能有朋友會說為什么不把圖片直接上傳到SAE的代碼管理目錄里訪問，確實可以這樣做，但是不推薦這樣做，一個是代碼的空間大小默認只有100M，擴容會增加開銷，二是代碼空間是用來跑腳本的，同等流量費用要高很多，三是代碼空間不允許寫入文件，將來無法實現(xiàn)通過程序上傳圖片的功能。

二、制作多圖文消息

啰嗦一大堆朋友們都等急了吧，現(xiàn)在我們開始做圖文消息歡迎詞！

昨天我教大家的是用戶訂閱后回復(fù)文字消息，最后實際輸出的是一個經(jīng)過拼裝的符合文字消息回復(fù)格式的字符串，其結(jié)構(gòu)如下圖：

 

 

里面的一些帶“$”的變量在前面代碼都賦了值，最后回復(fù)到微信公眾平臺接口的實際消息是這樣：

 

 

現(xiàn)在打開SAE的代碼管理，進入編輯模式，修改我們的微信接口文件，首先將代碼中第29行到第31行的三行代碼注釋掉，就是輸出文本消息的三行代碼，如圖所示：

 

 

注釋多行代碼使用/*…..*/來包含，在中間的所有內(nèi)容都不再被執(zhí)行。

然后在注釋前面開始寫圖文消息回復(fù)，前面我們看到過圖文消息回復(fù)的格式了，現(xiàn)在就是要拼接出一個符合圖文消息回復(fù)格式的字符串，當用戶關(guān)注時回復(fù)給用戶，首先我們把圖文消息的公共部分先賦值，如圖：

 

 

代碼從30行開始，前面的跟昨天是一樣的，就是監(jiān)測是否用戶訂閱事件。

首先是賦值給$resultStr這個變量圖文消息的數(shù)據(jù)頭部，跟文本消息的差不多，只是昨天是用了sprintf這個函數(shù)直接將數(shù)據(jù)寫到模板里去了，今天是拿模板直接來用，實際效果是一樣的，與文字消息不同的是：

第34行，MsgType變成了news；

第35行多了一個ArticleCount，這個值表示多圖文消息的條數(shù)，包括了封面消息在內(nèi)，我這里是5，各位可以根據(jù)自己實際修改。

當ArticleCount為1，只放一條消息時則為單圖文消息，大于2，放了兩條消息以上則為多圖文消息。

第36行是圖片消息列表標簽的開始，最后會有一個來閉合整個圖文消息列表。

PS：在php里字符串的拼接使用“.”，echo “A”.”B”;輸出的是AB。當然高級程序猿為了提高運行效率會使用其他方法來拼接字符串，這里就不說了。

然后是封面消息，如圖下：

 

 

這里可以看到$resultStr和“=”之間多了一個“.”，這也是字符串拼接語法，等于$resultStr=$resultStr.“….”，將新的字符串拼接到之前已經(jīng)賦值的$resultStr后面再賦值給$resultStr。

圖文消息里用…來區(qū)分各條消息，每條圖文消息數(shù)據(jù)格式都一樣，分別為：

第41行，圖文消息的標題

第42行，圖問消息的摘要，如果是多圖文可以為空不填寫，如果是單圖文消息需要填寫。

第43行，封面圖片，放置圖片鏈接，官方給出較好的效果為大圖即多圖文的封面消息圖片為640*320，小圖即列表消息的縮略圖80*80，注意這里的圖片其實可以跟實際鏈接打開的文章圖片不一致。

第44行，文章鏈接，放置點擊該圖文消息時打開的頁面，這里可以放置自己的網(wǎng)頁鏈接，比如淘寶店的或者自己網(wǎng)站的，當然也可以放置微信公眾平臺的圖文消息鏈接（ZTalk的文章查詢里其實放的都是微信文章鏈接，省事又省流量，哈哈哈）。

剩下就是放四個列表消息，結(jié)構(gòu)跟封面消息其實是一樣的，只是在多圖文消息模式下默認會將第一個消息作為封面消息，如圖：

 

 

只需要將前面的封面消息復(fù)制粘貼一下，然后把標題、摘要、圖片和連接這些修改下就可以了。

最后是把圖文消息的尾巴加上，如圖：

 

 

第76行就是我前面說的閉合圖文消息內(nèi)容；

第77行是用來星標用戶請求消息的，由于這個消息是其實是用戶訂閱事件，不用打星標，所以這里的值為0。

第78行是閉合整個輸出圖文消息結(jié)構(gòu)的。

好了，現(xiàn)在保存下，重新關(guān)注下公眾賬號，看看是否成功回復(fù)了一個圖文菜單，是不是很有成就感！

給大家一個作業(yè)：試試關(guān)注時回復(fù)單條圖文或者5條以上的多圖文消息。

ZTalk秘籍

微信開發(fā)的調(diào)試是個很麻煩的事情，為什么呢？因為接口是微信來調(diào)用的，所有的結(jié)果都是返回到微信公眾平臺去的，我們無法得到運行結(jié)果，除了語法錯誤還可以直接打開接口網(wǎng)頁看錯誤提示，比如下圖表示我的代碼第16行語法錯了：

 

 

其他錯誤就全得從公眾賬號里看了，但實際上只要有錯，公眾賬號里啥反應(yīng)都沒有了，一般來說就是邏輯出錯或者變量沒有獲取到值什么的，這個時候就需要設(shè)置一些斷點來檢查，比如我們在今天的這個課程中如果發(fā)現(xiàn)訂閱后沒有任何歡迎提示，我們可以在輸出前設(shè)置一個斷點，將結(jié)果先保存成一個文件，然后查看該文件檢查結(jié)果是否正確，如圖：

 

 

前面說了SAE不允許在本地生成文件，所以我們得把文件生成到Storage存儲空間去。

第87行是新建一個Storage的對象，定義為$s；

第88行是寫入一個文件到Storage空間，格式為$s->write(空間名稱，寫入文件名，寫入的內(nèi)容)

然后我們?nèi)∠⒅匦掠嗛喒娰~號后，到Storage會看到多了一個test.txt的文件，如圖：

 

 

點擊打開后就可以看到內(nèi)容，如果正常的話里面內(nèi)容就是多圖文消息的XML數(shù)據(jù)，如圖：

 

 

如果文件沒有生成，或者文件里面是空的，就說明程序運行有問題，咱們把斷點上移，因為程序運行一般是從上至下的，所以我們可以把斷點放到第一個邏輯判斷處，如圖我移動到了是否接收到微信接口發(fā)送消息的判斷位置：

 

 

主要是監(jiān)測有沒有收到微信的請求，我直接用字符串”get_post”（記得字符串要用雙引號包含）來代替之前的變量，然后在公眾號里發(fā)送任意字符，再查看Storage里的test.txt文件，如果正常文件應(yīng)該生成，并且里面應(yīng)該有“get_post”，否則就是出錯了，那要檢查公眾平臺是否已經(jīng)和SAE應(yīng)用正常通訊了。

斷點一般是檢查變量的賦值是否正確，或者是否從接口獲取到了值，或者代碼邏輯是否正確。比如可以移到圖中這個邏輯判斷后面，文件寫入內(nèi)容直接用字符串比如”subscribe”，然后取消關(guān)注再訂閱公眾號，監(jiān)測是否收到了訂閱事件，如果文件里有subscribe字樣就表示運行正常，否則就是出錯了：