小程序授权登录

小程序授权登录_第1张图片

小程序授权登录_第2张图片

小程序授权登录_第3张图片

wxml:


  
    
    微信授权页面
    此页面是微信授权页面,点击下方按钮弹出授权或跳转页面
    

  

css:

/* 开始 */
page {
  height: 100%;
  display: table;
}

.auth {
  margin-top: 0;
  text-align: center;
  display: table-cell;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  padding: 100rpx;
  vertical-align: middle;
}

.img {
  border-radius: 50%;
  border: 1px solid #fff;
  background-color: #fff;
  margin: 0 0 60rpx;
  display: inline-block;
  width: 200rpx;
  height: 200rpx;
  line-height: 0;
}

.title {
  display: inline-block;
  width: 100%;
  margin: 0 0 60rpx;
}

.describe {
  color: #a7aaa9;
  font-size: 26rpx;
  margin: 0 0 60rpx;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  width: 100%;
}

.btn {
  padding: 0 60rpx;
  background-color: #19be6b;
  margin: 20rpx 0 200rpx;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  user-select: none;
  font-size: 14px;
  border: 0 !important;
  position: relative;
  text-decoration: none;
  height: 44px;
  line-height: 44px;
  box-shadow: inset 0 0 0 1px #19be6b;  
  background: #fff !important;
  color: #19be6b !important;
  display: inline-block;
  border-radius: 10rpx;
}

js:

const utils = require('../../utils/util.js'); //引用 util.js 文件

var app = getApp();
Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onAuth :function(e) {
    wx.getSetting({//获取用户的当前设置返回值中只会出现小程序已经向用户请求过的权限
      success: (res) => {
        if (res.authSetting['scope.userInfo']) {
          var userinfo = e.detail.userInfo;//用户信息
          console.log(userinfo)
          wx.login({//用户进入app就要调用的
            success: res => {
             console.log(res.code)//返回code码
              wx.request({
                data: userinfo,
                url: utils.getUrl() + "/auth?code=" + res.code,//请求接口
                success(res) {
                  var userinfo = res.data.data; 
                  wx.setStorage({//信息存储,在登录页面判断有没有授权,有就进行下一步没有就跳回授权页面
                    key: "userinfo",
                    data: userinfo
                  });
                  if (res.data.code == 0) {
                    wx.reLaunch({
                      url: "/pages/login/login"//页面跳转
                    });
                  }else{
                    utils.showToast('操作失败,请重试');
                  }
                }
              });
            }
          });
        }
      }
    })
  }
})

 

你可能感兴趣的:(WX,周家大小姐)