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

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);

        // 获取成功后，存储到storage

        wx.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;
    if(userInfo.gender ==0){
      userInfo.gender = '未定义'
    }else if(userInfo.gender ==1){
      userInfo.gender = '男'
    }else {
      userInfo.gender = '女'
    }

      //给data中数据赋值

    that.setData({   
      nickName : userInfo.nickName,
      avatarUrl:userInfo.avatarUrl,
      gender: userInfo.gender,
      province: userInfo.province,
      city: userInfo.city,
      country: userInfo.country
    }) 
  }
})

上图：登录界面：