vue中进行微博分享的实例讲解


Posted in Javascript onOctober 14, 2019

1、首先要在页面写出点击可进行微博分享的入口,样式因自己项目而定:

<li class="bottomIcon_5 shareSina"><a href="javascript:;" rel="external nofollow" target="_blank"></a><div class="shareTxt">微博</div></li>

2、其次,对微博按钮进行点击事件,也就是最重要的进行微博分享的操作:

// 微博分享
      $('.shareSina').on('click', function () {
        window.sharetitle = $(".print-tit").html();//分享的标题
        window.shareUrl = $(".myShare img").attr('src');//分享显示的图片
        share();
      })
      function share() {
        (function(s, d, e) {
          try {} catch (e) {}
          var f = 'http://v.t.sina.com.cn/share/share.php?',
            u = window.location.href,
            p = ['url=', e(u), '&title=分享的名称', '&pic=', e(window.shareUrl)].join('');
      
          function a() {
            if (!window.open([f, p].join(''), 'mb', ['toolbar=0,status=0,resizable=1,width=620,height=450,left=', (s.width - 620) / 2, ',top=', (s.height - 450) / 2].join(''))) u.href = [f, p].join('');
          };
          if (/Firefox/.test(navigator.userAgent)) { setTimeout(a, 0) } else { a() }
        })(screen, document, encodeURIComponent);
      }

点击后会出现一个新弹窗的页面,页面内含有你要分享的图片及网站的名称、详情等,页面会跳转到新浪微博,如果你已经登录微博,那么会直接分享成功,如果没有登陆,会跳转到登录页面,登陆后直接分享成功。

3、这样微博就分享成功了!

以上就是本次介绍的全部知识点内容,感谢大家的学习和对三水点靠木的支持。

Javascript 相关文章推荐
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 #Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 #Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 #Javascript
vue的路由映射问题及解决方案
Oct 14 #Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 #Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 #Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 #Javascript
You might like
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
vue实现计步器功能
2019/11/01 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
全面解读Python Web开发框架Django
2014/06/30 Python
跟老齐学Python之数据类型总结
2014/09/24 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
公司领导推荐信
2013/11/12 职场文书
企业文化建设实施方案
2014/03/22 职场文书
主题教育活动总结
2014/05/05 职场文书
计算机网络专业求职信
2014/06/05 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
解除同居协议书
2015/01/29 职场文书
大学运动会加油稿
2015/07/22 职场文书
食品卫生管理制度
2015/08/06 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python