tft每日頭條

 > 圖文

 > vue設置微信小程序分享标題

vue設置微信小程序分享标題

圖文 更新时间:2025-08-13 12:56:53

因為流量經濟的特殊地位,現在很多内容平台會實現和微信公衆号的對接,以實現文章向訂閱号/服務号的實時推送,今天做了一下測試,遇到不少坑,這裡把避坑要點記一下,希望遇到類似情況的朋友可以少走彎路。

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)1

咱們不要在同一個坑裡跌倒

如下圖,我們經常用到的典型場景:文章我們在平台裡寫好後,選擇我們管理的訂閱号,點擊推送後,文章推送到訂閱号裡發布,發布包括普通發布和群發。

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)2

平台中文章的發布入口設計

發布是公衆号内容發表形式的一種,不同于群發,發布的内容不會通過推送消息觸達給關注的粉絲,也不會占用群發的次數,每天可以發布多篇内容。而公衆号群發,如果是訂閱号,每天隻能發送一次;如果是服務号,每周隻能發送一次。

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)3

發布後可以在微信公衆号管理後台查看

準備操作

在開始之前,我們假定以下内容處于就緒狀态:

  • 微信認證已完成,已經獲得訪問微信API的權限(完成認證要花300個大洋)
  • Token中控服務器已就緒(如果不明白怎麼設置,可留言)
圖文消息的内容準備

對于微信訂閱号或者服務号而言,一個典型的圖文消息,結構是這個樣子的:

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)4

因此,我們的文章需要按上述結構組織業務對象,和該業務結構一一對應即可。接下來,我們看一下微信公衆号的組織方式,在簡單發布場景,我們用到素材庫、草稿箱、發布記錄三部分内容。

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)5

  • 素材庫:提供頁面所需要的圖片、縮略圖等素材,這裡注意一下,因為我們發布的文章中,内嵌圖片一般是我們自己的内容後台提供的,微信這裡不予識别,所以,涉及的圖片引用,要做一下圖源平遷
  • 草稿箱:用以暫存我們編輯的文章,它為我們進入發布和群發狀态提供操作緩沖
  • 發布記錄:發布或群發的消息進入該頁面進行管理

這裡有一點需要注意,就是文章縮略圖,圖文消息裡面通過thumb_media_id記錄一個id值,該縮略圖存在上文提及的素材庫中,并在上傳素材後獲得該ID,并賦予上文列示的圖文結構中

實現步驟

#01:TOKEN中控服務器的實現

微信公衆号需要通過白名單的方式限制TOKEN接口的訪問,因此,我們必須定義獨立的TOKEN中控服務,并将服務器IP地址添加到白名單中,而我們自己的APP則通過中控服務進行TOKEN的中轉訪問。

中控服務應完成以appID和appSecret獲得token的能力,訪問規範如下:

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)6

中控服務為我們的APP暴露API訪問接口,VUE前端則通過API接口訪問該API,格式如下:

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)7

通過如此處理,對微信API的安全訪問則由我們自己的安全框架接管,其它的微信公衆号API,我們隻需用我們從中控服務獲得的TOKEN正常訪問即可。

#02:上傳圖片

上傳圖片是為了圖文消息正文裡的圖片提供鍊接,這裡注意微信圖文有兩種方式:一是自己設計圖文、二是直接放一個外部鍊接。我們是按照自己設計圖文的方式進行操作的,如果是後者,則可以理解為建立微站點,在這裡不讨論。

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)8

微信公衆号API提供的發圖接口規約如下圖,這裡很簡單,直接做一下API封裝即可,注意預留token的傳參。

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)9

我寫的API如下,注意,這裡做了一個FormData的構建,解決什麼問題呢?因為平台文章統一用了我們平台後端的文件管理服務,這些外網的圖片鍊接,微信圖文是不識别的,直接被過濾掉了,所以,這裡我做了一下将其轉化為文件流的操作,并按微信公衆号API要求通過FormData上傳,使其轉化為微信素材,這樣就完成了圖片源的平遷。當然了,這個事也可以在後端完成,看自己需要吧。這個API返回一個url,可以用在文章正文裡面,不再贅述,大家懂得。

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)10

注意,這裡有一個media.append('media',file),這裡一定要乖乖地寫成media,否則接口不認,開始的時候我寫成file,調了半天錯才注意到。

#03:上傳縮略圖

縮略圖則是為圖文鍊接上提供一個小縮略圖,照我同事的話講,這個縮略圖雖小但體現專業性,而且,微信公衆号API上設定這個圖文的thumb_media_id為必填。

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)11

在圖文設計時,封面在這裡指定

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)12

圖文發布後,文章鍊接的縮略圖

微信API接口規範的設計規約如下:

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)13

同樣的,我這裡設計了一個圖片url轉文件流的上傳方式。

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)14

這個API返回media_id和url兩個字段,規約如下圖所示:

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)15

其它類型我尚未涉及,如果是視頻、音頻,都是通過這個API上傳,但需要做特定的API交互,這裡注意一下。

#03:上傳圖文

上傳圖文我們這裡分為兩步,先進草稿箱,然後發布或群發,因為群發我們這裡會設計一個後台調度,見發送隊列進行處理,所以暫時不讨論了,後面再補,今天我們讨論直接發布的情況,因此,這裡涉及兩個API,發草稿和發布圖文,微信公衆号API規約如下:

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)16

新建草稿請求參數說明

參數

必須

說明

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 字符

以下是發布接口規範:

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)17

請求參數說明

參數

是否必須

說明

access_token

調用接口憑證

media_id

要發布的草稿的media_id

返回示例

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

返回參數說明

參數

說明

errcode

錯誤碼

errmsg

錯誤信息

publish_id

發布任務的id

msg_data_id

消息的數據ID

文章發布後有審核環節,因此調用該API後并不一定預示着圖文發布成功了。這裡可以用以下API進行狀态輪詢:

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)18

圖文的狀态碼設置如下:0:成功, 1:發布中,2:原創失敗, 3: 常規失敗, 4:平台審核不通過, 5:成功後用戶删除所有文章, 6: 成功後系統封禁所有文章。

還有一個坑折騰了半天,就是上傳圖片等用的是循環内嵌套異步,引入了Promise.all函數,比較好用,後面有類似循環 異步還要遵從執行順序的問題,可以試試看。

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)19

結束語

内容不難,隻要注意一下整體流程的執行步驟和一些文件上傳細節就能操作成功,大家在實操中如果有什麼問題,歡迎和我交流。今天有個小開心的事是破千粉了,頭條君開了圖文贊賞功能,所以如果文章感覺有幫助,可以不吝打賞一下,如需源碼,關注後私信。

vue設置微信小程序分享标題(通過微信公衆号API實現圖文消息的自動推送)20

#頭條創作挑戰賽#

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved