@微信小程序------用户登录界面练习(初次写博客,请大家多多包涵,多多指教)[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)