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

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

我们可以发现微信内嵌浏览器定义了一个私有 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>

时间: 2024-12-14 05:53:56

点击网页分享按钮,触发微信分享功能的相关文章

UC和QQ两个主流浏览器 * 点击触发微信分享到朋友圈或发送给朋友的功能(转载)

转载(声明:仅供学习使用) /** * 此插件主要作用是在UC和QQ两个主流浏览器 * 上面触发微信分享到朋友圈或发送给朋友的功能 * 代码编写过程中 参考: * http://mjs.sinaimg.cn/wap/module/share/201501261608/js/addShare.js * 此外,JefferyWang的项目对我也有一定启示: * https://github.com/JefferyWang/nativeShare.js * * @revisor [email prot

JavaScript点击事件/一个按钮触发另一个按钮

给按钮2添加点击事件click触发按钮1的点击事件,就算给按钮1添加样式display: none;或visibility: hidden;隐藏起来也能触发. <button type="button" id="btn1" onclick="alert('我是按钮1的弹框')" >按钮1</button> <button type="button" id="btn2">按

【Android 分享】ShareSDK微信分享详解

目前市面上大大小小的软件,几乎都支持分享的功能,前几天在做的项目中也有此功能,使用的ShareSDK来实现的微信分享功能,下面就跟着我来一步步实现微信分享吧! ShareSDK介绍:ShareSDK官网,Mob移动开发者服务平台,为全球移动开发者提供社会化分享SDK.手游视频录像SDK.免费手机短信验证码SDK,BigApp掌上社区等服务. 1.在ShareSDK注册个账户,进入创建应用的界面: 点击创建应用按钮 2.输入自己的应用名称,选择开发平台(以Android为例) 3.点击确定,进入后

关于最近微信出的新规定,防止诱导性分享!导致大家微信分享的标题备注都不能设置了.现在有了新的解决办法,我来共享下!

微信的回复是这样的:旧版的获取分享状态及设置分享内容的JS接口一直用于内部业务,并未对外开放,在微信公开的开放文档里面并没有此接口.某些第三方借助微信客户端漏洞在未获得权限的情况下使用接口,微信6.0.2版本对此漏洞做了修复以确保用户分享内容的准确性,避免诱导分享.另外,此接口不久将会公布开放规则向公众号开放. 后来看到了:https://github.com/zxlie/WeixinApi 里面作者在不久前已经解决了这个问题,完美兼容版本! 大家直接点击链接进入,下载最新的DEMO就行了!

微信分享技巧、微信分享简单化、微信分享配置技巧

当前项目使用的是SpringMVC.JSP解析器 这里假定大家都用过微信分享了,所以具体使用细节就不讲解了,只分享如何快速.简洁的完成微信分享配置 一.微信分享常规的流程 比如分享一个 index.do 页面,一般步骤 1.写一个公共方法,用来生成微信分享配置参数. /** * 微信分享所需参数 */ public static Map<String, Object> getWeixinShareParams(String ticket, String appid, String url) {

微信公众平台网页开发实战--1.微信分享一个网页到朋友圈

对微信的JSSDK进行封装一下,创建一份类似的文件结构,增加index.html与shareApi.js文件,结构如图3.3所示. 图3.3  3.2节文件结构 另外,提醒读者一下,wxJSSDK.js文件的JSSDK环境配置中,需要更改一下配置参数,代码如下: 01 jsApiList: [ // 其他代码略 02 "onMenuShareTimeline", 03 "onMenuShareAppMessage", 04 "onMenuShareQQ&q

iOS 利用运行时交换系统方法实现禁止同时点击两个按钮触发多个事件

#import "UIViewController+Parents.h" /** 导入头文件 */ #import <objc/runtime.h> @implementation UIViewController (Parents) //load方法会在类第一次加载的时候被调用 //调用的时间比较靠前,适合在这个方法里做方法交换 + (void)load{ //方法交换应该被保证,在程序中只会执行一次 static dispatch_once_t onceToken; d

微信分享操作点滴

关于微信分享的几个使用场景: 微信应用内 1)在订阅号或者服务号只能把信息转发到好友列表(不能直接转发到朋友圈!!!) 2)通过微信自带浏览器查看信息能分享到朋友或者分享到朋友圈,如下图,用户能自定义输入(以下都是微信app自带的功能) 如下链接就是微信产看到的页面(看域名可猜测到是通过<微信公众平台>发布出来的图文推送) [http://mp.weixin.qq.com/s?__biz=MjM5NDAwMDk4MA==&mid=208651629&idx=1&sn=d

云展网教程 | 工具栏上的社交分享按钮使用说明

云展网电子杂志支持社交分享功能,如果您允许使用这个功能,那么读者在线阅读您制作的翻页电子书的时候,就可以一键点击分享翻页电子书到微博/微信/QQ空间等社交分享平台,实现友好互动以及获得更多的读者用户群. 读者分享杂志的时候,他当前翻开的是哪一页(比如他当前翻开的是第10页),分享出去的书本再被其他人打开时,翻开的就是那一页(就是第10页). 这个朋友分享功能,还带有二维码,读者在电脑上看到您制作的翻页电子书时,可以点击"朋友分享"按钮,就会见到这本书的二维码,用手机微信扫描,即可在手机