微信小程序实现登录注册页面

一、在小程序中引入iconfont

1.在搜索需要的图标

2.将图标添加至项目

3.打开我的项目， 4.选择font class，点击下方的链接 5.拷贝生成的源码到全局样式

二、编写登录注册页面

.wxml文件：

<view style="margin-top:40%">
  <form bindsubmit="submit">
    <view class="form_item" style="margin-bottom: 20px;">
      <i class="iconfont icon-user"></i>
      <input type="text" placeholder="用户名" />
    </view>
    <view class="form_item" style="margin-bottom: 40px;">
      <i class="iconfont icon-password"></i>
      <input type="password" placeholder="密码" />
    </view>
    <view>
      <button class="login_btn">登录</button>
      <button>注册</button>
    </view>
  </form>
</view>

.less文件：

@formItemHeight: 36px;

@themeColor: rgb(50, 100, 192);

.form_item {
          
   
  margin: 0 50rpx;
  height: @formItemHeight;
  border: 1px solid @themeColor;
  border-radius: 5px;

  i {
          
   
    float: left;
    height: @formItemHeight;
    margin: 0 5px;
    font-size: 20px;
    color: @themeColor;
    line-height: @formItemHeight;
  }

  input {
          
   
    float: left;
    height: @formItemHeight;
  }

}

.login_btn {
          
   
  background: @themeColor;
  color: white;
  margin-bottom: 15px;
}

三、实现效果