vue 分享给好友 点击分享按钮_点击网页分享按钮,触发微信分享功能
微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享到朋友圈,关注微信号等按钮。
我们可以发现微信内嵌浏览器定义了一个私有 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"
});
}
}
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);
vue 分享给好友 点击分享按钮_点击网页分享按钮,触发微信分享功能相关推荐
- 解决方案:h5网页外部浏览器唤起微信分享,唤起微信面板,分享朋友圈方案,兼容大部分浏览器
h5网页外部浏览器唤起微信分享,唤起微信面板,分享朋友圈方案,兼容大部分浏览器 需求是点击分享按钮,直接唤起微信,发送给好有或者朋友圈.这个需求并不好完成,因为微信并没有对h5网页开放api,但是每个 ...
- 点击网页分享按钮,触发微信分享功能
微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享 ...
- php 点击按钮触发微信分享,微信自定义分享-PHP
一:首先在公众号管理后台"公众号设置"的"功能设置"里填写JS接口安全域名 二:在需要调用JS接口的页面引入微信JSSDK的JS文件:http://res.wx ...
- 微信公众号,微信网页链接,隐藏微信分享按钮的链接
1.界面操作 (1)隐藏右上角菜单接口 wx.hideOptionMenu(); (2)显示右上角菜单接口 wx.showOptionMenu(); (3)关闭当前网页窗口接口 wx.closeWin ...
- html5网页分享到朋友圈,微信公众平台网页开发实战--1.微信分享一个网页到朋友圈...
对微信的JSSDK进行封装一下,创建一份类似的文件结构,增加index.html与shareApi.js文件,结构如图3.3所示. 图3.3 3.2节文件结构 另外,提醒读者一下,wxJSSDK.j ...
- 高德地图去掉定位按钮_高德地图自定义定位按钮及点击事件
最近使用了一下高德地图,使用期间将出现的问题记录一下.文中出现不对的地方,悉听各路大神指正.2018年11月23日15:59:46 1.首先我们初始化map控制对象aMap .if (aMap ==n ...
- python创建按钮_掌握Python之Tkinter按钮组件的创建及使用
不学python功能按钮肯定是不完整的啊,尤其是在使用python过程中,大量需要使用的tkinter,要怎么利用这个模块去创建个功能键呢?一起来看下吧~ 使用tkinter.Tk() 生成主窗口(r ...
- java 自定义形状按钮_制作自定义背景Button按钮、自定义形状Button的全攻略
在Android开发应用中,默认的Button是由系统渲染和管理大小的.而我们看到的成功的移动应用,都是有着酷炫的外观和使用体验的.因此,我们在开发产品的时候,需要对默认按钮进行美化.在本篇里,笔者结 ...
- java swt 画按钮_向表中添加按钮(java swt)
我正在尝试复制类似于此的UI: 我一直在关注如何创建表格每列中的按钮的作者说明(没有成功).我的项目与他的区别在于我正在尝试使用Tree而不是Table,而我正在使用eclipse TreeViewe ...
最新文章
- 2162112375 Week04-面向对象设计与继承
- AdapterView及其子类之二:使用ListActivity及ArrayAdapter创建列表
- Minor GC,Major GC,Full GC -- hotspot VM GC讲解
- java内存模型按照线程隔离性_深入理解Java多线程与并发框(第③篇)——Java内存模型与原子性、可见性、有序性...
- 【英语学习】【WOTD】abecedarian 释义/词源/示例
- expect实现配置机器信任关系
- nginx是否存在文件类型解析漏洞(转)
- C# 编程指南-事件
- springmvc应用-自定义参数解析器
- Linux系统下安装flash player插件
- 基于Simulink模型的嵌入式代码生成与实际工程应用
- Altium Designer 总结
- 上海精神卫生中心怎么样 (徐汇区)
- 龙贝格求积分算法例题_数值分析实习作业之龙贝格求积
- 【数据库】MySQL
- 根据手机指南针经纬度在地图上找到其位置
- 计算机基础知识图谱,基于知识图谱的大学计算机基础习题推荐方法技术
- 他们为国效力40年,不如Angelababy发呆1天
- 通过USB VID和PID卸载USB设备
- QMS系统客户端自动化测试流程图
热门文章
- [ 网络协议篇 ] IGP 详解之 OSPF 详解(三)--- OSPF协议报文 链路状态通告 详解
- vi使用的时候按esc后按**shift + :**时进入不了末行
- 单片机c语言中断意义,51单片机中断系统的重要性
- POJ - 1625 Censored!(AC自动机+dp+高精度运算)
- window下xmind-pro-8破解版
- 嵌入式和java工资对比_嵌入式和java哪个前景好
- loT行业生死竞速:Aqara绿米得用户得天下
- Thinkphp5 谷歌验证
- C语言---简单五子棋小游戏
- 安卓手机微信怎么恢复聊天记录?方法简单轻松搞定