微信小程序-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