基于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 相关文章推荐
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
JS异步错误捕获的一些事小结
Apr 26 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 采集程序中常用的函数
2009/12/09 PHP
php eval函数用法总结
2012/10/31 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
php如何获取Http请求
2020/04/30 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
PHP如何自定义函数
2016/09/16 面试题
社区学雷锋活动策划方案
2014/01/30 职场文书
连带责任保证书
2014/04/29 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
公司委托书范本5篇
2014/09/20 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
中学推普周活动总结
2015/05/07 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js