uni-app 实现第三方登录之微信小程序-2019年4月1日

1、新版微信小程序：必须通过按钮的形式， 通过验证后才可获取用户的基本信息，

代码如下：页面代码

这里采用图标形式的按钮，还需优化

 <view class="oauth-row" v-if="hasProvider" v-bind:style="{top: positionTop + 'px'}">
            <view class="oauth-image" v-for="provider in providerList" :key="provider.value"> 
                <!--#ifdef MP-WEIXIN-->
                <button open-type="getUserInfo" lang="zh_CN" type="primary" @getuserinfo= "onGotUserInfo"   withCredentials="true" v-bind:style="{backgroundImage:'url('+provider.image+')'}" ></button>
                <!--#endif-->  
            </view>
        </view> 

样式如下

.action-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .action-row navigator {
        color: #007aff;
        padding: 0 20upx;
    }

    .oauth-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .oauth-image {
        width: 100upx;
        height: 100upx;
        border: 1upx solid #dddddd;
        border-radius: 100upx;
        margin: 0 10upx;
        background-color: #ffffff;
    }

    .oauth-image button {
        width: 60upx;
        height: 60upx;
        margin: 20upx;
    }

另外 js逻辑代码如下

    onGotUserInfo:function (e) {
            //console.log(e);
            if (!e.detail.iv) {
                uni.showToast({
                    title:'您取消了授权！',
                    icon:"none"
                });
                return false;
            }else{//通过验证后可获取用户信息
                //console.log(e.detail.userInfo);    
                var userInfo = e.detail.userInfo;
                console.log('用户昵称为：' + userInfo.nickName);
                console.log('用户头像：'+userInfo.avatarUrl);
                
                this.toMain(userInfo.nickName,userInfo.avatarUrl);//处理已获取到用户信息
            }
        }