网页手机号抓取程序(小程序的登录和记录一下的参考借鉴和借鉴价值)

　　网页手机号抓取程序(小程序的登录和记录一下的参考借鉴和借鉴价值)

　　本篇文章主要介绍微信小程序封装自定义弹窗的实现代码。非常好，有一定的参考价值。有需要的朋友可以参考以下

　　最近在登录小程序时，需要同时获取用户的手机号和头像昵称，但是小程序不支持通过单一界面同时获取两种数据，于是就想到了自定义一个弹窗，通过弹窗按钮触发获取手机号。事件。记录下来。

　　具体代码如下：

　　在业务代码中：

　　在业务代码中引入对话组件

　　 　　　　 　　　　　　申请获取你微信绑定的手机号 　　　　　　 　　　　　　　　取消 　　　　　　　　授权 　　　　　　 　　　　 　　

　　对话框组件：

　　在组件下创建一个新对话框。注意组件不是页面，因为它是作为组件引入页面的

　　对话框.wxml：

　　需要传入四个属性

　　visible：是否显示弹窗

　　标题：标题

　　showClose：是否在右上角显示关闭按钮

　　showFooter：是否显示底部按钮

　　 　　 　　　　 　　　　　　 　　　　　　　　0}}"> 　　　　　　　　　　{{ title }} 　　　　　　　　　　 　　　　　　　　　　　　 　　　　　　　　　　 　　　　　　　　 　　　　　　 　　　　　　　　 　　　　　　 　　　　　　 　　　　　　　　取消 　　　　　　　　确定 　　　　　　 　　　　 　　

　　对话框.js

　　dialog.json：只需将其声明为组件

　　 { 　　"component": true, 　　"usingComponents": {} }

　　对话框.wxss

　　CSS可以根据你喜欢的风格进行调整。请注意，遮罩层的 z-index 稍高一些，以确保它位于顶层。

　　 /* components/dialog/dialog.wxss */ .dialog-custom { 　　width: 100vw; 　　height: 100%; 　　position: absolute; 　　left: 0; 　　top: 0; 　　z-index: 9999; } .dialog-mask { 　　position: fixed; 　　top: 0; 　　left: 0; 　　right: 0; 　　bottom: 0; 　　z-index: 10000; 　　width: 100vw; 　　height: 100%; 　　background: rgba(0, 0, 0, 0.3); } .dialog-main { 　　position: fixed; 　　z-index: 10001; 　　top: 50%; 　　left: 0; 　　right: 0; 　　width: 85vw; 　　height: auto; 　　margin: auto; 　　transform: translateY(-50%); } .dialog-container { 　　margin: 0 auto; 　　background: #fff; 　　z-index: 10001; 　　border-radius: 3px; 　　box-sizing: border-box; 　　padding: 40rpx; } .dialog-container__title { 　　width: 100%; 　　height: 50rpx; 　　line-height: 50rpx; 　　margin-bottom: 20rpx; 　　position: relative; } .dialog-container__title .title-label{ 　　display: inline-block; 　　width: 100%; 　　height: 50rpx; 　　line-height: 50rpx; 　　font-size: 36rpx; 　　color: #000; 　　text-align: center; } .dialog-container__title .title-icon{ 　　width: 34rpx; 　　height: 50rpx; 　　position: absolute; 　　top: 0; 　　right: 0; } .dialog-container__title .title-icon image{ 　　width: 34rpx; 　　height: 34rpx; } .dialog-container__body { 　　padding-top: 10rpx; 　　font-size: 32rpx; 　　line-height: 50rpx; } .dialog-container__footer { 　　height: 76rpx; 　　line-height: 76rpx; 　　font-size: 32rpx; 　　text-align: center; 　　border-top: 1px solid #f1f1f1; 　　position: absolute; 　　bottom: 0; 　　left: 0; 　　right: 0; } .dialog-container__footer .dialog-container__footer__cancel { 　　width: 50%; 　　color: #999; 　　display: inline-block; } .dialog-container__footer .dialog-container__footer__cancel::after{ 　　position: absolute; 　　right: 50%; 　　bottom: 0; 　　content: ''; 　　width: 2rpx; 　　height: 76rpx; 　　background: #f1f1f1; } .dialog-container__footer .dialog-container__footer__confirm { 　　color: #3B98F7; 　　width: 50%; 　　display: inline-block; 　　text-align: center; }

　　 /* components/dialog/dialog.wxss */ .dialog-custom { width: 100vw; height: 100%; position: absolute; left: 0; top: 0; z-index: 9999; } .dialog-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; width: 100vw; height: 100%; background: rgba(0, 0, 0, 0.3); } .dialog-main { position: fixed; z-index: 10001; top: 50%; left: 0; right: 0; width: 85vw; height: auto; margin: auto; transform: translateY(-50%); } .dialog-container { margin: 0 auto; background: #fff; z-index: 10001; border-radius: 3px; box-sizing: border-box; padding: 40rpx; } .dialog-container__title { width: 100%; height: 50rpx; line-height: 50rpx; margin-bottom: 20rpx; position: relative; } .dialog-container__title .title-label{ display: inline-block; width: 100%; height: 50rpx; line-height: 50rpx; font-size: 36rpx; color: #000; text-align: center; } .dialog-container__title .title-icon{ width: 34rpx; height: 50rpx; position: absolute; top: 0; right: 0; } .dialog-container__title .title-icon image{ width: 34rpx; height: 34rpx; } .dialog-container__body { padding-top: 10rpx; font-size: 32rpx; line-height: 50rpx; } .dialog-container__footer { height: 76rpx; line-height: 76rpx; font-size: 32rpx; text-align: center; border-top: 1px solid #f1f1f1; position: absolute; bottom: 0; left: 0; right: 0; } .dialog-container__footer .dialog-container__footer__cancel { width: 50%; color: #999; display: inline-block; } .dialog-container__footer .dialog-container__footer__cancel::after{ position: absolute; right: 50%; bottom: 0; content: ''; width: 2rpx; height: 76rpx; background: #f1f1f1; } .dialog-container__footer .dialog-container__footer__confirm { color: #3B98F7; width: 50%; display: inline-block; text-align: center; }

　　总结

　　以上就是小编介绍的微信小程序打包自定义弹窗的实现代码。我希望它对你有帮助。有任何问题请给我留言，小编会及时回复你的。非常感谢您对本站的支持网站！

　　如果您觉得本文对您有帮助，欢迎转载，请注明出处，谢谢！