第5章：开发用户登录注册与用户信息（5-2 用户注册页面）

学习目标：

5-2 用户注册页面

---

学习内容：

1、首先将图片资源文件导入到小程序中：

2、设计用户注册、登录页面：

1）在pages文件夹中新建一个userRegist文件夹设计用户注册页面：

2）在app.json中配置好页面路径：

3）编写regist.wxml页面代码（WXML即 WeiXin Markup Language是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构）：

代码如下：

<view>
    <view class="login-icon">
        <image class="login-img" src="../resource/images/dsp.jpg"></image>
    </view>
    <view class="login-from">
        <form bindsubmit='doRegist'>
            <!--账号-->
            <view class="inputView">
                <image class="nameImage" src="../resource/images/username.png"></image>
                <label class="loginLabel">账号</label>
                <input name="username" class="inputText" placeholder="请输入账号"/>
            </view>
            
            <view class="line"></view>

            <!--密码-->
            <view class="inputView">
                <image class="keyImage" src="../resource/images/password.png"></image>
                <label class="loginLabel">密码</label>
                <input name="password" class="inputText" password="true" placeholder="请输入密码"/>
            </view>

            <!--按钮-->
            <view>
                <button class="loginBtn" type="primary" form-type='submit'>注册</button>
            </view>

            <view>
                <button class="goLoginBtn" type="warn" bindtap="goLoginPage">返回登录</button>
            </view>
        </form>
    </view>
</view>

示意图如下：

4）编写regist.wxss代码（WXSS 即WeiXin Style Sheets是一套样式语言，用于描述 WXML 的组件样式，WXSS 用来决定 WXML 的组件应该怎么显示）：

代码如下：

page {
     
    background-color: whitesmoke;
}

.login-img {
     
    width: 750rpx;
}

/*表单内容*/
.inputView {
     
    background-color: white;
    line-height: 45px;
}

/*输入框*/
.nameImage, .keyImage {
     
    margin-left: 22px;
    width: 20px;
    height: 20px;
}

.loginLabel {
     
    margin: 15px 15px 15px 10px;
    color: gray;
    font-size: 15px;
}

.inputText {
     
    float: right;
    text-align: right;
    margin-right: 22px;
    margin-top: 11px;
    font-size: 15px;
}

.line {
     
    width: 100%;
    height: 1px;
    background-color: gainsboro;
    margin-top: 1px;
}

/*按钮*/
.loginBtn {
     
    width: 80%;
    margin-top: 35px;
}

.goLoginBtn {
     
    width: 80%;
    margin-top: 15px;
}