开始

微信小程序案例

案例效果图

代码

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)}})