H5網頁如何在微信中自定義分享連接(可設置標題+簡介+圖片)

自定義分享連接是什麼?

自定義微信分享連接是指將一條網頁連接經過微信接口生成一張卡片,而且該卡片的標題,內容和圖片均可以本身編輯。以下圖效果javascript

 

● 自定義網頁連接示例(帶標題,內容簡介,縮略圖)java

● 未自定義的網頁連接api

 

 

如上圖,若是不作相關處理,頁面進行二次分享,用戶看到的要麼就是連接,要麼就是沒有內容介紹+空圖,上面顯示的文案其實是獲取的title標籤中的文案,我在網上查的相關例子有說明,圖片若是不設置,將會自動獲取瀏覽器渲染的第一張圖片,通過我的測試,並無實現(朋友圈同理,不作圖片展現)。瀏覽器

 

解決方案

要達到上圖自定義文案與圖標的效果,必需要採用微信提供的JS-SDK,微信JS-SDK是微信公衆平臺面向網頁開發者提供的基於微信內的網頁開發工具包。可參考微信JS-SDK說明文檔。(若是你不懂技術或者沒有認證的公衆號,使用wecard工具也能夠實現相關的效果。)安全

具體步驟以下:

一、準備一個備案的域名和空間,綁定域名到該空間去微信

二、登陸微信公衆平臺,進入「公衆號設置」的功能設置裏面填寫js接口安全域名,這個是要填寫的是你微信瀏覽器要打開的域名地址,不能添加IP地址。app

三、引入js文件,在須要調用js接口的頁面接入JS文件。微信公衆平臺

http://res.wx.qq.com/open/js/jweixin-1.2.0.js

  

四、經過config接口注入權限並驗證配置(這一步算是整個步驟中最關鍵的一步,必須正確的配置信息才能夠進行調用JS-SDK。工具

wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來,若要查看傳入的參數,能夠在pc端打開,參數信息會經過log打出,僅在pc端時纔會打印。
    appId: '', // 必填,公衆號的惟一標識
    timestamp: , // 必填,生成簽名的時間戳
    nonceStr: '', // 必填,生成簽名的隨機串
    signature: '',// 必填,簽名,見附錄1
    jsApiList: [] // 必填,須要使用的JS接口列表,全部JS接口列表見附錄2
});
相關文章
相關標籤/搜索