微信小程序写一个比较好看的授权登录弹框

半碗面

已于 2023-09-18 09:34:01 修改

阅读量1.4k

点赞数

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

于 2023-06-13 20:48:29 首次发布

本文链接：https://blog.csdn.net/qq_34861341/article/details/131195973

版权

文章展示了一个用于小程序授权登录的常见样式代码，包括HTML和CSS实现。此样式旨在提供更舒适的视觉效果和友好的用户体验，特别是通过微信授权登录按钮的设计，增强了交互性。

摘要由CSDN通过智能技术生成

好的，这里提供一个比较常见的小程序授权登录样式，代码如下：

html

<!-- WXML Code -->
<view class="auth-wrap">
  <view class="auth-bg"></view>
  <view class="auth-header">授权登录</view>
  <view class="auth-content">
    <button class="login-btn" open-type="getUserInfo" bindgetuserinfo="getUserInfo">微信授权登录</button>
  </view>
</view>

```CSS

/* WXSS Code */
.auth-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.auth-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
}

.auth-header {
  margin-top: 200rpx;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

.auth-content {
  margin-top: 60rpx;
  display: flex;
  justify-content: center;
}

.login-btn {
  width: 320rpx;
  height: 80rpx;
  background-color: #f8c753;
  border-radius: 40rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-btn::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 40rpx;
  opacity: 0;
  background-color: #fff;
  z-index: -1;
}

.login-btn:hover::before {
  opacity: 0.1;
  transition: 0.3s;
}

这个样式将给小程序的授权登录添加了一层视觉效果，用户在授权登录时体验更加舒适和友好。

图下：效果图小程序：MJ魔法AI绘图美图壁纸