微信小程序的简介

首先你要先创建一个项目，在这里我创建的项目叫做 —登录—
整理逻辑

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

app.json文件的配置

在配置index.wxss的时候，对于这个项目，首先我们还应该先去配置全局的wxss文件。即app.json，如下。

.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布局，因为每个人的手机尺寸不一样，我们不能用绝对定位和相对定位去布局我们的界面，如果那样的话用户如果用了不同尺寸的屏幕带来的视觉效果会非常不好，所以这里我们就用了要学小程序基本上是必须要会的flex布局。
就以上面的那段代码为例子吧。
上述代码的意思为 1.采用flex布局 2.制定元素纵向排列为主轴 3.交叉轴中点对齐，在这里也就是指的水平排列 4.主轴采用的是左对齐的方式 5.然后内边距为向上70rpx，这里的rpx和px类似。
但是其实上面代码还有一个比较重要的属性是box-sizing: border-box

下面就来介绍一下box-sizing：border-box属性吧

box-sizing:border-box

在这里举一个例子介绍一下box-sizing: border-box;的使用吧.
我们要设计一个五列的布局，每一列的margin为4%，那么可以这样。

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

效果就如同上图所示，这样写确实没有任何毛病，但是当每天让你写的这个人吧让你在一个上面都加上边框，你会想。哎，不就是这样嘛。

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

但是，想的挺美，显示却格外残酷。

真实的效果是这样的。

在这里插入图片描述
你会发现第五个因为你加了边框就被顶了下去，我的天啊，这完全不符合让你写的那个人的意思啊，这可如何还好啊。

那么此时box-sizing：border-box就能帮助我们解决这一切，当你把这条属性加上去后，你就会发现最后效果又如同上面那样五列很整齐的效果了，即使如果你要在五列里面加上文字时，避免不了要设置padding属性，也不会影响五列的排布，那么这就是box-sizing:border-box的用法了。

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

index.wxml与index.wxss的效果
app.json的配置

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

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

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

{
  "navigationBarTitleText":"首页"
}

9.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 == '123' && this.data.password == '123') {
      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 != '123'){
      console.log("您输入的手机号不对");
      this.setData({phonenumber:''});
      console.log(this.data.phonenumber);
      this.setData({ PhoneNumber:"Please re-enter the phonenumber"});
    } else if (this.data.phonenumber == '123' && this.data.password != '123') {
      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来判断了，逻辑就是这样。

我只说一下核心最关键的：

如果成功跳转页面的话，一定要用wx.redirectTo进行跳转为什么呢？其实目前我知道跳转一共有两个，一个是wx.navigateTo跳转，一个是wx.redirectTo跳转，但是两者的区别就是第一个是能返回的，你做登录页面，登录成功了再一不小心点了返回，那么不就白登录了嘛，所以这里用的是wx.redirectTo跳转。
就是如果错了之后你要清空输入框并且提示，这个一开始我也不会，后来师兄教我，这里最关键的一点就是，你在后台如果错误了，通过setData赋值为空的时候，确实后台的话该数据为空了，但是前台不会改变，你一定要在前台对应代码的地方加上value=“{{该数据名}}”,那么就能实现前后台的同步了。

此时所有的逻辑就结束了，这就是所谓的登录界面，比较简陋，仅做参考。

微信小程序（二）登录界面

目录

猜你喜欢