普歌-飞灵团队-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的授权文档，可以判断不同的授权类型