微信小案例--登录

开始

微信小程序案例

案例效果图

代码

wxml

<!-- <view class="container">
    <view class="header">
        <image src="../../images/images/sign.png" />
    </view>
    <view class="inputs">
    <!--bindinput 用来获取input框的信息  
        <input class="username" value="{{username}}" placeholder="请输入用户名" bindinput="inputhandel" data-prop="username" />
        <input class="password" value="{{password}}" placeholder="请输入密码" type="password" bindinput="inputhandel" data-prop="password"/>
    </view>
    <view class="buttons">
    <!-- dlhandel 用于登录按钮 
        <button type="primary" bindtap="dlhandel">登录</button>
        <button type="default" >注册</button>
    </view>
</view> -->

js

// 第一版每个input对应一个bindinput方法
// const app = getApp()
// Page({
//     data:{
//       username:'admin',
//       password:'123'
//     },
//     // 登录事件
//     dlhandel:function (e){
        // console.log(e)
//     },
//     // username input事件
//     usernamehandel:function (e){
//       this.setData({
//         username: e.detail.value
//       })
//     },
//     // password input事件
//     passwordhandel:function (e){
//       this.setData({
//         password: e.detail.value
//       })
//     }
// })

第二版封装成一个方法 用prop添加了参数

// 第二版将两个bindinput封装成一个公共方法
// 将相同的方法封装成一个方法
// const app = getApp()
// Page({
//   data: {
//     username: 'admin',
//     password: '123'
//   },
//   // 登录事件
//   dlhandel: function(e) {
      // console.log(e)
//   },
//   // password input事件
//   inputhandel: function(e) {
//     // var prop = 'username'  可变的
//     var prop = e.target.dataset['prop']
//     var changed = {}
//     changed[prop] = e.detail.value
//     console.log(changed)
//     this.setData(changed)
//   }
// })

form表单提交

wxml 用for-type=“submit”

<!-- 表单提交 -->
<form bindsubmit="loginhandel">
<view class="container">
    <view class="header">
        <image src="../../images/images/sign.png" />
    </view>
    <view class="inputs">
    <!--bindinput 用来获取input框的信息  -->
        <input class="username" value="{{username}}" placeholder="请输入用户名" name="username"  />
        <input class="password" value="{{password}}" placeholder="请输入密码" type="password" name="password"/>
    </view>
    <view class="buttons">
    <!-- dlhandel 用于登录按钮 -->
        <button type="primary" form-type="submit">登录</button>
        <button type="default" >注册</button>
    </view>
</view>
</form>

js

// form 表单提交
const app = getApp()
Page({
  data: {
    username: 'admin',
    password: '123'
  },
  // 登录事件
  dlhandel: function (e) {
    console.log(e)
  },
  // 表单提交事件
  loginhandel:function (e){
    console.log(e)
  }
  
})