vue+cordova 实现第三方登录( QQ 微信 微博)之微信登录

版权声明:本文为博主原创文章,欢迎转载,转载请注明出处。 https://blog.csdn.net/luyu13141314/article/details/88800745

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

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

2、添加对应的cordova插件

微信登录以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、使用签名生成工具查看签名

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

在这里插入图片描述

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

4、开发微信登录

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

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

在这里插入图片描述

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);
      });
    },

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/luyu13141314/article/details/88800745