微信小程序登录注册界面
第一次接触微信小程序的开发，首先就是从前端的界面开始，我要做的是一个农场管理的微信小程序，大致包括登录、注册、主要功能界面这些，这里我就分享一下我的登录注册界面的设计和功能实现
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',
})
进行跳转
这只是一些界面相互之间的跳转，没有后台，也没连接数据库等，可以只用于前期的界面的设计，方便更改调整，后期连接后台和数据库时还需要再修改
