vue+cordova 实现第三方登录（ QQ 微信 微博）之微信登录

概要
1、首先先到各个开放平台申请开发者账号

先申请，审核通过还需要一定时间

• 微信开放平台 https://open.weixin.qq.com/
• 腾讯开放平台 http://open.qq.com/
• 新浪微博开放平台 http://open.weibo.com/

2、添加对应的cordova插件

• QQ：https://github.com/iVanPan/Cordova_QQ.git
• 微信：https://github.com/xu-li/cordova-plugin-wechat
• 微博：https://github.com/iVanPan/cordova_weibo.git

微信登录以Android为例

在微信开发平台申请添加应用的时候，填完基本信息之后，还需要填写开发信息（包名和签名）

1、填写正确包名

这里填写的包名需要和项目的包名一致，config.xml的id值就是项目的包名

2、填写正确的签名

如何签名我就不多说了，具体看这篇文章：https://blog.csdn.net/luyu13141314/article/details/88799678

这里假设你已经按照前面的文章给apk签名了，并且生成了已签名的apk ：signed.apk

PS: 我为了方便给apk签名我把未签名的apk文件app-release-unsigned.apk 放到了和数字证书.keystore 同级目录下。

此时生成的signed.apk 就是已经签名的apk, 我们把原来的debug版本的app卸载掉，装上这个已经签名的apk。

3、使用签名生成工具查看签名

下载签名生成工具(微信开发平台)

把这个签名工具安装在自己手机上。（已签名的apk和该签名工具一同装在自己手机上）

即可获取签名啦。把这个签名填到微信开放平台，大功告成。

4、开发微信登录

直接按照GitHub文档开发即可: https://github.com/xu-li/cordova-plugin-wechat

文档十分详细

我是写了一个测试demo, 直接在页面上放了3个按钮

    <button @click="handleQQ">qq登录button>
    <button @click="handleWechat">微信登录button>
    <button @click="handleWeibo">微博登录button>

handleWechat(){
      Wechat.isInstalled(function (installed) {
          alert("Wechat installed: " + (installed ? "Yes" : "No"));
          let scope = "snsapi_userinfo",
              state = "_" + (+new Date());
          Wechat.auth(scope, state, function (response) {
              // you may use response.code to get the access token.
              alert(JSON.stringify(response));
          }, function (reason) {
              alert("Failed: " + reason);
          });
      }, function (reason) {
          alert("Failed: " + reason);
      });
    },

在vue里面直接按照GitHub文档说明填写即可，直接调用Wechat，因为前面我们已经在vue集成了cordova