QQ互联跳转到指定的页面【JS-SDK】

╰半橙微兮° 2022-05-16 14:12 276阅读 0赞

我互联的目的是用来做   留言/评论   功能。那么我就需要跳转两个页面，一个是留言板页面，一个是相关文章页面（多个文章按照参数区别）

我的回调地址

http://www.xdx97.com/#/messageboard;http://www.xdx97.com/#/single

# 最后做好的效果如下：点击登陆，用户确认后跳到登陆前的页面。 #

首先你要自己做好判断 你是要跳转到那一个页面的，我这里是根据一个参数来判断的。

当我根据 sdk 上放置好了代码， F12 发现，那个形成的登陆按钮就是一个点击事件，是一个 open 事件（也就是开启一个新窗口的意思）

地址如下：

https://graph.qq.com/oauth2.0/authorize?client_id=101514038&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fwww.xdx97.com%2F%23%2Fmessageboard', 'oauth2Login_10283' ,'height=525,width=585, toolbar=no, menubar=no, scrollbars=no, status=no, location=yes, resizable=yes'

在这个里面我们可以找到之前配置的  appid  和 回调地址 ，也就是说登陆成功了会按照上面这个字符串的地址进行回跳。

那么问题就简单了，我们只要在这个地址上做做手脚就好了。

1、首先，我把它改成了一个在当前页面打开的事件，因为我发现打开新的页面怎么都回不来，这个问题有兴趣的可以自行去了解。

2、把那个按钮改成一个点击方法（这就很简单了吧？我还没有美化，可以看看我的）

![20181031085211293.png][]

3、去写这个aaa（）方法，我们无非就是要改上面那个地址中的回调地址

aaa(){
                    if(this.flagid == "538764e7-af76-40bd-819a-cb9fa0b43904"){
                      window.location.href='https://graph.qq.com/oauth2.0/authorize?client_id=101514038&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fwww.xdx97.com%2F%23%2Fmessageboard', 'oauth2Login_10283' ,'height=525,width=585, toolbar=no, menubar=no, scrollbars=no, status=no, location=yes, resizable=yes'; 
                    
                    }else{
                       window.location.href='https://graph.qq.com/oauth2.0/authorize?client_id=101514038&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fwww.xdx97.com%2F%23%2Fsingle?bid='+this.flagid, 'oauth2Login_10283' ,'height=525,width=585, toolbar=no, menubar=no, scrollbars=no, status=no, location=yes, resizable=yes';  
                    }
               
                  
              }

说明：至于回显的问题，就个人自己解决吧。

我这个用的是vue，回显思路是，定义一个变量包含 地址和名称，当登陆成功之后，就赋值进去，退出的时候，就把值清空。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1][]

![20181031090107936.png][]

[20181031085211293.png]: /images/20220503/d518dfdfeae14345bd74ef1c4230ebce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: /images/20220503/fce112e246ea4ced85ebf4a66e50186f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]: /images/20220503/c6137c71773c4415847cc7f28b2abd34.png
[20181031090107936.png]: /images/20220503/733c584b843c4dcd8d319d252ae5846e.png