微信小程式-03登陸demo
阿新 • • 發佈:2018-11-13
登陸頁面
<view> <form bindsubmit='login'> <label>賬號:</label> <input name='username'></input> <label>密碼:</label> <input name='password'></input> <button form-type='submit'>登陸</button> <text>{{msg}}</text> </form> </view>
頁面js
對應data
data: {
username:'',
password:'',
msg:''
},
對應函式
login:function(e){ const that = this; let first, second; //第一種賦值方式 this.data.username= e.detail.value.username, this.data.password = e.detail.value.password //登陸成功 if(this.data.username=="user" && this.data.password=="123456"){ console.log("login success!!") //跳轉傳值 wx.navigateTo({ url: '/pages/main/main?username='+this.data.username }) }else{ //第二種賦值方式 this.setData({ msg:'使用者名稱或密碼錯誤請重試!!' }) } }
登陸成功頁面
<!--pages/main/main.wxml-->
<view>
<view> <text>login success!!!</text></view>
<view><text>welcome {{username}}!!!</text></view>
</view>
/** * 生命週期函式--監聽頁面載入 */ //注意是在onLoad裡面寫的 不是自定義的函式,系統有自動生成的 onLoad: function (options) { //這裡必須用這種賦值方式,否則頁面不進行顯示,執行先後問題吧 this.setData({ username: options.username, }) console.log(this.data.username) },
效果
測試賬號 user - 123456