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 相关文章推荐
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
JS实现可视化文件上传
Sep 08 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
javascript函数式编程基础
Sep 15 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获取中英混合字符串长度的方法
2014/06/07 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
js取得url地址参数实例
2013/02/22 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
javascript常用的方法整理
2015/08/20 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
python使用append合并两个数组的方法
2015/04/28 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
Python类如何定义私有变量
2020/02/03 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
Unix控制后台进程都有哪些进程
2016/09/22 面试题
仓库主管的岗位职责
2013/12/04 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
趣味游戏活动方案
2014/02/07 职场文书
身边的榜样活动方案
2014/08/20 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
社会实践活动总结
2015/02/05 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js