四时宝库

程序员的知识宝库

Vue调用QQ却只能访问首页的解决方法

前言

之前的代码为了能够分享当前文章到QQ我是这样写的

shareToQQ(){
      let url = `https://connect.qq.com/widget/shareqq/index.html?url=https://我的网站/#/article/${this.id}&source=https://我的网站.com&title=${this.article.title}&summary=${this.article.content.slice(0, 42)}&desc=${this.article.title}&pics=https://我的网站.com${this.article.cover_image}`
      window.open(url)
    }

结果出现了发给好友,好友打开的不是文章详情页,而是网站的首页,思考了几天,最后在一个地方发现别人的写法:

<a class="lqq" target="_blank" href="javascript:void(0);" οnclick="window.open('http://connect.qq.com/widget/shareqq/index.html?url=' + encodeURIComponent(document.location.href) + '

&desc=邀请详情&title=标题&summary=简介&pics=&flash=&site=邀请人或网站&callback="  title="QQ登录">qq</a>

发现它的url外面有encodeURIComponent(document.location.href)包裹,于是我改了下自己的代码:

代码实现

shareToQQ(){
      let href = `https://我的网站.com/#/article/${this.id}`
      let url = `https://connect.qq.com/widget/shareqq/index.html?url=${encodeURIComponent(href)}&source=https://我的网站.com&title=${this.article.title}&summary=${this.article.content.slice(0, 42)}&desc=${this.article.title}&pics=https://我的网站.com${this.article.cover_image}`
      window.open(url)
    }

结论

问题解决!主要的区别就是把网址单独写了一个变量并用encodeURIComponent()方法包裹,可能是QQ那边不支持我原有的写法吧,也希望大家能够帮忙解答一下,不过最后还是解决了问题。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接