@微信小程序------用户登录界面练习(初次写博客，请大家多多包涵，多多指教)
经过对微信小程序的初步学习，大致可以将微信小程序分为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>
界面:
[1]: http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference
[2]: https://mermaidjs.github.io/
[3]: https://mermaidjs.github.io/
[4]: http://adrai.github.io/flowchart.js/
