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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
jQuery.each()用法分享
Jul 31 Javascript
各种常用的JS函数整理
Oct 25 Javascript
开启BootStrap学习之旅
May 04 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
webpack4 css打包压缩问题的解决
May 18 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
深入理解基于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 递归效率分析
2009/11/24 PHP
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
php解析xml方法实例详解
2015/05/12 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
JavaScript全局函数使用简单说明
2011/03/11 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
Python求解平方根的方法
2015/03/11 Python
Python的动态重新封装的教程
2015/04/11 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
一看就懂得Python的math模块
2018/10/21 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
一些Solaris面试题
2013/03/22 面试题
机械专业毕业生自荐信
2013/11/02 职场文书
小学毕业感言300字
2014/02/19 职场文书
大学运动会入场词
2014/02/22 职场文书
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis