H5 -- 自定義微信分享第三方頁面鏈接的標題和小縮略圖

需求:自定義微信分享第三方頁面鏈接的標題和小縮略圖(如圖)


2018.6.4更新線 - - - - - - - - - - - - - - - - - -
更新:微信6.5.5版本以後調整了分享規則,針對的是沒有接入公衆號的網頁分享,必須接入微信認證公衆號!
查了下微信公衆平臺,以下做法只能在微信收藏內及收藏中長按‘轉發’時能生成縮略圖;而頁面內的‘發送給朋友’及‘分享到朋友圈’分享功能均失效了。。給各位博友帶來誤解,說聲抱歉。。
正確做法


微信分享第三方頁面鏈接

1、標題(上圖中紅色框內文字)
  • 生成標準:自動獲取當前頁面的標題,即title裏面的內容
  • 自定義方法:設置頁面標題即可,可使用:document.title = “標題內容”,動態設置。
2、小縮略圖(上圖中紅色箭頭所指圖片)
  • 生成標準(以下標準來自微信公衆平臺)
  • 微信默認標準
    注:若頁面中沒有此標準的圖片,則會顯示箭頭1處的無圖樣式。
  • 自定義方法在body標籤內的最前面放入一張寬度爲屏幕寬度80%的正方形img 。(如果不想顯示可將其隱藏,微信仍能提出來作小縮略圖)
<body>
	<!--此圖片必須放在body標籤的最前面,且高度必須爲屏幕寬度的80%  -->
	<img src="你想要的小縮略圖的路徑" style="position:absolute; top:0; left:0;  width: 80%; z-index:-1;opacity: 0; ">

	<!-- 此處放其他元素 -->
	
</body>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章