微信小程序简单的登录页面的跳转以及获取登录人信息并传值

微信小程序简单的登录页面的跳转以及获取登录人信息并传值

1、首先一个简单的需求：微信小程序登录后，获取用户的信息，跳转到主页面，点击个人中心时，页面显示用户的个人信息。

2、文件夹目录

 login文件夹主要存放有关登录的操作和页面：

wxml页面代码：

<!--miniprogram/pages/login.wxml-->
<view class="login-container"><view class="title">微信小程序App</view><view class="login-box"><label>用户名</label><input placeholder='账号/手机号/微信/QQ' name="username" value='1433223'></input><label>密码</label><input password='true' name="pwd" value='123456'></input><button bindtap="login" class="login-btn" form-type='submit'>立即登录</button><view class="three-line">------第三方登录------</view><button class="login-btn" style="background-color:green">微信登录</button></view>
</view>

 wxss页面样式：

/* pages/login/login.wxss */
page{height: 100%;    /* 使用page的height可以使页面占全屏 */background-color: #fafafa;}
.login-container{padding: 0 10%;height: 100%;
}
.title{font-size: large;text-align: center;padding-top: 10%;font-weight: bold;
}
.login-box{margin-top: 10%;padding: 10% 5%;background-color: white;border-radius: 10px;box-shadow: 0 4px 4px #888888;
}
.login-box>input{margin: 5% 0 8% 0;border-bottom: 1rpx solid lightgray;
}
.login-btn{width: 100%!important;background-color: #2f6afd;color: white;font-weight: normal;
}.three-line{margin: 8% 0;text-align: center;font-size: 12px;color: gray;
}

 login.js页面代码：

Page({login: function(){//跳转到底部tabBar页面wx. switchTab({      url: '/pages/index/index'});//调用微信api接口，获取登录人信息wx.getUserInfo({success: function(res) {console.log(res);// 获取成功后，存储到storagewx.setStorage({data: res.userInfo,key: 'userInfo',})}})}
}

person页面的wxml代码：

<!--pages/person/index.wxml-->
<!--pages/personinfo/personinfo.wxml-->
<view class="container"><view class="info-box"><view style="text-align: center;margin-bottom:10%;"><image class="avatar-img" src="{{avatarUrl}}" /></view><text>昵称： {{nickName}}</text><text>性别： {{gender}}</text><text>国家： {{country}}</text><text>省份： {{province}}</text></view></view>

person中的js代码：

// pages/person/index.js
Page({/*** 页面的初始数据*/data: {nickName : "",avatarUrl : "",gender : "",province : "",city : "",country : ""},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//获取storage中存放的用户信息var userInfo = wx.getStorageSync('userInfo');var that = this;der ==0){der = '未定义'}else der ==1){der = '男'}else {der = '女'}//给data中数据赋值that.setData({   nickName : userInfo.nickName,avatarUrl:userInfo.avatarUrl,gender: der,province: userInfo.province,city: userInfo.city,country: untry}) }
})

上图：登录界面：