普歌-飞灵团队-uni-app小程序登录


uni-app小程序登录


依旧不废话,直接上代码


  <view class="login-btn">
  <button
    type="primary"
    size="default"
    hover-class="none"
    class="log-wx"
    lang="zh_CN"
    open-type="getUserInfo"
    @getuserinfo="wxLogin"
  >
    微信授权登录
  </button>
</view>

getUserInfo用于获取用户信息,对button属性有不懂的看一下官方文档


              wxLogin() {
                    // #ifdef MP-WEIXIN
                    uni.getProvider({
                      service: 'oauth',
                      success: (res) => {
                        // 支持微信、qq和微博等
                        if (~res.provider.indexOf('weixin')) {
                            uni.login({
                                provider: 'weixin',
                                success: (loginRes) => {
                                    // 获取用户信息`
                                    uni.getUserInfo({
                                        provider: 'weixin',
                                        success: (info) => {
                                            // 这里请求接口
                                            console.log(loginRes);
                                            console.log(info);
                                            // 将用户数据放到缓存
                                            // const {userInfo} = info.userInfo
                                            // uni.setStorageSync('userInfo', userInfo)
                                        },
                                        fail: () => {
                                            uni.showToast({title:"微信登录授权失败",icon:"none"});
                                        }
                                    })
                                },
                                fail: () => {
                                    uni.showToast({title:"微信登录授权失败",icon:"none"});
                                }
                            })
                            
                        }else{
                            uni.showToast({
                                title: '请先安装微信或升级版本',
                                icon:"none"
                            });
                        }
                      }
                    });
                    //#endif
            }

在 uni.login 和 uni.getUserInfo 被调用后,会分别返回code和用户信息


你可以获取到code 、iv 、encryptedData值用于继续请求后端给你的接口,这些可以传给后端交换得到openid,将用户信息放到缓存中,第二次直接获取缓存中的数据


注:uni.login返回的code为小程序专有,用户登录凭证,只能使用一次,五分钟有效


具体详见官方文档


如果需要知道用户当前是否已经授权,则可以参考uni-app的授权文档,可以判断不同的授权类型

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页