专栏首页编程坑太多「小程序JAVA实战」小程序注册界面的开发(29)

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

小程序基本所有的常用组件已经了解的差不多了,基本可以实战了,本次就开始小程序的真正实战,完成小程序的一个注册页面的设计。源码: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:这个就是简单的注册页面,其实很多元素我也抄的网上的,但是要理解这个设计的思路很理念,别搬砖都不知道去哪里找,那就尴尬了。

本文分享自微信公众号 - 编程坑太多(idig88)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-12-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 「小程序JAVA实战」小程序的视图组件(23)

    IT故事会
  • 「小程序JAVA实战」小程序模块页面引用(18)

    1.js代码块可以在页面中被引入使用 2.定义*.wxs,module.exports暴露接口和属性

    IT故事会
  • 「小程序JAVA实战」小程序视图之条件判断(15)

    IT故事会
  • 动手开发一个名为“微天气”的微信小程序(上)

    在一套软件系统中,微信小程序通常是作为前端来使用的,一般还需要有后端的系统提供支持,这就需要开发者(或运营者)购买云服务器(或有自己的独立主机),将后端系统部署...

    博文视点Broadview
  • 微信小程序|标签页内容完善

    在我们浏览类似一个电影信息页面时,会遇到进行多个页面多种选择情况,每个标签栏都对应不同信息的情况,而其中图文组合布局、九宫格布局、以及搜索框都是必不可少的。

    算法与编程之美
  • 移动开发之响应布局

    Bootstrap来自Twitter(推特),是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的,它简介灵活,使得Web...

    梨涡浅笑
  • 小文’s blog – WordPress自定义字体

    神无月
  • SASS第七篇 SASS中带参数混合

    用户7873631
  • android-ramdisk.img分析、recovery.img&boot.img执行过程【转】

    ramdisk通过直面意思就大概能理解意思,ram disk虚拟内存盘,将ram模拟成硬盘来使用的文件系统。对于传统的磁盘文件系统来说,这样做的好处是可以极大提...

    233333
  • SAP Spartacus cx-split-view几个css属性值的逻辑依赖关系

    active-view: 1 整个split view的style:–cx-active-view:1

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券