最新微信小程序一键获取真实微信头像和昵称方法

 

 

 

 

 

 

 

{
  ....
  "plugins": {
    "loginplugin": {
      "version": "latest",
 
      //以下二选一，微注册灵活性更高，小程序要先添加插件
      "provider" : "wxc7b7f914565de923"//插件：安全注册
      "provider" : "wx12251485dfaf24d3"//插件：微注册
    }
  },
  .....
}

 

 

{
  "navigationBarTitleText": "个人中心",
  "enablePullDownRefresh": false,
  "usingComponents": {
    "login": "plugin://loginplugin/login"
  }
}

//mine.wxml
<view>
    <login class="login-modal" modal="{{modal}}" bind:success="loginSuccess" bind:fail="loginFail" bind:cancel="loginCancel" wx:if="{{login_show}}"></login>
    <view class="user-area">
        用户业务部分
    </view>
</view>
 
 
 
//mine.js
export default {
    data: function data() {
        return {
            login_show: true, //控制登录提示是否显示
            modal://弹窗内容定义
            {
                title: '用户登录',  //弹窗标题内容
                content: '授权登录后，开始使用完整功能'  //弹窗提示内容
                
                //以下配置仅《微注册》插件支持
                confirmText: '更新',  //确认按钮文字内容，非必填，默认“登录”,
                cancelText: '暂不',  //取消按钮文字内容，非必填，默认“取消”
                confirmStyle: {  //确认按钮文字颜色和按钮背景色，非必填
                    color: '#000000',    //文字颜色
                    backgroundColor: '#FFFFFF'   //背景颜色
                },
                cancelStyle: {  //取消按钮文字颜色和按钮背景色，非必填
                    color: 'red',     //文字颜色
                    backgroundColor: '#FFFFFF'   //背景颜色
                }
            }
        };
    },
    onShow() {
            
    },
    methods: {
        loginSuccess: function loginSuccess(res) {//登录成功回调
            console.log(res);
            this.login_show = false;//登录成功后，关闭登录弹窗
                
            let _Info = res.target.res;
                
            //_Info.avatarUrl：用户头像地址
            //_Info.nickName：用户昵称
 
            //用户可以将获取到的头像和地址存储到服务器保存，下次就不用再次登录了
            上传用户信息到服务器，并标记用户已登录
        },
        loginFail: function loginFail(res) {//登录失败回调
            console.log(res);
            this.login_show = false;
 
            //某些手机端会出现登录失败情况，针对这部分的用户，如果业务需要登录后才能使用，建议这里按照登录成功处理，否则该类用户无法进入登录状态
            上传用户信息（默认头像和昵称）到服务器，并标记用户已登录
        },
        loginCancel: function loginCancel(res){//用户取消登录回调
            console.log(res);
            this.login_show = false;
        }
    }
}
 
 
//mine.wxss
.login-modal{
    position: fixed;
    top: 0;
    z-index: 99999999;
    width: 100%;
    height: 100%;
    background-color: #00000098;
}