微信公众号教程（9）公众账号发送欢迎图文消息
? ?公眾賬號發(fā)送歡迎圖文消息
?原文：http://www.cnblogs.com/imaker/p/6249972.html
昨天已經(jīng)講了如何實現(xiàn)用戶訂閱公眾賬號時發(fā)送歡迎詞，但這個貌似體現(xiàn)不出開發(fā)模式的優(yōu)勢啊，我用編輯模式做不是更加簡單嘛，那么今天就來個升級版的歡迎詞吧。先看最后的效果，如下圖：
?
?
當用戶關(guān)注公眾賬號時自動回復一個多圖文消息，每個圖文消息可以對應一篇文章或者自己網(wǎng)站的某個網(wǎng)頁，用戶點擊就可以查看，是不是非常棒，特別適合一些企業(yè)用來做公司業(yè)務介紹。現(xiàn)在就教大家如何實現(xiàn)，順便就可以把圖文消息的回復講了。
?
一、使用SAE的分布式存儲服務
?
在編輯模式里做圖文消息回復時，直接通過關(guān)鍵字回復就可以很方便的實現(xiàn)，但是編輯模式下的關(guān)注回復不能用圖文消息，所以大家都是用文字的，但是在開發(fā)模式里就可以使用了，圖文消息的輸出格式如下：
其中圖片是用圖片鏈接（在上圖標簽PicUrl處）的形式出現(xiàn)，也就是圖片得先上傳到服務器，然后將圖片連接放置到輸出代碼里，這里提供三種圖片連接生成方法：
?
1、直接復制第三方網(wǎng)站的圖片鏈接，比如我們在百度圖片搜索到某張圖片，將該圖片的鏈接直接復制過來就可以，非常方便，但是如果第三方網(wǎng)站把圖片刪除或者說有防盜鏈機制，就會造成圖片不顯示。所以不推薦這類方式，除非可以保證該圖片鏈接永久有效。
?
2、將圖片上傳到新浪微博、騰訊微博這些地方發(fā)微博（微信的素材管理圖片鏈接不能使用），然后將圖片鏈接復制過來，這里要注意的是記得把微博水印關(guān)掉，否則這個圖片上就帶著你的微博名字了。
?
3、咱們都已經(jīng)在用云計算平臺了，就順便用下云存儲服務吧，我目前自己是在用又拍云存儲，那個有點復雜后面做具體完整項目時再介紹。
?
現(xiàn)在先使用SAE的 Storage存儲服務，這是SAE為開發(fā)者提供分布式文件存儲，因為SAE平臺限制使用本地存儲，所有需要持久化的文件比如圖片、音樂等只能保存到Storage上。
?
首先是啟動Storage服務，進入咱們的應用首頁，在左邊導航里找到”Storage”這個選項，如下圖：
?
?
點擊打開后右邊頁面會進入開啟“Storage”服務的設(shè)置頁面，如下圖：
點擊“新建一個domain”按鈕，進入存儲空間的設(shè)置頁面，如下圖：
存儲空間的名稱，只能由數(shù)字和字母組成，根據(jù)自己喜好取個吧。
存儲空間的介紹，用來提示該空間的用途，比如我這個是用來放圖片和音樂文件的。
是否私有云存儲，如果打勾則無法通過URL直接訪問，只能通過程序接口讀取訪問，咱們不用搞那么復雜所以別打勾了
緩存時間。這個可以減少服務器的負擔，一般設(shè)6小時就可以了。
防盜鏈設(shè)置。可以設(shè)置能夠訪問文件的白名單網(wǎng)址，咱們也不用搞那么復雜所別打勾了。
創(chuàng)建成功以后在右邊會出現(xiàn)存儲空間管理，如圖：
?
存儲空間屬性修改，除了名稱不能修改以外其他都可以，包括設(shè)置訪問權(quán)限、說明、防盜鏈以及緩存時間修改等。
?
刪除該存儲空間，刪除時將會將會把該空間內(nèi)所有文件都刪除，所以小心操作。
?
管理存儲空間。點擊后進入管理頁面，可以看到存儲空間默認的容量是10G，肯定夠用，如下圖：
?
下載客戶端，直接用應用程序管理存儲空間，有點像FTP管理，咱們現(xiàn)在是初學者，不用去管這個。
?
返回Storage的管理首頁。
?
新建子目錄方便文件分類，比如可以建一個目錄叫pic，里面存放圖片文件。
?
?
上傳文件，點擊后彈出文件上傳窗口，跟普通的文件上傳操作一樣，支持批量上傳，我就不多介紹了，微信開發(fā)模式只支持jpg和png文件，請注意圖片文件格式。另外需要注意的是文件名需要規(guī)范，不要和之前的已經(jīng)上傳的文件同名，否則會覆蓋掉，建議每次上傳前使用日期+編號+文件名的方式。這里給大家一個我上傳圖片后的樣例：
?
點擊圖片名稱就會在新窗口打開該圖片，復制瀏覽器的URL就是該圖片的鏈接，可以直接用到圖文消息的代碼里。
?
可能有朋友會說為什么不把圖片直接上傳到SAE的代碼管理目錄里訪問，確實可以這樣做，但是不推薦這樣做，一個是代碼的空間大小默認只有100M，擴容會增加開銷，二是代碼空間是用來跑腳本的，同等流量費用要高很多，三是代碼空間不允許寫入文件，將來無法實現(xiàn)通過程序上傳圖片的功能。
?
?
二、制作多圖文消息
?
啰嗦一大堆朋友們都等急了吧，現(xiàn)在我們開始做圖文消息歡迎詞！
?
昨天我教大家的是用戶訂閱后回復文字消息，最后實際輸出的是一個經(jīng)過拼裝的符合文字消息回復格式的字符串，其結(jié)構(gòu)如下圖：
?
里面的一些帶“$”的變量在前面代碼都賦了值，最后回復到微信公眾平臺接口的實際消息是這樣：
?
?
現(xiàn)在打開SAE的代碼管理，進入編輯模式，修改我們的微信接口文件，首先將代碼中第29行到第31行的三行代碼注釋掉，就是輸出文本消息的三行代碼，如圖所示：
?
?
注釋多行代碼使用/*.....*/來包含，在中間的所有內(nèi)容都不再被執(zhí)行。
?
然后在注釋前面開始寫圖文消息回復，前面我們看到過圖文消息回復的格式了，現(xiàn)在就是要拼接出一個符合圖文消息回復格式的字符串，當用戶關(guān)注時回復給用戶，首先我們把圖文消息的公共部分先賦值，如圖：
?
代碼從30行開始，前面的跟昨天是一樣的，就是監(jiān)測是否用戶訂閱事件。
?
首先是賦值給$resultStr這個變量圖文消息的數(shù)據(jù)頭部，跟文本消息的差不多，只是昨天是用了sprintf這個函數(shù)直接將數(shù)據(jù)寫到模板里去了，今天是拿模板直接來用，實際效果是一樣的，與文字消息不同的是：
?
第34行，MsgType變成了news；
?
第35行多了一個ArticleCount，這個值表示多圖文消息的條數(shù)，包括了封面消息在內(nèi)，我這里是5，各位可以根據(jù)自己實際修改。
?
當ArticleCount為1，只放一條消息時則為單圖文消息，大于2，放了兩條消息以上則為多圖文消息。
?
第36行是圖片消息列表標簽的開始，最后會有一個</Articles>來閉合整個圖文消息列表。
?
PS：在php里字符串的拼接使用“.”，echo "A"."B";輸出的是AB。當然高級程序猿為了提高運行效率會使用其他方法來拼接字符串，這里就不說了。
?
然后是封面消息，如圖下：
?
?
這里可以看到$resultStr和“=”之間多了一個“.”，這也是字符串拼接語法，等于$resultStr=$resultStr.“....”，將新的字符串拼接到之前已經(jīng)賦值的$resultStr后面再賦值給$resultStr。
?
圖文消息里用<item>...</item>來區(qū)分各條消息，每條圖文消息數(shù)據(jù)格式都一樣，分別為：
?
第41行，圖文消息的標題
?
第42行，圖問消息的摘要，如果是多圖文可以為空不填寫，如果是單圖文消息需要填寫。
?
第43行，封面圖片，放置圖片鏈接，官方給出較好的效果為大圖即多圖文的封面消息圖片為640*320，小圖即列表消息的縮略圖80*80，注意這里的圖片其實可以跟實際鏈接打開的文章圖片不一致。
?
第44行，文章鏈接，放置點擊該圖文消息時打開的頁面，這里可以放置自己的網(wǎng)頁鏈接，比如淘寶店的或者自己網(wǎng)站的，當然也可以放置微信公眾平臺的圖文消息鏈接（ZTalk的文章查詢里其實放的都是微信文章鏈接，省事又省流量，哈哈哈）。
?
剩下就是放四個列表消息，結(jié)構(gòu)跟封面消息其實是一樣的，只是在多圖文消息模式下默認會將第一個消息作為封面消息，如圖：
?
只需要將前面的封面消息復制粘貼一下，然后把標題、摘要、圖片和連接這些修改下就可以了。
?
最后是把圖文消息的尾巴加上，如圖：
?
第76行就是我前面說的閉合圖文消息內(nèi)容；
?
第77行是用來星標用戶請求消息的，由于這個消息是其實是用戶訂閱事件，不用打星標，所以這里的值為0。
?
第78行是閉合整個輸出圖文消息結(jié)構(gòu)的。
?
好了，現(xiàn)在保存下，重新關(guān)注下公眾賬號，看看是否成功回復了一個圖文菜單，是不是很有成就感！
?
給大家一個作業(yè)：試試關(guān)注時回復單條圖文或者5條以上的多圖文消息。
?
ZTalk秘籍
?
微信開發(fā)的調(diào)試是個很麻煩的事情，為什么呢？因為接口是微信來調(diào)用的，所有的結(jié)果都是返回到微信公眾平臺去的，我們無法得到運行結(jié)果，除了語法錯誤還可以直接打開接口網(wǎng)頁看錯誤提示，比如下圖表示我的代碼第16行語法錯了：
?
其他錯誤就全得從公眾賬號里看了，但實際上只要有錯，公眾賬號里啥反應都沒有了，一般來說就是邏輯出錯或者變量沒有獲取到值什么的，這個時候就需要設(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文件，如果正常文件應該生成，并且里面應該有“get_post”，否則就是出錯了，那要檢查公眾平臺是否已經(jīng)和SAE應用正常通訊了。
?
斷點一般是檢查變量的賦值是否正確，或者是否從接口獲取到了值，或者代碼邏輯是否正確。比如可以移到圖中這個邏輯判斷后面，文件寫入內(nèi)容直接用字符串比如"subscribe"，然后取消關(guān)注再訂閱公眾號，監(jiān)測是否收到了訂閱事件，如果文件里有subscribe字樣就表示運行正常，否則就是出錯了：
?
?
?
今天的課就先到這里，明天講關(guān)鍵字回復以及……N多人關(guān)心的如何播放音樂！！！！
?
轉(zhuǎn)載于:https://www.cnblogs.com/imaker/p/6249972.html
總結(jié)
以上是生活随笔為你收集整理的微信公众号教程（9）公众账号发送欢迎图文消息的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 设置为首页，加入收藏 | JS完美实现代
- 下一篇： 自学人工智能编程难吗？