微信小程序授权登录

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

目录
 
自定义授权页面
 
点击授权登录后出现微信自带的授权登录弹窗
 
<!--index.wxml-->
<!-- 授权界面 -->

<cover-view class='auth_wrap' wx:if="{{hasUserInfo && canIUse}}">

<cover-view class='con'>

<cover-image class='logo' mode="widthFix" src='../../assets/mrys_logo.png'>

</cover-image>

<cover-view class='txt'>XXXXXX小程序申请一下权限：</cover-view>

<cover-view class='txt'>获取你的公开信息（头像和昵称等）</cover-view>

<button class='btn' type='primary' open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 授权登录 </button>

</cover-view>

</cover-view>
 
//app.js
App({
onLaunch: function () {
},
globalData: {

'hasUserInfo':false,

'code': null,

'userInfo': null
}
})
 
//index.js

const app = getApp();
Page({
data: {
userInfo: {},
hasUserInfo: false,//未授权不显示
canIUse: wx.canIUse('button.open-type.getUserInfo')//判断小程序的API，回调，参数，组件等是否在当前版本可用。
},
onLoad: function () {

var self=this;
// 获取用户信息
wx.getSetting({
success: res => {

if (res.authSetting['scope.userInfo']) {
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
app.globalData.userInfo = res.userInfo
// console.log(app.globalData.userInfo);

              // 登录
              wx.login({
                success: res => {
                  // 发送 res.code 到后台换取 openId, sessionKey, unionId
                  getApp().globalData.code = res.code;
                  console.log(getApp().globalData.code);
                  wx.request({
                    url: 'https:xxxxxxxxxxxxxxxxxxxxxx',
                    data: {
                      'code': getApp().globalData.code,
                    },
                    method: 'POST',
                    success: function (res) {
                      console.log(res);
                      getApp().globalData.uid = res.data.data.uid;
                      console.log('uid====',getApp().globalData.uid);
                    }
                  })
 
                }
              })
            }
          })
        } else {
          // 用户没有授权
          // 改变 hasUserInfo 的值，显示授权页面
          self.setData({
            hasUserInfo:true
          });
        }
      }
    })
  },
  getUserInfo: function (e) {
    if (e.detail.userInfo) {
      console.log(e.detail.userInfo);
      //用户按了允许授权按钮
      var self = this;
      //授权成功后,通过改变 hasUserInfo 的值，让实现页面显示出来，把授权页面隐藏起来
      self.setData({
        userInfo: e.detail.userInfo,
        hasUserInfo: false
      });
 
    } else {
      //用户按了拒绝按钮
      wx.showModal({
        title: '警告',
        content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
        showCancel: false,
        confirmText: '返回授权',
        success: function (res) {
          // 用户没有授权成功，不需要改变 isHide 的值
          if (res.confirm) {
            console.log('用户点击了“返回授权”');
          }
        }
      });
    }
  },