自动弹出微信授权登录窗口-Toy模板网

这篇具有很好参考价值的文章主要介绍了自动弹出微信授权登录窗口。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

进入小程序首页自动弹出微信授权登录窗口-如下图

自动弹出微信授权登录窗口文章来源地址https://www.toymoban.com/news/detail-489308.html

代码如下

<!-- 授权弹窗 -->
<view class="auth" v-if="showModal">
    <view class="mask" catchtouchmove="preventTouchMove" v-if="showModal"></view>
    <!-- 弹出层 -->
    <view class="modalDlg" v-if="showModal">
        <view class="title">
            <text class="text0">微信授权</text>
        </view>
        <view class="cartLeft"></view>
        <u-image :lazy-load="true" width="150rpx" height="150rpx" :src="logo"></u-image>
        <view class="name">
            <text class="text1">小程序名称</text>
        </view>
        <view class="cartLeft1"></view>
        <view class="content">
            <text class="text2">获取您的公开信息(昵称、头像等)</text>
        </view>
        <view class="cartLeft2"></view>
        <view class="but">
            <view class="not">
                <u-button :hair-line="false" :custom-style='rejectStyle' size="mini" @click="rejectInfo">拒绝
                </u-button>
            </view>
            <view class="ok">
                <u-button :hair-line="false" :custom-style='customStyle' size="mini" @click="getUserProfileUrl">
                    允许</u-button>
            </view>
        </view>
    </view>
</view>

样式如下

<style>
// 授权窗口
	.auth {
		width: 620rpx;
		text-align: center;
		animation: auth 2s;
		-webkit-animation: auth 2s;

		/* 遮罩层 */
		.mask {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background: #000;
			z-index: 9000;
			opacity: 0.5;
		}

		/* 弹出层 */
		.modalDlg {
			width: 70%;
			height: 480rpx;
			position: fixed;
			top: 300rpx;
			left: 0;
			right: 0;
			z-index: 9999;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			/* 弹出层里面的文字 */
			.title {
				margin-top: 20rpx;

				.text0 {
					text-align: center;
					font-weight: bold;
					font-size: 34rpx;
					color: #000;
				}
			}

			.cartLeft {
				width: 90%;
				height: 20rpx;
				border-bottom: 1rpx solid #f3ebeb;
			}

			.name {
				margin-top: 10rpx;

				.text1 {
					text-align: center;
					font-size: 32rpx;
					color: #000;
					width: 360rpx;
				}
			}

			.cartLeft1 {
				width: 75%;
				height: 20rpx;
				border-bottom: 1rpx solid #f3ebeb;

			}

			.content {
				margin-top: 20rpx;

				.text2 {
					text-align: center; // 实现两端对齐文本效果
					font-size: 28rpx;
					color: #AFACB3;
				}
			}

			.cartLeft2 {
				width: 100%;
				height: 20rpx;
				border-bottom: 1rpx solid #f3ebeb;

			}

			.but {
				width: 70%;
				height: 18%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				/* 弹出层里面的按钮 */
				.not {
					height: 60rpx;
					background: #fff;
					line-height: 10rpx;
					text-align: center;
					color: #44b549;

				}
				.ok {
					height: 60rpx;
					line-height: 10rpx;
					text-align: center;
					font-size: 30rpx;
				}
			}
		}
	}
</style>