从小程序注册登录页面体验组件的使用

r囧r小猫 2022-01-27 10:59 228阅读 0赞

先直接上代码

## 注册登录页面代码 ##

<view>
    <view>
        <image class="img" src='../resource/images/dsp.jpg'></image>
    </view>
    <view class='content'>
    <form bindsubmit='doLogin'>
    <view class='account'>
      <view class='title'>账号</view>
      <view class='num'><input name="username" placeholder='用户名' placeholder-style='color:#999999; ' value='aabb'/></view>
    </view>
    <view class='hr'></view>
    <view class='account'>
       <view class='title'>密码</view>
      <view class='num'><input name="password"  placeholder='请输入密码' placeholder-style='color:#999999; ' value='123456'/></view>
      <view class='see'>
          <image src='../resource/images/follow.png' style='width:42px;height:30px'></image>
      </view>
    </view>
    <view class='hr'></view>
    <button form-type='submit' class='weui-btn' type='primary' style='width:90%'>登录</button>
    <button bindtap='goRegist'  class='weui-btn' type='primary' style='width:90%'> 去注册</button>
    
    </form>
    </view>
    
    </view>

样式代码

/* pages/userRegist/regist.wxss */
    .img{
      width: 100%
    }
    .content{
      margin-top: 20px;
    }
    .account{
      display: flex;
      flex-direction: row;
      padding-left: 20px;
      padding-top: 20px;
      padding-bottom: 10px;
      width: 90%;
    }
    .title{
      margin-right: 30px;
      font-weight: bold;
    }
    .hr{
       border: 1px solid #cccccc;
       opacity: 0.2;
       width: 90%;
       margin: 0 auto;
    }
    .see{
      position: absolute;
      right: 20px;
    }

js代码

// pages/userRegist/regist.js
    const app = getApp();
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      },
      goRegist:function(){
        wx.navigateTo({
          url: '../userRegist/regist',
        })
      },
      doLogin:function(e){
        var formObject = e.detail.value;
        var username =formObject.username;
        var password = formObject.password;
        if(username.length==0||password==0){
          wx.showToast({
            title: '用户名或密码不能为空',
            icon:'none',
            duration:3000,
          })
        }else{
          wx.showLoading({
            title: '请稍候',
          })
          var serverUrl = app.serverUrl;
          wx.request({
            url: serverUrl+'/login',
            method :"POST",
            data:{
              username:username,
              password:password
            },
            success:function(res){
              wx.hideLoading();
              if (res.data.status == 500) {
                wx.showToast({
                  title: res.data.msg,
                  icon:'none',
                  duration:3000
                })
              }else if(res.data.status==200){
                wx.showToast({
                  title: '用户登录成功',
                  icon: 'suceess',
                  duration: 3000
                })
              }
            }
          })
        }
      }
    })

## 组件使用 ##

### button与form的配合 ###

如果要提交表单时，必须要将button的form-type设置为submit。然后form表单的事件就可以生效 了

然后这个事件可以直接获取表单内的值

},
      doLogin:function(e){
        var formObject = e.detail.value;
        var username =formObject.username;
        var password = formObject.password;
        }

### 引入外部UI样式 ###

根据教程如果只是引入UI样式在对应的UI样式页面引入即可。全局引入![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGFvemhlbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]

在全局样式表中进行引入，此处我们引入的时微信官方的we-ui样式

### wx.loading与wx.hideLoading ###

从用户体验上，我们在与后台交互时就使用wx-loading来显示正在加载。当后台响应后使用hideLoading来隐藏加载状态

### wx.showToast ###

当loadIng之后我们可能有一些提示需要提供给用户，可以使用wx.showToast来提示。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGFvemhlbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: /images/20220127/4c1aaefb5a5f4aea8ed597fdb02c6a9e.png