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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

管理存儲空間。點(diǎn)擊后進(jìn)入管理頁面，可以看到存儲空間默認(rèn)的容量是10G，肯定夠用，如下圖：

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

返回Storage的管理首頁。

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

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

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

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

二、制作多圖文消息

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

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

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

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

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

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

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

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

第34行，MsgType變成了news；

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

當(dāng)ArticleCount為1，只放一條消息時(shí)則為單圖文消息，大于2，放了兩條消息以上則為多圖文消息。

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

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

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

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

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

第41行，圖文消息的標(biāo)題

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

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

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

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

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

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

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

第77行是用來星標(biāo)用戶請求消息的，由于這個(gè)消息是其實(shí)是用戶訂閱事件，不用打星標(biāo)，所以這里的值為0。

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

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

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

ZTalk秘籍

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

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

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

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

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

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

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

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

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

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