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

所属分类: 网络编程 / JavaScript 阅读数: 910
收藏 0 赞 0 分享

微信浏览器内置了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 this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多