微信小程序登录界面实战-优快云博客

微信刚推出了“小程序”，可以说是在开发周期秒杀传统app，但是有利有弊，下面我把自己学习做的一个用户登录demo分享给大家。

项目结构如下所示：

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。

我们要写的页面是在pages里面自行编写，这次写的登录界面是在testForm.wxml进行布局的。代码如下：

<form bindsubmit="formSubmit" bindreset="formReset">
    
    <view class="section borderStyle">
        <view class="section__title">用户名</view>
        <input class="inputTop inputUser" name="input" placeholder="请输入用户名..." />
    </view>
    <view class="section borderStyle">
        <view class="section__title">密码</view>
        <input class="inputTop inputUser" name="input" placeholder="请输入密码..." />
    </view>
    <view class="section section_gap borderStyle">
        <view class="section__title sexBottom">性别</view>
        <radio-group name="radio-group">
            <label class="sexMargin"><radio value="radio1"/>男</label>
            <label><radio value="radio2"/>女</label>
        </radio-group>
    </view>
    <view class="btn-area buttonTop">
        <button class="buttonSubmit" formType="submit">提交</button>
        <button class="buttonDiv buttonColor" formType="reset">重置</button>
    </view>
</form>

写完界面我们可以在.wxss里面写项目的样式控制，和CSS一样的，相信有前端开发经验的很容易上手。

.borderStyle{
    margin-left: 50px;
    margin-top: 15px;
}

.buttonTop{
    margin-top: 30px;
}

.buttonDiv{
    margin-top: 10px;
}

.buttonColor{
    background-color: red;
    width: 300px;
}

.buttonSubmit{
    background-color: grey;
    width: 300px;
}

.inputUser{
  
    border: 1px solid darkcyan;
    height: 40px;
    width: 290px;
}

.inputTop{
    margin-top: 5px;
}

.sexMargin{
    margin-right: 20px;
}

.sexBottom{
    margin-bottom: 5px;
}

基本一个小demo写完了，想看的可以下载我的源码自己看