0
点赞
收藏
分享

微信扫一扫

安卓开发学习---kotlin版---笔记(三)

东言肆语 2023-12-21 阅读 51

微信小程序实现一个简单的登录功能

功能介绍

login.wxml

<view class="container">
  <input bindinput="inputUsername" placeholder="请输入用户名" />
  <input bindinput="inputPassword" placeholder="请输入密码" type="password" />
  <button bindtap="login">登录</button>
  <text class="error">{{errorMessage}}</text>
</view>

login.js

Page({
  data: {
    username: '',
    password: '',
    errorMessage: ''
  },
  inputUsername: function(e) {
    this.setData({
      username: e.detail.value
    })
  },
  inputPassword: function(e) {
    this.setData({
      password: e.detail.value
    })
  },
  login: function() {
    // 假设验证逻辑为:用户名和密码都为"admin"时才验证通过
    if (this.data.username === 'admin' && this.data.password === 'admin') {
      wx.navigateTo({
        url: '/pages/userInfo/userInfo?username=' + this.data.username
      })
    } else {
      this.setData({
        errorMessage: '用户名或密码错误'
      })
    }
  }
})

userInfo.wxml

<view class="container">
  <text>用户名:{{username}}</text>
  <image class="avatar" src="{{avatarUrl}}"></image>
</view>

userInfo.js

Page({
  onLoad: function(options) {
    this.setData({
      username: options.username,
      avatarUrl: 'https://example.com/avatar.png' // 假设这是用户头像的URL
    })
  }
})

解析

到这里也就结束了,希望对您有所帮助。

举报

相关推荐

0 条评论