vue中进行微博分享的实例讲解

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、这样微博就分享成功了!

以上就是本次介绍的全部知识点内容,感谢大家的学习和对我们的支持。

(0)

相关推荐

  • vue+php实现的微博留言功能示例

    本文实例讲述了vue+php实现的微博留言功能.分享给大家供大家参考,具体如下: html部分: <!doctype html> <html> <head> <meta charset="utf-8"> <title>微博留言</title> <link href="style/weibo.css" rel="external nofollow" rel="s

  • vue中进行微博分享的实例讲解

    1.首先要在页面写出点击可进行微博分享的入口,样式因自己项目而定: <li class="bottomIcon_5 shareSina"><a href="javascript:;" rel="external nofollow" target="_blank"></a><div class="shareTxt">微博</div></li&g

  • vue 实现 tomato timer(蕃茄钟)实例讲解

    近期在学习[时间管理]方面的课程,其中有一期讲了蕃茄工作法,发现是个好多东西.蕃茄工作法核心思想就是:工作25分钟,休息5分钟.如果您好了解更多可以自行度娘. 在加上本人是一个程序猿,就想用程序的方式来表达对此工作法的敬意.因此就产生了用vue实现一个tomato timer的想法. 一.vue如何实现他的 1. 依赖的包 "devDependencies": { "babel-plugin-lodash": "^3.2.11", "b

  • vue组件初学_弹射小球(实例讲解)

    1. 定义每个弹射的小球组件( ocicle ) 2. 组件message自定义属性存放小球初始信息(可修改) { top: "0px", //小球距离上方坐标 left: "0px", //小球距离左边坐标 speedX: 12, //小球每次水平移动距离 speedY: 6 //小球每次垂直移动距离 } 3. 思路 3.1 定时器设置小球每一帧移动 3.2 初始方向:isXtrue为true则小球为横坐标正方向: isYtrue为true则小球为纵坐标正方向 3

  • Spring MVC中自定义拦截器的实例讲解

    1. 引言 拦截器(Interceptor)实现对每一个请求处理前后进行相关的业务处理,类似于Servlet的Filter. 我们可以让普通的Bean实现HandlerIntercpetor接口或继承HandlerInterceptorAdapter类来实现自定义拦截器. 通过重写WebMvcConfigurerAdapter的addIntercetors方法来注册一个计算每一次请求的处理时间的拦截器. 2. 自定义拦截器的实现 2.1 定义拦截器 新建LogInterceptor类,并继承Ha

  • Java自动化测试中多数据源的切换(实例讲解)

    在做自动化测试时,数据驱动是一个很重要的概念,当数据与脚本分离后,面对茫茫多的数据,管理数据又成了一个大问题,而数据源又可能面对多个,就跟在开发过程中,有时候要连接MYSQL,有时候又要连接SQL SERVER一样,如何做到快速切换?下面的示例中,我们将从一个数据源开始,一步步的演示下去: 一. 用外部文件做数据驱动的基本写法 1.1 我们在做数据驱动时,把数据存储在JAVA的属性文件中:data.properties username=test password=123456 1.2 解析pr

  • 基于Java中UDP的广播形式(实例讲解)

    UDP---用户数据报协议,是一个简单的面向数据报的运输层协议.UDP不提供可靠性,它只是把应用程序传给IP层的数据报发送出去,但是并不能保证它们能到达目的地 ,也不能保证数据包到达的顺序.由于UDP在传输数据报前不用在客户和服务器之间建立一个连接,且没有超时重发等机制,故而传输速度很快. 在Java中UDP的实现: * UDP: * 客户端: * 1.创建用于UDP通信的socket对象---DatagramSocket(用于UDP数据的发送和接收)---数据报套接字 * 2.准备数据,封装包

  • Vue中v-for的数据分组实例

    使用Vue.js可以很方便的实现数据的绑定和更新,有时需要对一个一维数组进行分组以方便显示,循环可以直接使用v-for,那分组呢?这里需要用到vue的computed特性,将数据动态计算分组. 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titl

  • 基于Python中numpy数组的合并实例讲解

    Python中numpy数组的合并有很多方法,如 - np.append() - np.concatenate() - np.stack() - np.hstack() - np.vstack() - np.dstack() 其中最泛用的是第一个和第二个.第一个可读性好,比较灵活,但是占内存大.第二个则没有内存占用大的问题. 方法一--append parameters introduction arr 待合并的数组的复制(特别主页是复制,所以要多耗费很多内存) values 用来合并到上述数组

  • 在vue中阻止浏览器后退的实例

    如下所示: history.pushState(null, null, document.URL); window.addEventListener('popstate', function() { history.pushState(null, null, document.URL); }); vue阻止浏览器后退按钮与js相同,同样没有脱离原生的js 以上这篇在vue中阻止浏览器后退的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue 中固定导航栏的实例代码

    点击按钮回顶 <template lang="html"> <div class="gotop-box"> <i @click="gotop"class="icon topIcon"></i> </div> </template> <script> export default { methods: { gotop: function () {

随机推荐