微信小程序之实现登陆

18648165727

发布于 2019.02.28 16:54 阅读 2790 评论 0

首先我们要实现简单微信小程序登录，下面是制作该功能的过程

1.首先你要先创建一个项目，在这里我创建的项目叫做 ---登录---

2.首先先整理一下逻辑，首先要存在一个首页，然后，在首页进行操作，输入对应的数据，然后后台对输入的数据进行判断，如果输入正确的话，那么跳转到个人中心页面，如果失败的话，那么提示输入失败并且把之前输入的值清空提示让用户重新输入。

3.逻辑整理完毕，下面开始正统步骤

先进行首页的书写

4.先配置WXML页面

<image src="../../images/bg2.png" mode="aspectFill" class="bgImg"></image>

<view class="container">
  <image src="../../images/logo.png" mode="aspectFit	" class="logo"></image>
  
  <view class="signTitle">login</view>
  <view class="whiteLine"></view>

  <block>
    
    <input type="number" bindinput="bindNumInput"  placeholder="{{PhoneNumber}}" placeholder-class="ph" value="{{phonenumber}}"/>
    <input type="text" bindinput="bindPsdInput"  placeholder="{{Password}}" placeholder-class="ph" password="true" value="{{password}}"/>
  </block>

  <button class="loginBtn" bindtap="loginSubmit" plain="true" >Login</button>
  <view class="footer">weixin login</view>
</view>

在这里用到了两张图，如下

5.配置好了WXML，让主题的页面先呈现出来，那么此时书写WXSS文件，那么在配置index.wxss文件前，首先先配置app.wxss文件，作为全局的wxss属性调控。

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 70rpx 0 0 0;
  box-sizing: border-box;
}

在这里详细的解读一下为什么这么写：

在这里采用的是微信小程序的布局核心，也就是flex布局。

上述代码的意思为 1.采用flex布局 2.制定元素纵向排列为主轴 3.交叉轴中点对齐，在这里也就是指的水平排列 4.主轴采用的是左对齐的方式 5.然后内边距为向上70rpx，这里的rpx和px类似

6.在这里特别的介绍一个同样对微信小程序界面起很关键作用的一个属性box-sizing: border-box

在这里举一个例子介绍一下box-sizing: border-box;的使用吧

我们要设计一个五列的布局，每一列的margin为4%，那么可以这样。

.column{ 
   width:16%; 
   margin: 2% 2%;
   float: left;
   background: #03a8d2;  
}

最后的效果是这样的。

那么当某一天一个人说，你赶紧把这五列每一个都加上一个2px的边框，那么，其实也很简单，但是，加上之后你就会发现一件事，如图。

你就会发现加上边框之后因为左浮动，第五列到了最下面，这很显然非常的不美观，也不是我想要的，那么该怎么办呢，我也不想去在重新修改之前设定好的比例了，那么box-sizing: border-box能帮助我们解决这件事情。

.column{ 
    width: 16%; 
    margin: 2% 2%; 
    float: left; 
    background:#03a8d2; 
    border: 2px solid black; 
    box-sizing: border-box; 
}

在最后面加上这一句代码就非常简单的解决了这个困扰我们的问题了。

最后效果又如同上面那样五列很整齐的效果了，即使如果你要在五列里面加上文字时，避免不了要设置padding属性，也不会影响五列的排布，那么这就是box-sizing:border-box的用法了。

7.配置好全局的app.wxss文件之后呢，那么你就去配置你的登录页面的index.wxss吧。

/**index.wxss**/

.container {
  opacity: 0.75;/*透明度*/
  background: -webkit-linear-gradient(top, #330033 0%,#CCCCCC 100%);
  background: -o-linear-gradient(top, #330033 0%,#CCCCCC 100%);
  background: -ms-linear-gradient(top, #330033 0%,#CCCCCC 100%);
  background: linear-gradient(to bottom, #330033 0%,#99CCFF 100%);
  /*渐变的底部书写格式为to bottom*/
}
.bgImg {
  z-index: -1;/*背景图的设置，一定要小于1，不然无法实现图片的重叠*/
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
}

.logo {
  width: 300rpx;
  height: 300rpx;
}

.signTitle {
  color: #fff;
  display: flex;
  margin: 80rpx 0 30rpx 0;
  /*上右下左*/
}

.whiteLine {
  height: 5rpx;
  background-color: #fff;
  width: 40%;
  border-radius: 20rpx;
}

input {
  color: #fff;
  width: 60%;
  height: 100rpx;
  border: 3rpx #fff solid;
  border-radius: 10rpx;
  margin-top: 50rpx;
  padding: 5px 15px;
  text-align: center;
  line-height: 150rpx;
  /**/
}

.ph {
  color: #eee;
}
.loginBtn {
  width: 68%;
  height: 90rpx;
  margin-top: 75rpx;
  border: 5rpx #fff solid!important;
  color: #fff!important;
  text-align: center;
  line-height: 90rpx;
  margin-bottom: 75rpx;
}
.footer {
  display: flex;
  position: fixed;
  color: #fff!important;
  bottom: 20rpx;
  font-size: 22rpx;
  text-align: center;
}

8.上面的代码就是关于登录页面的调整了，结合index.wxml你就能实现这样的效果。

9.如果你真的按照我的代码这样做，那么很好，不过你会发现一些小小的细节的，我的登录页面的导航部分写着首页，你的却和我不一样，这是为什么呢？

我们都知道，存在app.json这个文件吧，这个文件有什么作用呢，其实吧，这个文件可以把你的页面导入app里面，并且可以设置一些关于app最基本的参数，这里你可以去看看这个页面微信小程序文档，这里有关于app.json最基本的配置，当然不止这两个功能，比如还能加入导航页，tabBar就是加入导航页。

这时你只需要在index.json改为这样就可以了，如代码

{
  "navigationBarTitleText":"首页"
}

此时你的页面就和我上面的图一样了。

10.这时候到了最关键的一部分了，也就是功能的设定，代码如下

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    phonenumber: '',
    password: '',
    PhoneNumber:'PhoneNumber',
    Password:'Password',
  },
  //事件处理函数
  bindNumInput: function(e) {
    this.setData({
      phonenumber: e.detail.value
    })
    console.log(this.data.phonenumber)
  },
  bindPsdInput: function(e) {
    this.setData({
      password: e.detail.value
    })
    console.log(this.data.password)
  },
  
  loginSubmit: function(e) {
    if(this.data.phonenumber == '18648165727' && this.data.password == 'nhs716NHS716') {
      console.log("Success");
      wx.redirectTo({
        url: '../../pages/main/main',
      })
    }else if(this.data.phonenumber == '') {
      this.data.numShow = true;
      console.log("phonenumber不能为空")
    }else if(this.data.password == '') {
      this.data.psdShow = true;
      console.log("password不能为空")
    }else if(this.data.phonenumber != '18648165727'){
      console.log("您输入的手机号不对");
      this.setData({phonenumber:''});
      console.log(this.data.phonenumber);
      this.setData({ PhoneNumber:"Please re-enter the phonenumber"});
    } else if (this.data.phonenumber == '18648165727' && this.data.password != 'nhs716NHS716') {
      console.log("您输入的密码不对");
      this.setData({ password: '' });
      console.log(this.data.password);
      this.setData({ Password: "Please re-enter your password" });
    }
    
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
  	//登录
  
  }
})

你会发现这里有大量的函数和数据，我来简单的说明一下。

phonenumber代表你输入的电话信息，输入后会通过bindNumInput函数传入你输入的值，怎么传入的，操作试试看，bindinput是一行行的存入的，同理，password代表的是用户传入的密码信息，通过bindPsdInput函数传入。然后让我们到最关键的loginSubmit函数中来，那么这里就需要通过if来判断了，逻辑就是这样，我只说一下核心最关键的，1.如果成功跳转页面的话，一定要用wx.redirectTo进行跳转为什么呢？其实目前我知道跳转一共有两个，一个是wx.navigateTo跳转，一个是wx.redirectTo跳转，但是两者的区别就是第一个是能返回的，你做登录页面，登录成功了再一不小心点了返回，那么不就白登录了嘛，所以这里用的是wx.redirectTo跳转。

2.就是如果错了之后你要清空输入框并且提示，这个一开始我也不会，后来师兄教我，这里最关键的一点就是，你在后台如果错误了，通过setData赋值为空的时候，确实后台的话该数据为空了，但是前台不会改变，你一定要在前台对应代码的地方加上value=“{{该数据名}}”,那么就能实现前后台的同步了。

11.在上面的代码部分你们也看到了，我跳转到了一个新的页面，那你就需要去把新的页面写出来，我的新页面的文件夹叫做main

代码如下

<!--index.wxml-->
<view class="container">
  <view  bindtap="onButtonTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="user-motto">
    <text class="user-motto-font">{{motto}}</text>
  </view>
</view>

/**index.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;/*确定主轴为垂直方向*/
  align-items: center;/*交叉轴中点对齐*/
  justify-content: space-between;/*两端对齐，项目与项目之间都相等*/
  padding: 200rpx 0;
  box-sizing: border-box;
}
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userinfo-nickname {
  color: #aaa;
}
.user-motto{
  margin-top: 300rpx;
}
.user-motto-font{
  font-size: 60rpx;
  font-weight: 600;
  color: red;
}

<!--main.json-->
{
  "usingComponents": {}
}

<!--main.js-->
var app = getApp()
Page({
  data: {
    motto: '个人中心',
    userInfo: {}
  },
  onButtonTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('hahah');
    var that = this
  	//登录
    wx.login({
      success: function () {
        wx.getUserInfo({
          success: function (res) {
            that.setData({userInfo: res.userInfo});
          }
        })
      },
      fail: function (res) {
        console.log(res)
      }
    });
  }
})

这个main基本和index差不多，就不多做解释，主要说一下其中有一个userInfo，这个是什么呢，是你自己的用户信息，在onLoad函数里面，wx.login里面有着获取用户信息的代码。

按照上面的代码除了头像和用户名不一样，剩下应该都差不多。

12.在这里呢，我设置了一个点击事件，点击后跳转到logs页面，也就是启动日志，基本和前面差不多。

那么终于，我们的登录微信小程序就完成了。

发表评论