微信小程序登录注册界面

微信小程序登录注册界面

第一次接触微信小程序的开发，首先就是从前端的界面开始，我要做的是一个农场管理的微信小程序，大致包括登录、注册、主要功能界面这些，这里我就分享一下我的登录注册界面的设计和功能实现

Pages中的代码构成：xxx.js、xxx.json 、xxx.wxml、 xxx.wxss

首先登录界面

Login.wxml

<!-- 农场主登录 -->

<view class="container">

    <view class='content'>

        <image class="user-avatar" src="/image/touxiang.jpg"></image>

        <input placeholder="账户" class='user-id' bindinput='getUsername' />

        <input placeholder="密码" class='password' bindinput='getPassword' password='true' />

        <button class='login' bindtap='loginClick' hover-class='login-hover'>登录</button>

        <button class='register' bindtap='registerClick' hover-class='register-hover'>新用户请先注册</button>

    </view>

    <view class='triangle3'></view>

    <view class='triangle4'></view>

    <view class='triangle5'></view>

    <view class='triangle6'></view>

</view>

这是页面的组建布局设计

下面要点击“新用户注册”跳转到农场主注册界面，需要进入login.js对按键“登录”和“新用户请先注册”进行页面跳转设置

Login.js

Page({

  loginClick: function () {

    wx.navigateTo({

      url: '../farmermain/farmermain',

    })

  },

  registerClick: function () {

    wx.navigateTo({

      url: '../farmerregister/farmerregister',

    })

  }

})

接下来每个界面流程都是同样的，按照自己的设计的模式来布置组建按钮，位置大小颜色等，对按钮点击跳转的主要方法就是在.js文件中使用

wx.navigateTo({

      url: '../xxx/xxx',

    })

进行跳转

这只是一些界面相互之间的跳转，没有后台，也没连接数据库等，可以只用于前期的界面的设计，方便更改调整，后期连接后台和数据库时还需要再修改