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 相关文章推荐
jquery 分页控件实现代码
Nov 30 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
Antd的table组件表格的序号自增操作
Oct 27 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
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
Python获取任意xml节点值的方法
2015/05/05 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
详解python之简单主机批量管理工具
2017/01/27 Python
python生成随机红包的实例写法
2019/09/02 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
本科生职业生涯规划书范文
2014/01/21 职场文书
门诊手术室工作制度
2014/01/30 职场文书
2015初中团委工作总结
2015/07/28 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
Python实现双向链表基本操作
2022/05/25 Python