小程序登录页
小程序前端项目做多了之后会发现,授权界面一直都是不一样,每次可能还要自己手写一个出来,现在整理了一个跳转页面方式页面逻辑的页面。
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>
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
});
}
})
效果图