1. 程式人生 > >微信小程式-03登陸demo

微信小程式-03登陸demo

登陸頁面

<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