基于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 相关文章推荐
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
angular.bind使用心得
Oct 26 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
js实现简易计算器功能
Oct 18 Javascript
微信小程序点击滚动到指定位置的实现
May 22 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
JS高级运动实例分析
2016/12/20 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
python中添加模块导入路径的方法
2021/02/03 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
英文版银行求职信
2013/10/09 职场文书
创业计划书的主要内容有哪些
2014/01/29 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
公司活动方案范文
2014/03/06 职场文书
销售内勤岗位职责
2014/04/15 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
感恩教育主题班会
2015/08/12 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
Go语言设计模式之结构型模式
2021/06/22 Golang