@微信小程序------用戶登錄界面練習(xí)(初次寫博客，請大家多多包涵，多多指教)
經(jīng)過對微信小程序的初步學(xué)習(xí)，大致可以將微信小程序分為js文件，json文件，wxml文件和wxss文件。
與Android相似，微信小程序?qū)?shù)據(jù)，布局以及邏輯分開。
1.js文件用于小程序的數(shù)據(jù)內(nèi)容，數(shù)據(jù)的定義，函數(shù)的構(gòu)建都在js文件中設(shè)計。
2.wxml文件用于小程序的邏輯開發(fā)，小程序的組件在wxml文件中定義，wxml文件的代碼與html語法相似，其中view組件可以看做div盒子。
3.wxss文件用于小程序的布局，wxss文件與css語法相似。
用戶登錄界面代碼：
//T-2.json：
{
"usingComponents": {}
}
//T-2.js
const app = getApp()
Page
? (
? {
? ? /**
? ? * 頁面的初始數(shù)據(jù)
? ? */
? ? data:
? ? {
? ? ? tt1:"user? ? ",
? ? ? tt2:"password",
? ? ? tt3: "Login",
? ? ? tt4: "register",
? ? ? x:"",
? ? ? y:""
? ? },
? ? /**
? ? * 生命周期函數(shù)--監(jiān)聽頁面加載
? ? */
? ? onLoad: function (options) {
? ? },
? ? /**
? ? * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ? */
? ? onReady: function () {
? ? },
? ? /**
? ? * 生命周期函數(shù)--監(jiān)聽頁面顯示
? ? */
? ? onShow: function () {
? ? },
? ? /**
? ? * 生命周期函數(shù)--監(jiān)聽頁面隱藏
? ? */
? ? onHide: function () {
? ? },
? ? /**
? ? * 生命周期函數(shù)--監(jiān)聽頁面卸載
? ? */
? ? onUnload: function () {
? ? },
? ? /**
? ? * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
? ? */
? ? onPullDownRefresh: function () {
? ? },
? ? /**
? ? * 頁面上拉觸底事件的處理函數(shù)
? ? */
? ? onReachBottom: function () {
? ? },
? ? /**
? ? * 用戶點擊右上角分享
? ? */
? ? onShareAppMessage: function () {
? ? },
? ? //自定義user函數(shù)，用于獲取輸入框的數(shù)據(jù)
? ? user:function(e)
? ? {
? ? ? var name = e.detail.value;//獲取input的輸入數(shù)據(jù)
? ? ? this.setData({ x: name })//將輸入的數(shù)據(jù)賦值給x
? ? },
? ? //自定義password函數(shù)，用于獲取輸入框的數(shù)據(jù)
? ? password:function(e)
? ? {
? ? ? var pass = e.detail.value;//獲取input的輸入數(shù)據(jù)
? ? ? this.setData({ y: pass })//將輸入的數(shù)據(jù)賦值給y
? ? },
? ? //自定義login函數(shù)，用于在點擊登錄按鈕時,根據(jù)用戶名和密碼的匹配進行對注冊按鈕內(nèi)容的改變,并跳轉(zhuǎn)到指定界面
? ? login:function(e)
? ? {
? ? ? if (this.data.x == "123456" && this.data.y=="123456")
? ? ? {
? ? ? ? this.setData({tt4:"success!"})
? ? ? ? wx.navigateTo
? ? ? ? (
? ? ? ? ? {
? ? ? ? ? ? url: '../Test1/test' // 跳轉(zhuǎn)到指定頁面
? ? ? ? ? }
? ? ? ? )
? ? ? }
? ? ? else
? ? ? {
? ? ? ? this.setData({ tt4: "fail!" })
? ? ? ? wx.navigateTo
? ? ? ? (
? ? ? ? ? {
? ? ? ? ? ? url: '../T-2/T-2' // 跳轉(zhuǎn)到指定頁面
? ? ? ? ? }
? ? ? ? )
? ? ? }
? ? },
? ? //自定義register函數(shù)，用于在點擊注冊按鈕時跳轉(zhuǎn)到指定界面
? ? register:function(e)
? ? {
? ? ? wx.navigateTo
? ? ? (
? ? ? ? {
? ? ? ? ? url: '../JSJ/JSJ' // 跳轉(zhuǎn)到指定頁面
? ? ? ? }
? ? ? )
? ? }
? }
? )
//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/
