自动弹出 微信授权登录窗口

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

代码如下

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