【小程序 登录授权页面】
文章图片
login.wxml
申请获取以下权限
获得你的公开信息（昵称、头像等）
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 = https://www.it610.com/article/{
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"
}
推荐阅读
- 微信|微信小程序初探【类微信UI聊天简单实现】
- 程序员|用Python快速实现一个垃圾分类APP|附带微信小程序
- 微信小程序|微信小程序的逆向
- 微信小程序|微信小程序——简单饮食推荐（三）
- 微信小程序|微信小程序项目实例——备忘录
- 微信小程序|微信小程序项目实例——飞机大战
- 微信小程序|微信小程序笔记
- 餐饮小程序怎么做
- 微信小程序地址位置定位wx.getLocation 4G 与WIFI 不一致