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

饥饿的帕尼尼

已于 2022-10-28 19:39:01 修改

阅读量1.3w

点赞数 11

文章标签：小程序

于 2021-07-26 09:08:23 首次发布

本文链接：https://blog.csdn.net/m0_52457734/article/details/119101285

版权

一、在小程序中引入iconfont

1.在官网搜索需要的图标

2.将图标添加至项目

3.打开我的项目

4.选择font class，点击下方的链接，打开生成的源码

5.在styles文件夹下新建iconfont.wxss，拷贝生成的源码到该文件中

二、编写登录注册页面

.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;
}