Development of "Small Program JAVA Actual Warfare" Small Program Registration Interface (29)

All the common components of the small program have been almost understood. It can be practically implemented. This time, we will start the real operation of the small program and complete the design of a registration page of the small program. Source: No.15 in https://github.com/limingios/wxProgram.git

 

The most important thing in development is practicality!

Few developers understand art

I knew css, but I couldn't design anything nice. I found a reference on the Internet, and I did it myself.

  • Create a new project to delete some of the useless items initialized in it.

userRegister.wxml

<view>
    <view class="login-icon">
        <image class="login-img" src="../../resource/images/dsp.jpg"></image>
    </view>
    <view class="login-from">
        <form bindsubmit='doRegist'>
            <!--Account number-->
            <view class="inputView">
                <image class="nameImage" src="../../resource/images/username.png"></image>
                <label class="loginLabel">Account number</label>
                <input name="username" type="text" class="inputText" placeholder="Please enter your account number."/>
            </view>

            <view class="line"></view>

            <!--Password-->
            <view class="inputView">
                <image class="keyImage" src="../../resource/images/password.png"></image>
                <label class="loginLabel">Password</label>
                <input name="password" type="text" class="inputText" password="{{true}}" placeholder="Please input a password"/>
            </view>

            <!--Button-->
            <view>
                <button class="loginBtn" type="primary" form-type='submit'>register</button>
            </view>

            <view>
                <button class="goLoginBtn" type="warn" bindtap="goLoginPage">Return to login</button>
            </view>
        </form>
    </view>
</view>

userRegister.js

const app = getApp()

Page({
    data: {

    },

    doRegist: function(e) {
      var me = this;
      var formObject = e.detail.value;
      var username = formObject.username;
      var password = formObject.password;

      // Simple verification
      if (username.length == 0 || password.length == 0) {
        wx.showToast({
          title: 'User name or password cannot be empty',
          icon: 'none',
          duration: 3000
        })
      }
    },
    goLoginPage:function(e){
      console.log("Jump to login");
    }
})
page {
    background-color: whitesmoke;
}

.login-img {
    width: 750rpx;
}

/*Form content*/
.inputView {
    background-color: white;
    line-height: 45px;
}

/*Input box*/
.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;
}

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

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

PS: This is a simple registration page, in fact, many elements I copied on the Internet, but to understand the idea of this design is very conceptual, do not move bricks do not know where to find, it would be embarrassing.

Original articles are welcome to be reproduced. Reprinted please note: reprinted from IT Story Club Thank you!
Link address of the original text: Development of "Small Program JAVA Actual Warfare" Small Program Registration Interface (29)

Tags: github git Java

Posted on Tue, 08 Oct 2019 13:09:34 -0700 by dyntryx