点击网页分享按钮,触发微信分享功能

微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享到朋友圈,关注微信号等按钮。

我们可以发现微信内嵌浏览器定义了一个私有 JavaScript 对象:WeixinJSBridge,通过操作这个对象的相关方法可以实现分享到微信朋友圈,和判断一个微信号的关注状态以及实现关注指定微信号等功能。

分享到朋友圈

function weixinShareTimeline(title,desc,link,imgUrl){
	WeixinJSBridge.invoke('shareTimeline',{
		"img_url":imgUrl,
		//"img_width":"640",
		//"img_height":"640",
		"link":link,
		"desc": desc,
		"title":title
	});	
}

发送给好友

function weixinSendAppMessage(title,desc,link,imgUrl){
	WeixinJSBridge.invoke('sendAppMessage',{
	//"appid":appId,
	"img_url":imgUrl,
	//"img_width":"640",
	//"img_height":"640",
	"link":link,
	"desc":desc,
	"title":title
	});
}

分享到腾讯微博

function weixinShareWeibo(title,link){
	WeixinJSBridge.invoke('shareWeibo',{
		"content":title + link,
		"url":link
	});
}

关注指定的微信号

function weixinAddContact(name){
	WeixinJSBridge.invoke("addContact", {webtype: "1",username: name}, function(e) {
		WeixinJSBridge.log(e.err_msg);
		//e.err_msg:add_contact:added 已经添加
		//e.err_msg:add_contact:cancel 取消添加
		//e.err_msg:add_contact:ok 添加成功
        //WeixinJSBridge.log(d.err_msg);
		if(e.err_msg == 'add_contact:added' || e.err_msg == 'add_contact:ok'){
		    //关注成功,或者已经关注过
		}

	})
}


function WeiXinShareBtn() {
if (typeof WeixinJSBridge == "undefined") {
alert(" 请先通过微信搜索 wow36kr 添加36氪为好友,通过微信分享文章 :) ");
} else {
WeixinJSBridge.invoke(‘shareTimeline‘, {
"title": "36氪",
"link": "http://www.36kr.com",
"desc": " 关注互联网创业 ",
"img_url": "http://www.36kr.com/assets/images/apple-touch-icon.png"
});
}
}

 

<script>
var imgUrl = "图片地址";
var lineLink = "网址";
var descContent = '爱在五月,\n\n妈咪爱1+1亲子健康之旅开启全国行首站----重庆站妈咪爱活性益生菌';
var shareTitle = '标题';
var appid = '';

function shareFriend() {
WeixinJSBridge.invoke('sendAppMessage',{
"appid": appid,
"img_url": imgUrl,
"img_width": "200",
"img_height": "200",
"link": lineLink,
"desc": descContent,
"title": shareTitle
}, function(res) {
//_report('send_msg', res.err_msg);
})
}
function shareTimeline() {
WeixinJSBridge.invoke('shareTimeline',{
"img_url": imgUrl,
"img_width": "200",
"img_height": "200",
"link": lineLink,
"desc": descContent,
"title": shareTitle
}, function(res) {
//_report('timeline', res.err_msg);
});
}
function shareWeibo() {
WeixinJSBridge.invoke('shareWeibo',{
"content": descContent,
"url": lineLink,
}, function(res) {
//_report('weibo', res.err_msg);
});
}
// 当微信内置浏览器完成内部初始化后会触发WeixinJSBridgeReady事件。
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
// 发送给好友
WeixinJSBridge.on('menu:share:appmessage', function(argv){
shareFriend();
});
// 分享到朋友圈
WeixinJSBridge.on('menu:share:timeline', function(argv){
shareTimeline();
});
// 分享到微博
WeixinJSBridge.on('menu:share:weibo', function(argv){
shareWeibo();
});
}, false);
</script>

posted on   大西瓜3721  阅读(2469)  评论(0编辑  收藏  举报

编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)
历史上的今天:
2015-08-05 理解SVG坐标系统和变换: transform属性

导航

点击右上角即可分享
微信分享提示