微信程序开发.小程序框架

一、创建登录页面搭建

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