最近公司在开发移动互联的时候,要求网页上分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?能不能实现?今天就给大家讲解下能不能在微信公众平台前端网页上添加分享到朋友圈,关注微信号等按钮。
查阅了很多资料,都是提到在微信内嵌浏览器定义了一个私有 JavaScript 对象:WeixinJSBridge,通过操作这个对象的相关方法可以实现分享到微信朋友圈,和判断一个微信号的关注状态以及实现关注指定微信号等功能。
于是开始尝试。。。
变量如下:
var contentModel = { "img_url": "images/2.jpg", "title": "第11届浙江家博会", "src": "4月10-12日,和平会展中心!" };
1、分享到朋友圈
function weixinShareTimeline(title,desc,link,imgUrl){ WeixinJSBridge.invoke(‘shareTimeline’,{ ‘img_url’:imgUrl,//微信分享时候出现的小图片 //”img_width”:’64’, //”img_height”:’64’, “link”:link,//链接 “desc”: desc,//详细描述 “title”:title //简要描述 }); }
2、分享给好友
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 }); }
继而,在网页中使用
<a href=’javacript:void(0)’ onclick=’ weixinShareTimeline(title,desc,link,imgUrl)’>分享到朋友圈</a> <a href=’javacript:void(0)’ onclick=’ weixinSendAppMessage (title,desc,link,imgUrl)’>分享给好友</a>
经过测试后,发现该方法不可用。微信公众接口已关闭。
那么,只有选择微信自带的分享工具了。
3、将网址生成二维码
生成的二维码官网:草料二维码生成器http://cli.im/
利用微信扫一扫功能,即可访问该站。那分享或者发送给好友的时候,小图标和title 如何读取呢?
莫急,微信自带的分享的时候,会默认读取网页中的title和网站中出现的第一张图片,不包括logo,切记不包括logo,也不包括背景图片。那么问题来了,若第一张图片不能占用网页的文档流如何处理呢,很多人想到,是将第一张图片属性设置(display:none;),但是在分享的时候,img_url 只预留图片位置,也不显示图片,最好的办法,就是在第一张图片设置为:
<img src=’img_url.jpg’ width=0 height:0>
将其人为“隐藏”即可。
开发这个不难,就不贴图了,但是第一次接触这个,走了很多弯路, “总是没想到”希望自己以后,一边走,一边成长吧,写得不好,见笑了。