「小程序JAVA实战」小程序注册界面的开发(29)

转自:https://idig8.com/2018/08/27/xiaochengxujavashizhanxiaochengxuzhucejiemiandekaifa29/

小程序基本所有的常用组件已经了解的差不多了,基本可以实战了,本次就开始小程序的真正实战,完成小程序的一个注册页面的设计。源码:https://github.com/limingios/wxProgram.git 中的No.15

技术分享图片

 

开发最重要的就是实操!

开发人员很少人懂美工

我就懂css 其实也设计不出来什么好看的,在网上找了个参照物,自己自己模仿这搞了下

  • 创建一个新项目删除其中初始化的一些无用的项目。

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‘> <!--账号--> <view class="inputView"> <image class="nameImage" src="../../resource/images/username.png"></image> <label class="loginLabel">账号</label> <input name="username" type="text" 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" type="text" 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>

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; // 简单验证 if (username.length == 0 || password.length == 0) { wx.showToast({ title: ‘用户名或密码不能为空‘, icon: ‘none‘, duration: 3000 }) } }, goLoginPage:function(e){ console.log("跳转到登录"); }})
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;}

PS:这个就是简单的注册页面,其实很多元素我也抄的网上的,但是要理解这个设计的思路很理念,别搬砖都不知道去哪里找,那就尴尬了。

相关文章