最近公司在開發移動互聯的時候,要求網頁上分享到朋友圈,關注微信等按鈕,點擊它們都會彈出一個窗口讓你分享和關注,這個是怎麼實現的呢?能不能實現?今天就給你們講解下能不能在微信公衆平臺前端網頁上添加分享到朋友圈,關注微信號等按鈕。前端
查閱了不少資料,都是提到在微信內嵌瀏覽器定義了一個私有 JavaScript 對象:WeixinJSBridge,經過操做這個對象的相關方法能夠實現分享到微信朋友圈,和判斷一個微信號的關注狀態以及實現關注指定微信號等功能。java
因而開始嘗試。。。瀏覽器
變量以下:微信
var contentModel = { "img_url": "images/2.jpg", "title": "第11屆浙江家博會", "src": "4月10-12日,和平會展中心!" };
function weixinShareTimeline(title,desc,link,imgUrl){ WeixinJSBridge.invoke(‘shareTimeline’,{ ‘img_url’:imgUrl,//微信分享時候出現的小圖片 //」img_width」:’64’, //」img_height」:’64’, 「link」:link,//連接 「desc」: desc,//詳細描述 「title」:title //簡要描述 }); }
function weixinSendAppMessage(title,desc,link,imgUrl){ WeixinJSBridge.invoke("sendAppMessage",{ //」appid」:appId,//能夠爲空 "img_url":imgUrl, //」img_width」:」64″, //」img_height」:」64″, "link":link, "desc":desc, "title":title }); }
繼而,在網頁中使用app
<a href=’javacript:void(0)’ onclick=’ weixinShareTimeline(title,desc,link,imgUrl)’>分享到朋友圈</a> <a href=’javacript:void(0)’ onclick=’ weixinSendAppMessage (title,desc,link,imgUrl)’>分享給好友</a>
通過測試後,發現該方法不可用。微信公衆接口已關閉。微信公衆平臺
那麼,只有選擇微信自帶的分享工具了。工具
如:http://alplcx.sinaapp.com/測試
生成的二維碼官網:草料二維碼生成器http://cli.im/網站
利用微信掃一掃功能,便可訪問該站。那分享或者發送給好友的時候,小圖標和title 如何讀取呢?url
莫急,微信自帶的分享的時候,會默認讀取網頁中的title和網站中出現的第一張圖片,不包括logo,切記不包括logo,也不包括背景圖片。那麼問題來了,若第一張圖片不能佔用網頁的文檔流如何處理呢,不少人想到,是將第一張圖片屬性設置(display:none;),可是在分享的時候,img_url 只預留圖片位置,也不顯示圖片,最好的辦法,就是在第一張圖片設置爲:
<img src=’img_url.jpg’ width=0 height:0>
將其人爲「隱藏」便可。
開發這個不難,就不貼圖了,可是第一次接觸這個,走了不少彎路, 「老是沒想到」但願本身之後,一邊走,一邊成長吧,寫得很差,見笑了。