一、创建登录页面搭建
1、登录界面login.wxml
<view class="container"> <!-- <text>You are so beautiful</text> <text>{{m}}</text>--> <image src="/asset/1.png" mode="aspectFit"></image> </view> <view> <form bind:submit="aa" bind:reset="bb"> <label>用户名</label> <input value="{{user.username}}" bind:input="bindName" type="text" placeholder="请输入用户名" maxlength="10"></input> <label>密码</label> <input value="{{user.password}}" bind:input="bindPassword" password="true" placeholder="请密码"></input> <button form-type="submit">登录</button> <button form-type="reset">清空</button> <label>爱好</label> <checkbox-group> <checkbox>打羽毛球</checkbox> <checkbox>打篮球</checkbox> <checkbox checked="{{true}}" color="#FF0000">打</checkbox> </checkbox-group> <radio-group> <radio value="男" checked="{{true}}" >男</radio> <radio value="女">女</radio> </radio-group> <picker-view style="height:300px"> <picker-view-column> <view>湖南</view> <view>湖北</view> <view>云南</view> </picker-view-column> </picker-view> </form> </view> <view> {{user.username}} </view>
2、登录布局wxss
image{ width: 400px; height: 400px; border-radius: 50%; } .mage{ display:flex; /*设置为flex布局*/ justify-content: center; /*水平居中*/ } .container{ display:flex; /*设置为flex布局*/ justify-content: center; /*水平居中*/ }
3、login.js
Page({ data: { m:"噜啦噜啦", user:{ username:"", password:"" } }, bindName(e){ //arguments是函数的参数 //console.log(arguments) // console.log(e.detail.value) console.log(this.data.user) this.setData({ "user.username":e.detail.value }) }, bindPassword(e){ this.setData({ "user.password":e.detail.value }) }, aa(){ wx.showToast({ title:"xx", icon:"success" }) }, bb(){ this.data.user.username="", this.data.user.password="" } });