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 相关文章推荐
javascript 框架小结 个人工作经验
Jun 13 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
使用js和canvas实现时钟效果
Sep 08 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
深入理解基于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无限分类(树形类)的深入分析
2013/06/02 PHP
php简单获取目录列表的方法
2015/03/24 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
python 网络编程常用代码段
2016/08/28 Python
Python中的默认参数实例分析
2018/01/29 Python
实时获取Python的print输出流方法
2019/01/07 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
Python实现最常见加密方式详解
2019/07/13 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
python如何导入依赖包
2020/07/13 Python
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
预备党员对照检查材料思想汇报
2014/09/24 职场文书
投标单位介绍信
2015/05/05 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
个人工作决心书
2015/09/22 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
使用Django框架创建项目
2022/06/10 Python