草庐IT

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

苦修的木鱼 2023-08-22 原文

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

代码如下

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

有关自动弹出 微信授权登录窗口的更多相关文章

  1. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇,就使用ruby​​onrails自动化单元测试而言,你们正在做什么?您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您?git中的预提交Hook?只是手动调用?我完全理解测试,但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的,并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您? 最佳答案 不确定您到底想听什么,但是有几个级别的自动代码库控制:在处理某项功能时,您可以使用类似autotest的内容获得关于哪些有效,哪些无效的即时反馈。要确保您的提

  2. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容?我基本上想做类似numbers.slice(0,3)的事情,但要删除切片中的数组项。嗯...嗯,我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组,我们在StackOverflow上找到一

  3. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样?我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用,需要1秒才能返回,我有100,000多个页面要访问,所以我试图运行多个线程来解决这个问题。有更好的方法吗?classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  4. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中,我们希望成为我们的rails应用程序中的一等公民的几个类类型起源,这意味着它们应该驻留在应用程序的app文件夹下,它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来,我有点担心应用程序文件夹被这么多目录污染。因此,我想将它们移动到一个子目录/模块中,该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内,目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

  5. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  6. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  7. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  8. ruby - (Ruby || Python) 窗口管理器 - 2

    我想用这两种语言中的任何一种(最好是ruby​​)制作一个窗口管理器。老实说,除了我需要加载某种X模块外,我不知道从哪里开始。因此,如果有人有线索,如果您能指出正确的方向,那就太好了。谢谢 最佳答案 XCB,X的下一代API使用XML格式定义X协议(protocol),并使用脚本生成特定语言绑定(bind)。它在概念上与SWIG类似,只是它描述的不是CAPI,而是X协议(protocol)。目前,C和Python存在绑定(bind)。理论上,Ruby端口只是编写一个从XML协议(protocol)定义语言到Ruby的翻译器的问题。生

  9. ruby-on-rails - 有没有一种工具可以在编码时自动保存对文件的增量更改? - 2

    我最喜欢的Google文档功能之一是它会在我工作时不断自动保存我的文档版本。这意味着即使我在进行关键更改之前忘记在某个点进行保存,也很有可能会自动创建一个保存点。至少,我可以将文档恢复到错误更改之前的状态,并从该点继续工作。对于在MacOS(或UNIX)上运行的Ruby编码器,是否有具有等效功能的工具?例如,一个工具会每隔几分钟自动将Gitcheckin我的本地存储库以获取我正在处理的文件。也许我有点偏执,但这点小保险可以让我在日常工作中安心。 最佳答案 虚拟机有些人可能讨厌我对此的回应,但我在编码时经常使用VIM,它具有自动保存功

  10. ruby - 在 ruby​​ 中使用自动创建插入数组 - 2

    我想知道是否可以通过自动创建数组来插入数组,如果数组不存在的话,就像在PHP中一样:$toto[]='titi';如果尚未定义$toto,它将创建数组并将“titi”压入。如果已经存在,它只会推送。在Ruby中我必须这样做:toto||=[]toto.push('titi')可以一行完成吗?因为如果我有一个循环,它会测试“||=”,除了第一次:Person.all.eachdo|person|toto||=[]#with1billionofperson,thislineisuseless999999999times...toto.push(person.name)你有更好的解决方案吗?

随机推荐