小程序账户密码+一键授权页面效果

最新推荐文章于 2025-06-03 11:37:06 发布

沉默的熊猫仔

最新推荐文章于 2025-06-03 11:37:06 发布

阅读量345

点赞数

文章标签：小程序微信小程序

本文链接：https://blog.youkuaiyun.com/weixin_54804804/article/details/121160139

版权

本文介绍了微信小程序中一个简洁的登录页面设计，包括布局、样式和交互。页面采用WXML和WXSS语言，创建了包含用户名和密码输入框、登录按钮以及第三方登录选项的界面。样式设计注重用户体验，使用了阴影效果、圆角边框和居中对齐等元素，背景颜色和字体大小都经过精心调整，以提供良好的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.页面效果

2.login.wxml

<view class="login-container">
  <view class="title">微信小程序App</view>
  <view class="login-box">
    <label>用户名</label>
    <input placeholder="请输入用户名"/>
    <label>密码</label>
    <input placeholder="请输入密码"/>
    <button class="login-btn">立即登录</button>
    <view class="three-line">一一一一一第三方登录一一一一一</view>
    <button class="login-btn" style="background-color:green;">微信登录</button>
  </view>
</view>

3. login.wxss

/* pages/login/login.wxss */
page{
  height: 100%;    /* 使用page的height可以使页面占全屏 */
  background-color: #fafafa;
 }
.login-container{
  padding: 0 10%;
  height: 100%;
}
.title{
  font-siz