[JavaScript知识库]自动弹出 微信授权登录窗口

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

代码如下

<!-- 授权弹窗 -->
<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>

2022深度学习开发者峰会

5月20日13:00让我们相聚云端，共襄盛会！