小程序登录页

小程序前端项目做多了之后会发现，授权界面一直都是不一样，每次可能还要自己手写一个出来，现在整理了一个跳转页面方式页面逻辑的页面。

wxml

<!--pages/login/index.wxml-->

<view class="box">
  <view class="center">
    <view class="logo">
      <image src="/image/login_icon.png"></image>
    </view>

    <view class="hr"></view>

    <view class="title">授权登录后将获得以下权限</view>

    <view class="desc">获得你的公开信息（昵称、头像等）</view>

    <button class="btn" bindgetuserinfo="userlogincall" openType="getUserInfo">授权登录</button>

    <button class="cencel" bindtap="cencel">暂不登录</button>
  </view>
</view>

下载icon

wxss

/* pages/login/index.wxss */

.box {
  width: 100%;
  height: 100vh;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center {
  width: 600rpx;
}

.center .logo {
  width: 180rpx;
  height: 180rpx;
  margin: auto;
}

.center .logo image {
  width: 180rpx;
  height: 180rpx;
}

.center .hr {
  width: 100%;
  height: 1rpx;
  border-bottom: 1rpx solid rgba(72,72,72,0.5);
  margin-top: 60rpx;
}

.center .title {
  width: 100%;
  font-size: 32rpx;
  color: #333333;
  margin-top: 60rpx;
}

.center .desc {
  width: 100%;
  font-size: 28rpx;
  color: #999;
  margin-top: 30rpx;
}

.center .btn {
  width: 100%;
  height: 100rpx;
  box-shadow: 0px 9rpx 14rpx 2rpx rgba(20, 199, 134, 0.35);
  border-radius: 50rpx;
  background: linear-gradient(0deg, #29CB90, #18B179);
  font-size: 36rpx;
  color: #fff;
  text-align: center;
  line-height: 70rpx;
  margin-top: 80rpx;
  margin-bottom: 300rpx;
  font-weight: none;
}

.cencel {
  font-size: 28rpx;
  font-weight: 500;
}

js

// pages/login/index.js

const http = require("../../utils/http");

Page({

  /**
   * 页面的初始数据
   */
  data: {
    code: '',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    //登录
    wx.login({
      success (res) {
        if (res.code) {
          that.setData({code:res.code});
        } else {
          wx.showToast({
            title: res.errMsg,
            icon: 'none',
            duration: 2000
          });
        }
      }
    });
  },

  //回调
  userlogincall: function (user) {
    var that = this;
    if ("getUserInfo:ok" == user.detail.errMsg) {
      var loginData = {
        code: that.data.code,
        iv: user.detail.iv,
        encrypted_data: user.detail.encryptedData
      };
      //授权登录
      http.post('api/wxapp/login', loginData, function (res) {
        if (res.code != 0) {
          wx.showToast({
            title: res.msg,
            icon: 'none',
            duration: 2000
          });
        } else {
          wx.setStorageSync('token', res.data.token);
          wx.showToast({
            title: '登录成功',
            icon: 'success',
            duration: 1000
          });
          setTimeout(function(){
            wx.navigateBack({
              delta: 1
            });
          },1500);
        }
      });
    } else {
      wx.showToast({
        title: user.detail.errMsg,
        icon: 'none',
        duration: 2000
      });
    }
  },

  //取消授权放回上一页
  cencel: function() {
    wx.navigateBack({
      delta: 1
    });
  }

})

效果图