微信登入关闭微信回调页面redirect_url

前言 在使用微信公众号扫码登入的时候,一直有个问题很困扰我,就是微信扫码成功之后,手机微信会跳转到我在公众平台上设置的redurect_url,而这个接口又不得不响应,不然微信客户端出现页面空白,于是搜索了很多相关资料,但都是十分曲折且无用

1.网络上的解决方案(都是坑,不要踩)

1. 通过浏览器的window对象,然后关掉浏览器,他们的意思就是,在后端响应一个页面,然后通过js中的window来关闭浏览器

    <script>
        window.close()
        //还有
        window.go(-1)
    </script>
复制代码

• 错误解读
• 错误1. 本身我们在服务端响应的时候,是不存在window这个对象的,所以如果通过一些视图引擎,比如ejs,那么window直接undefined
• 错误2. 如果本身响应的是html文件,那么js可以执行这些代码,因为页面是在浏览器端运行的,但是咱们不能忽略了一个问题,这可是微信浏览器啊,相当于一个混合app,所以window是关闭不了这个页面的

2.weixinJSBridge

这个也是给我灵感的一个api,一般混合app中都会内置一些全局对象来帮助我们调用设备的api,比如uni中的plus对象,所以理论上来说weixinJSBridge也是微信内置的全局对象,网上的解决方案如下

    weixinJSbRridge.call('closeWindow')
复制代码

本来以为迎来了曙光,但是现实是残酷的,因为我翻遍了官方文档,也没看见介绍weixinJsBridge这个全局对象的文档,所以这肯定是不行的

3.曙光

经历了通过的搜寻,我决定冷静下来,好好查看微信公众号的文档,首先我是基于微信公众号的OAUTH2.0开发的微信扫码登入(可能有人会问为什么不直接用微信开放平台直接提供的登入呢,答案是-poor,只能偷鸡了,曲线开发)然后根据以往的开发经验,我看见了一个叫做js-sdk的东西,文档地址迎来了曙光,首先我配置了微信的js安全接口域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名,接下来的一切就很丝滑了

4.解决方案

js-sdk是专门用于开发微信网页的,所以我在回调的接口中,响应了一个ejs视图,微信的文档文字很多,神烦,但是写的真的详细,只要你静下心来拜读

1. 首先在视图层通过script引入sdk的cdn地址

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
复制代码

2. 接下来就简单了,根据文档说明,我们只需要调用关闭页面的api就可以了

 <script>
   	wx.closeWindow();
   </script>
复制代码

3. 完整后端响应代码(ejs视图部分),特别注意的是,调用wx.closeWindow()需要放到setTimeout中运行,因为访问cdn是需要一定时间的

    <div>

        <img src=<%=headimgurl %> style="margin-top:100px" alt="" width="100">
        <br>
        <h3>欢迎<%= nickname %>登入</h4>
                <img src="/imgs/bg2.png" alt="" style="margin-top:100px;opacity:.5" width="250">
                <br />
    </div>
   <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
   <script>
   	setTimeout(function(){
            wx.closeWindow();
        },100)
   </script>
复制代码

搞定收工

总结:代码很艰难,bug只能靠自己