昨天已经讲了如何实现用户订阅公众账号时发送欢迎词，但这个貌似体现不出开发模式的优势啊，我用编辑模式做不是更加简单嘛，那么今天就来个升级版的欢迎词吧。先看最后的效果，如下图：



当用户关注公众账号时自动回复一个多图文消息，每个图文消息可以对应一篇文章或者自己网站的某个网页，用户点击就可以查看，是不是非常棒，特别适合一些企业用来做公司业务介绍。现在就教大家如何实现，顺便就可以把图文消息的回复讲了。

一、使用SAE 的分布式存储服务

在编辑模式里做图文消息回复时，直接通过关键字回复就可以很方便的实现，但是编辑模式下的关注回复不能用图文消息，所以大家都是用文字的，但是在开发模式里就可以使用了，图文消息的输出格式如下：


其中图片是用图片链接（在上图标签PicUrl 处）的形式出现，也就是图片得先上传到服务器，然后将图片连接放置到输出代码里，这里提供三种图片连接生成方法：

1、直接复制第三方网站的图片链接，比如我们在百度图片搜索到某张图片，将该图片的链接直接复制过来就可以，非常方便，但是如果第三方网站把图片删除或者说有防盗链机制，就会造成图片不显示。所以不推荐这类方式，除非可以保证该图片链接永久有效。

2、将图片上传到新浪微博、腾讯微博这些地方发微博（微信的素材管理图片链接不能使用），然后将图片链接复制过来，这里要注意的是记得把微博水印关掉，否则这个图片上就带着你的微博名字了。

3、咱们都已经在用云计算平台了，就顺便用下云存储服务吧，我目前自己是在用又拍云存储，那个有点复杂后面做具体完整项目时再介绍。

现在先使用 SAE 的 Storage 存储服务，这是SAE 为开发者提供分布式文件存储，因为SAE 平台限制使用本地存储，所有需要持久化的文件比如图片、音乐等只能保存到Storage 上。

首先是启动 Storage 服务，进入咱们的应用首页，在左边导航里找到”Storage”这个选项，如下图：



点击打开后右边页面会进入开启“Storage”服务的设置页面，如下图：



点击“新建一个domain”按钮，进入存储空间的设置页面，如下图：



1. 存储空间的名称，只能由数字和字母组成，根据自己喜好取个吧。

2. 存储空间的介绍，用来提示该空间的用途，比如我这个是用来放图片和音乐文件的。

3. 是否私有云存储，如果打勾则无法通过URL 直接访问，只能通过程序接口读取访问，咱们不用搞那么复杂所以别打勾了

4. 缓存时间。这个可以减少服务器的负担，一般设6 小时就可以了。

5. 防盗链设置。可以设置能够访问文件的白名单网址，咱们也不用搞那么复杂所别打勾了。

创建成功以后在右边会出现存储空间管理，如图：


1. 存储空间属性修改，除了名称不能修改以外其他都可以，包括设置访问权限、说明、防盗链以及缓存时间修改等。

2. 删除该存储空间，删除时将会将会把该空间内所有文件都删除，所以小心操作。

3. 管理存储空间。点击后进入管理页面，可以看到存储空间默认的容量是10G，肯定够用，如下图：



1. 下载客户端，直接用应用程序管理存储空间，有点像FTP 管理，咱们现在是初学者，不用去管这个。

2. 返回Storage 的管理首页。

3. 新建子目录方便文件分类，比如可以建一个目录叫pic，里面存放图片文件。

上传文件，点击后弹出文件上传窗口，跟普通的文件上传操作一样，支持批量上传，我就不多介绍了，微信开发模式只支持jpg 和png 文件，请注意图片文件格式。另外需要注意的是文件名需要规范，不要和之前的已经上传的文件同名，否则会覆盖掉，建议每次上传前使用日期+编号+文件名的方式。这里给大家一个我上传图片后的样例：



点击图片名称就会在新窗口打开该图片，复制浏览器的URL 就是该图片的链接，可以直接用到图文消息的代码里。

可能有朋友会说为什么不把图片直接上传到 SAE 的代码管理目录里访问，确实可以这样做，但是不推荐这样做，一个是代码的空间大小默认只有100M，扩容会增加开销，二是代码空间是用来跑脚本的，同等流量费用要高很多，三是代码空间不允许写入文件，将来无法实现通过程序上传图片的功能。

二、制作多图文消息

啰嗦一大堆朋友们都等急了吧，现在我们开始做图文消息欢迎词！

昨天我教大家的是用户订阅后回复文字消息，最后实际输出的是一个经过拼装的符合文字消息回复格式的字符串，其结构如下图：



里面的一些带“$”的变量在前面代码都赋了值，最后回复到微信公众平台接口的实际消息是这样：



现在打开SAE 的代码管理，进入编辑模式，修改我们的微信接口文件，首先将代码中第29 行到第31 行的三行代码注释掉，就是输出文本消息的三行代码，如图所示：



注释多行代码使用/*.....*/来包含，在中间的所有内容都不再被执行。

然后在注释前面开始写图文消息回复，前面我们看到过图文消息回复的格式了，现在就是要拼接出一个符合图文消息回复格式的字符串，当用户关注时回复给用户，首先我们把图文消息的公共部分先赋值，如图：



代码从 30 行开始，前面的跟昨天是一样的，就是监测是否用户订阅事件。

首先是赋值给$resultStr 这个变量图文消息的数据头部，跟文本消息的差不多，只是昨天是用了sprintf 这个函数直接将数据写到模板里去了，今天是拿模板直接来用，实际效果是一样的，与文字消息不同的是：

第 34 行，MsgType 变成了news；

第 35 行多了一个ArticleCount，这个值表示多图文消息的条数，包括了封面消息在内，我这里是5，各位可以根据自己实际修改。

当 ArticleCount 为1，只放一条消息时则为单图文消息，大于2，放了两条消息以上则为多图文消息。

第 36 行是图片消息列表标签的开始，最后会有一个来闭合整个图文消息列表。

PS：在php 里字符串的拼接使用“.”，echo "A"."B";输出的是AB。当然高级程序猿为了提高运行效率会使用其他方法来拼接字符串，这里就不说了。

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



这里可以看到$resultStr 和“=”之间多了一个“.”，这也是字符串拼接语法，等于$resultStr=$resultStr.“....”，将新的字符串拼接到之前已经赋值的$resultStr 后面再赋值给$resultStr。

图文消息里用...来区分各条消息，每条图文消息数据格式都一样，分别为：

第 41 行，图文消息的标题

第 42 行，图问消息的摘要，如果是多图文可以为空不填写，如果是单图文消息需要填写。

第 43 行，封面图片，放置图片链接，官方给出较好的效果为大图即多图文的封面消息图片为640*320，小图即列表消息的缩略图80*80，注意这里的图片其实可以跟实际链接打开的文章图片不一致。

第 44 行，文章链接，放置点击该图文消息时打开的页面，这里可以放置自己的网页链接，比如淘宝店的或者自己网站的，当然也可以放置微信公众平台的图文消息链接（ZTalk 的文章查询里其实放的都是微信文章链接，省事又省流量，哈哈哈）。

剩下就是放四个列表消息，结构跟封面消息其实是一样的只是在多图文消息模式下默认会将第一个消息作为封面消息，如图：



只需要将前面的封面消息复制粘贴一下，然后把标题、摘要、图片和连接这些修改下就可以了。
最后是把图文消息的尾巴加上，如图：



第 76 行就是我前面说的闭合图文消息内容；
第 77 行是用来星标用户请求消息的，由于这个消息是其实是用户订阅事件，不用打星标，所以这里的值为0。
第 78 行是闭合整个输出图文消息结构的。
好了，现在保存下，重新关注下公众账号，看看是否成功回复了一个图文菜单，是不是很有成就感！