uni-app第三方登陆-微信

uni-app第三方登陆-微信

结合上文全局登陆校验，实现微信授权登录
官方手册地址： https://uniapp.dcloud.io/api/plugins/login?id=getuserinfo

一、书写两个界面

• login.vue 用于用户登陆
• my.vue 我的界面，存放校验登陆的函数

1.1 my.vue

如果登陆过，则不发生跳转，直接 return;，否则跳转至 login.vue 并携带两个参数（登陆成功后的跳转界面、跳转方式），完成登陆操作。

1.2 login.vue

主要涉及到2个方法：

• uni.login
• uni.getUserInfo

uni.login

用于触发第三方登陆，调起微信登陆，登陆成功后返回对象格式如下：

{    
    "code":"***",
    "authResult":{
        "openid":"***",
        "scope":"snsapi_userinfo",
        "refresh_token":"**",
        "code":"****",
        "unionid":"***",
        "access_token":"***",
        "expires_in":7200
    },
    "errMsg":"login:ok"
}

uni.getUserInfo

获取用户信息，通过上方的 uni.login 方法会得到用户 access_token，故 uni.getUserInfo 在此基础上获取用户的 openid、userInfo(头像、昵称) 等信息。

{
    "errMsg":"getUserInfo:ok",
    "rawData":"...
    "userInfo":{
        "openId":"***",
        "nickName":"***",
        "gender":1,
        "city":"Xi'an",
        "province":"Shaanxi",
        "country":"China",
        "avatarUrl":"头像",
        "unionId":"oU5xxxxxxxxxxeLfFPqxo"
    },
    "signature":""
}

uni.request

此方法为 uni-app 中用于网络请求。详细见官方手册：https://uniapp.dcloud.io/api/request/request?id=request

二、效果

点击 my.vue 将会触发 微信登陆授权界面，如下：

登陆成功后，向远程服务器发送一个保存用户信息的请求

posted @ 2019-03-30 09:56 niceyoo 阅读( ...) 评论( ...) 编辑 收藏