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获取url参数的使用扩展实例
Dec 29 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
vue中的v-if和v-show的区别详解
Sep 01 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 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
基于mysql的bbs设计(五)
2006/10/09 PHP
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
php zend 相对路径问题
2009/01/12 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
jQuery的链式调用浅析
2010/12/03 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python logging类库使用例子
2014/11/22 Python
python模拟表单提交登录图书馆
2018/04/27 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
python读取指定字节长度的文本方法
2019/08/27 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
详解python with 上下文管理器
2020/09/02 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
英文版销售经理个人求职信
2013/11/20 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
高中班主任心得体会
2016/01/07 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
Django框架中模型的用法
2022/06/10 Python