WeChat program development. Small program framework

1. Create a login page

1. Login interface 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="Please password"></input> 
        <label>Hobby</label>
        <button form-type="reset">Clear</button >
        <button form-type="submit">Login</button>
        <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. Login layout wxss 

image{ 
    width: 400px; 
    height: 400px; 
    border-radius: 50%; 
} 
.mage{ 
    display:flex; /*Set to flex layout*/ 
    justify-content: center; /*Horizontal centering*/ 
} 
.container{ 
    display :flex; /*Set to flex layout*/ 
    justify-content: center; /*Horizontally centered*/ 
}

 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=""
    }
});