微信小程序------用户登录界面练习

@微信小程序------用户登录界面练习(初次写博客，请大家多多包涵，多多指教)[TOC]
经过对微信小程序的初步学习，大致可以将微信小程序分为js文件，json文件，wxml文件和wxss文件。
与Android相似，微信小程序将数据，布局以及逻辑分开。
1.js文件用于小程序的数据内容，数据的定义，函数的构建都在js文件中设计。
2.wxml文件用于小程序的逻辑开发，小程序的组件在wxml文件中定义，wxml文件的代码与html语法相似，其中view组件可以看做div盒子。
3.wxss文件用于小程序的布局，wxss文件与css语法相似。
用户登录界面代码：
//T-2.json：
{
“usingComponents”: {}
}
//T-2.js
const app = getApp()
Page
(
{
/**
* 页面的初始数据
*/
data:
{
tt1:“user “,
tt2:“password”,
tt3: “Login”,
tt4: “register”,
x:””,
y:""
},

	    /**
	     * 生命周期函数--监听页面加载
	     */
	    onLoad: function (options) {
	
	    },
	
	    /**
	     * 生命周期函数--监听页面初次渲染完成
	     */
	    onReady: function () {
	
	    },
	
	    /**
	     * 生命周期函数--监听页面显示
	     */
	    onShow: function () {
	
	    },
	
	    /**
	     * 生命周期函数--监听页面隐藏
	     */
	    onHide: function () {
	
	    },
	
	    /**
	     * 生命周期函数--监听页面卸载
	     */
	    onUnload: function () {
	
	    },
	
	    /**
	     * 页面相关事件处理函数--监听用户下拉动作
	     */
	    onPullDownRefresh: function () {
	
	    },
	
	    /**
	     * 页面上拉触底事件的处理函数
	     */
	    onReachBottom: function () {
	
	    },
	
	    /**
	     * 用户点击右上角分享
	     */
	    onShareAppMessage: function () {
	
	    },
	    //自定义user函数，用于获取输入框的数据
	    user:function(e)
	    {
	      var name = e.detail.value;//获取input的输入数据
	      this.setData({ x: name })//将输入的数据赋值给x
	    },
	    //自定义password函数，用于获取输入框的数据
	    password:function(e)
	    {
	      var pass = e.detail.value;//获取input的输入数据
	      this.setData({ y: pass })//将输入的数据赋值给y
	    },
	    //自定义login函数，用于在点击登录按钮时,根据用户名和密码的匹配进行对注册按钮内容的改变,并跳转到指定界面
	    login:function(e)
	    {
	      if (this.data.x == "123456" && this.data.y=="123456")
	      {
	        this.setData({tt4:"success!"})
	        wx.navigateTo
	        (
	          {
	            url: '../Test1/test'　　// 跳转到指定页面
	          }
	        )
	      }
	      else
	      {
	        this.setData({ tt4: "fail!" }) 
	        wx.navigateTo
	        (
	          {
	            url: '../T-2/T-2'　　// 跳转到指定页面
	          }
	        )
	      }
	    },
	    //自定义register函数，用于在点击注册按钮时跳转到指定界面
	    register:function(e)
	    {
	      wx.navigateTo
	      (
	        {
	          url: '../JSJ/JSJ'　　// 跳转到指定页面
	        }
	      )
	    }
	  }
	  )
	//T-2.wxss
		.p1
		{
		  justify-content: flex-start;
		  border-style: solid;
		  border-width:2px;
		  border-color:blanchedalmond;
		  width:15rem;
		  height: 1.5rem;
		  margin-left:90rpx;
		  margin-top: 24rpx;
		}
		.p2
		{
		  width: 40%;
		  justify-content: flex-start;
		  margin-left: 200rpx;
		  margin-top: 20rpx;
		}
	//T-2.wxml
		<view>
	  <image style="width: 300px; height: 200px; margin:30px;" mode="scaleToFill" src="../../pages/img/test.png">
	  </image>
	    <input type='text' placeholder='{{tt1}}' class='p1' bindinput='user'>
	    </input>
	    <input type='password'placeholder='{{tt2}}'class="p1" bindinput='password'>
	    </input>
	       <button style='primary' class='p2' bindtap='login'>
	        {{tt3}}
	      </button>
	      <button style='primary' class='p2' bindtap='register'>
	        {{tt4}}
	      </button>
	</view>
界面:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190309215647775.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3OTg1Ng==,size_16,color_FFFFFF,t_70)