vue设置微信小程序分享标题（通过微信公众号API实现图文消息的自动推送）

因为流量经济的特殊地位，现在很多内容平台会实现和微信公众号的对接，以实现文章向订阅号/服务号的实时推送，今天做了一下测试，遇到不少坑，这里把避坑要点记一下，希望遇到类似情况的朋友可以少走弯路。

咱们不要在同一个坑里跌倒

如下图，我们经常用到的典型场景：文章我们在平台里写好后，选择我们管理的订阅号，点击推送后，文章推送到订阅号里发布，发布包括普通发布和群发。

平台中文章的发布入口设计

发布是公众号内容发表形式的一种，不同于群发，发布的内容不会通过推送消息触达给关注的粉丝，也不会占用群发的次数，每天可以发布多篇内容。而公众号群发，如果是订阅号，每天只能发送一次；如果是服务号，每周只能发送一次。

发布后可以在微信公众号管理后台查看

准备操作

在开始之前，我们假定以下内容处于就绪状态：

• 微信认证已完成，已经获得访问微信API的权限（完成认证要花300个大洋）
• Token中控服务器已就绪（如果不明白怎么设置，可留言）

图文消息的内容准备

对于微信订阅号或者服务号而言，一个典型的图文消息，结构是这个样子的：

因此，我们的文章需要按上述结构组织业务对象，和该业务结构一一对应即可。接下来，我们看一下微信公众号的组织方式，在简单发布场景，我们用到素材库、草稿箱、发布记录三部分内容。

• 素材库：提供页面所需要的图片、缩略图等素材，这里注意一下，因为我们发布的文章中，内嵌图片一般是我们自己的内容后台提供的，微信这里不予识别，所以，涉及的图片引用，要做一下图源平迁
• 草稿箱：用以暂存我们编辑的文章，它为我们进入发布和群发状态提供操作缓冲
• 发布记录：发布或群发的消息进入该页面进行管理

这里有一点需要注意，就是文章缩略图，图文消息里面通过thumb_media_id记录一个id值，该缩略图存在上文提及的素材库中，并在上传素材后获得该ID，并赋予上文列示的图文结构中

实现步骤

#01：TOKEN中控服务器的实现

微信公众号需要通过白名单的方式限制TOKEN接口的访问，因此，我们必须定义独立的TOKEN中控服务，并将服务器IP地址添加到白名单中，而我们自己的APP则通过中控服务进行TOKEN的中转访问。

中控服务应完成以appID和appSecret获得token的能力，访问规范如下：

中控服务为我们的APP暴露API访问接口，VUE前端则通过API接口访问该API，格式如下：

通过如此处理，对微信API的安全访问则由我们自己的安全框架接管，其它的微信公众号API，我们只需用我们从中控服务获得的TOKEN正常访问即可。

#02：上传图片

上传图片是为了图文消息正文里的图片提供链接，这里注意微信图文有两种方式：一是自己设计图文、二是直接放一个外部链接。我们是按照自己设计图文的方式进行操作的，如果是后者，则可以理解为建立微站点，在这里不讨论。

微信公众号API提供的发图接口规约如下图，这里很简单，直接做一下API封装即可，注意预留token的传参。

我写的API如下，注意，这里做了一个FormData的构建，解决什么问题呢？因为平台文章统一用了我们平台后端的文件管理服务，这些外网的图片链接，微信图文是不识别的，直接被过滤掉了，所以，这里我做了一下将其转化为文件流的操作，并按微信公众号API要求通过FormData上传，使其转化为微信素材，这样就完成了图片源的平迁。当然了，这个事也可以在后端完成，看自己需要吧。这个API返回一个url，可以用在文章正文里面，不再赘述，大家懂得。

注意，这里有一个media.append('media',file),这里一定要乖乖地写成media，否则接口不认，开始的时候我写成file，调了半天错才注意到。

#03：上传缩略图

缩略图则是为图文链接上提供一个小缩略图，照我同事的话讲，这个缩略图虽小但体现专业性，而且，微信公众号API上设定这个图文的thumb_media_id为必填。

在图文设计时，封面在这里指定

图文发布后，文章链接的缩略图

微信API接口规范的设计规约如下：

同样的，我这里设计了一个图片url转文件流的上传方式。

这个API返回media_id和url两个字段，规约如下图所示：

其它类型我尚未涉及，如果是视频、音频，都是通过这个API上传，但需要做特定的API交互，这里注意一下。

#03：上传图文

上传图文我们这里分为两步，先进草稿箱，然后发布或群发，因为群发我们这里会设计一个后台调度，见发送队列进行处理，所以暂时不讨论了，后面再补，今天我们讨论直接发布的情况，因此，这里涉及两个API，发草稿和发布图文，微信公众号API规约如下：

新建草稿请求参数说明

参数	必须	说明
title	是	标题
author	否	作者
digest	否	图文消息的摘要，仅有单图文消息才有摘要，多图文此处为空。如果本字段为没有填写，则默认抓取正文前54个字。
content	是	图文消息的具体内容，支持 HTML 标签，必须少于2万字符，小于1M，且此处会去除 JS ,涉及图片 url 必须来源 "上传图文消息内的图片获取URL"接口获取。外部图片 url 将被过滤。
content_source_url	否	图文消息的原文地址，即点击“阅读原文”后的URL
thumb_media_id	是	图文消息的封面图片素材id（必须是永久MediaID）
need_open_comment	否	Uint32 是否打开评论，0不打开(默认)，1打开
only_fans_can_comment	否	Uint32 是否粉丝才可评论，0所有人可评论(默认)，1粉丝才可评论

新建草稿接口返回说明

{ "media_id":MEDIA_ID }

返回参数说明

参数	描述
media_id	上传后的获取标志，长度不固定，但不会超过 128 字符

以下是发布接口规范：

请求参数说明

参数	是否必须	说明
access_token	是	调用接口凭证
media_id	是	要发布的草稿的media_id

返回示例

{ "errcode":0, "errmsg":"ok", "publish_id":"100000001", }

返回参数说明

参数	说明
errcode	错误码
errmsg	错误信息
publish_id	发布任务的id
msg_data_id	消息的数据ID

文章发布后有审核环节，因此调用该API后并不一定预示着图文发布成功了。这里可以用以下API进行状态轮询：

图文的状态码设置如下：0:成功, 1:发布中，2:原创失败, 3: 常规失败, 4:平台审核不通过, 5:成功后用户删除所有文章, 6: 成功后系统封禁所有文章。

还有一个坑折腾了半天，就是上传图片等用的是循环内嵌套异步，引入了Promise.all函数，比较好用，后面有类似循环 异步还要遵从执行顺序的问题，可以试试看。

结束语

内容不难，只要注意一下整体流程的执行步骤和一些文件上传细节就能操作成功，大家在实操中如果有什么问题，欢迎和我交流。今天有个小开心的事是破千粉了，头条君开了图文赞赏功能，所以如果文章感觉有帮助，可以不吝打赏一下，如需源码，关注后私信。

#创作挑战赛#

,