最近公司在开发移动互联的时候,要求网页上分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?能不能实现?今天就给你们讲解下能不能在微信公众平台前端网页上添加分享到朋友圈,关注微信号等按钮。前端
查阅了不少资料,都是提到在微信内嵌浏览器定义了一个私有 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>
将其人为“隐藏”便可。
开发这个不难,就不贴图了,可是第一次接触这个,走了不少弯路, “老是没想到”但愿本身之后,一边走,一边成长吧,写得很差,见笑了。