基于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 相关文章推荐
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
JavaScript实现与web通信的方法详解
Aug 07 Javascript
js实现随机圆与矩形功能
Oct 29 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中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
php计算税后工资的方法
2015/07/28 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
JS字符串函数扩展代码
2011/09/13 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
python类继承用法实例分析
2014/10/10 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
python中adb有什么功能
2020/06/07 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
六五普法宣传标语
2014/10/06 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript