基于js实现微信发送好友如何分享到朋友圈、微博


Posted in Javascript onNovember 30, 2015

微信浏览器内置了javascript私有对象WeixinJSBridge,可以实现发送给朋友、分享到朋友圈、分享到微博等功能。

<script>
  var imgUrl = "图片地址";
  var lineLink = "当前网址";
  var descContent = "描述";
  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>

在微信公众平台前端网页上添加分享到朋友圈,关注微信等按钮

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

微信内嵌浏览器

通过 Mac 远程调试 iPhone 上微信自己的网页,我们可以发现微信内嵌浏览器定义了一个私有 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 添加成功
 if(e.err_msg == 'add_contact:added' || e.err_msg == 'add_contact:ok'){
  //关注成功,或者已经关注过
 }
 })
}
Javascript 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
js实现漫天星星效果
Jan 19 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
iview table render集成switch开关的实例
Mar 14 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 #Javascript
javascript中eval和with用法实例总结
Nov 30 #Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 #Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 #Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 #Javascript
Bootstrap每天必学之js插件
Nov 30 #Javascript
Bootstrap每天必学之面板
Nov 30 #Javascript
You might like
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
php中final关键字用法分析
2016/12/07 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
php微信开发之图片回复功能
2018/06/14 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
Javascript 去除数组的重复元素
2010/05/04 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
Python实现包含min函数的栈
2016/04/29 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
大学生求职自我评价
2014/01/16 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
股份合作协议书范本
2014/04/14 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
计算机网络专业求职信
2014/06/05 职场文书
教师节慰问信
2015/02/15 职场文书
教师研修随笔感言
2015/11/18 职场文书
开网店计划分析
2019/07/30 职场文书