小程序 登录授权页面

login.wxml

<view class="container">
  <view class="logo">
    <view class="header">
      <open-data class="" type="userAvatarUrl"></open-data>
    </view>
  </view>

  <view class="auth-title">申请获取以下权限</view>
  <view class="auth-subtitle">获得你的公开信息（昵称、头像等）</view>
  
  <view class="loginBtn">
    <button class="login-btn" openType="getUserInfo" lang="zh_CN" bindgetuserinfo="authorLogin">
    授权登录
    </button>

    
  </view>
  <view class="loginBtn quxiaoBox">
    <button class="login-btn quxiao" lang="zh_CN" bindtap="index">取消</button>
  </view>
  
</view>

login.wxss

/* pages/login/login.wxss */
page,.container{
  height: 100%;
  background: #ffffff;
}
.logo{
  margin-top: 160rpx;
  text-align: center;
  font-size: 30rpx;
  color: #2bbb7d;
}
.logoimg{
  display: block;
  width: 120rpx;
  margin: 0 auto 20rpx;
} 
.logo .header {
  width: 160rpx;
  height: 160rpx;
  border: 2px solid #fff;
  margin: 0rpx auto 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 1px 0px 5px rgba(50, 50, 50, 0.3);
}
.loginBtn{
  width: 440rpx;
  height: 88rpx;
  line-height: 88rpx;
  background: #2bbb7d;
  color: #ffffff;
  border-radius: 88rpx;
  margin: 100rpx auto 40rpx;
  font-size: 28rpx;
}
.loginBtn icon{
  font-size: 40rpx;
  vertical-align: middle;
  margin-right: 8rpx;
}

.logo {
  padding: 80rpx 0 48rpx;
  border-bottom: 1rpx solid #e3e3e3;
  margin-bottom: 72rpx;
  text-align: center;
}

.auth-title {
  color: #585858;
  font-size: 40rpx;
  margin-bottom: 40rpx;
}
.auth-title,.auth-subtitle{
  padding: 0% 4%;
  box-sizing: border-box;
}

.auth-subtitle {
  color: #888;
  margin-bottom: 88rpx;
}

.login-btn {
  border: none;
  color: #fff;
  font-size: 28rpx;
  border-radius: 999rpx;
  padding: 0;
  line-height: 88rpx;
}
.quxiaoBox{
  background: #eee;
  color:#666;
  margin: 40rpx auto;
}
.quxiaoBox .quxiao{
  color:#666;
}

.login-btn::after {
  display: none;
}

.login-btn.button-hover {
  /* box-shadow: inset 0 5rpx 30rpx rgba(0, 0, 0, 0.15); */
  background-color: #2bbb7d!important;
  border: none!important;
}
.quxiao.button-hover{
  background-color: #eee!important;
  border: none!important;
}

login.js

// pages/login/login.js
let App = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 授权登录
   */
  authorLogin: function (e) {
    let _this = this;
    // console.log("授权登录",e);
    wx.showLoading({ title: "正在登录", mask: true });
    // 执行微信登录
    wx.login({
      success: function (r) { 
        // console.log("微信登录",r);
        var code = r.code;
        if(code){
          wx.getUserInfo({ 
            lang: 'zh_CN',
            success: function (res) {
              // console.log(res);
              // wx.setStorageSync('city', res.userInfo.city);
               // 发送用户信息
              App._post_form('nouser/dec_code' 
              , {
                code: code,
                rawData: res.rawData,
                signature: res.signature,
                iv: res.iv,
                encryptedData: res.encryptedData
              }, function (result) { 
                // console.log("返回openid等信息",result); 
                var data = {
                  name: result.data.nickName,  
                  avatar: result.data.avatarUrl,
                  openid: result.data.openId,
                  unionid: result.data.unionId 
                } 
                wx.setStorageSync('info', data);
                wx.setStorageSync('session_key', result.data.session_key);
                App._post_form('nouser/xcx_log',data, function (re) {     
                  wx.setStorageSync('token', re.data.token.token);
                  wx.setStorageSync('user_id', re.data.info.id); 
                  var pages =getCurrentPages();//当前页面栈
                  if (pages.length >1) { 
                    var beforePage = pages[pages.length- 2];//获取上一个页面实例对象
                    if(beforePage.route=="pages/member/member"){
                      beforePage.useinfo();
                    }//触发父页面中的方法
                  }
                  // _this.navigateBack();
                  wx.switchTab({ 
                    url: '../index/index', 
                  })  
                });
                // // 跳转回原页面
                // _this.navigateBack();
              },false, function () {
                wx.hideLoading();
              });
            },fail: function () {
              wx.switchTab({
                url: '/pages/index/index',
              })
            }
        })
        }
        
       
      }
    });
  },

  /**
   * 授权成功 跳转回原页面
   */
  navigateBack: function () {
    wx.navigateBack();
  },

  index: function () {
    wx.switchTab({
      url: '/pages/index/index',
    })
  }
})
login.json

```javascript
{
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#2bbb7d",
  "navigationBarTitleText": "登录",
  "navigationBarTextStyle": "white"
}