返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序如何同时获取用户信息和用户手机号
  • 512
分享到

微信小程序如何同时获取用户信息和用户手机号

2024-04-02 19:04:59 512人浏览 泡泡鱼
摘要

今天在写登陆页面的时候,由于需要的个人信息和手机号的授权,但是如果在页面上直接放2个按钮,岂不是很呆??? 索性就写了一个mask层,去引导用户授权手机号。 1. 当我点击快捷登录

今天在写登陆页面的时候,由于需要的个人信息和手机号的授权,但是如果在页面上直接放2个按钮,岂不是很呆???

索性就写了一个mask层,去引导用户授权手机号。

1. 当我点击快捷登录的 微信登录时,首先触发的是 微信原生的 获取用户信息userInfo 的方法,再它的 success 回调里面去打开 mask 层.....

2. mask 层里面 有一个按钮,这个按钮是去触发 微信原生的 获取用户手机号的 getPhoneNumber 的方法,接下来就不用我多说了吧。。。。

直接甩代码


<!--快捷登录-->
<button open-type="getUserInfo" @tap="getUserProfile">
    <view class="item column center">
	<image class="iconc" src="/static/img/share/wx.png"></image>
    </view>
</button>
<!--登录弹窗-->
<view class="modal-mask" catchtouchmove="preventTouchMove" v-if="showModal"></view>
    <view class="modal-dialog" v-if="showModal">
	<view class="modal-content">
	<view><image src='' class='show'></image></view>
	<view >绑定手机号</view>
	<view >请先绑定手机号在进行此操作</view>  
	<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
		<image src='/static/img/share/wx.png' class='iconWx'></image>微信用户一键绑定
	</button>
    </view>
</view>

methods: {
    getUserProfile(){
    // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
        wx.getUserProfile({
            desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
            success: (res) => {
		this.showDialogBtn();//调用一键获取手机号弹窗(自己写的)
            }
	})
    },
    // 显示一键获取手机号弹窗
                    showDialogBtn: function () {
            this.showModal = true
                    },
                    // 隐藏一键获取手机号弹窗
                    hideModal: function () {
                             this.showModal = false
                    },
    //获取用户手机号
    getPhoneNumber (e) {
        console,log(e.detael)
    },

总结

到此这篇关于微信小程序如何同时获取用户信息和用户手机号的文章就介绍到这了,更多相关微信小程序获取用户信息手机号内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 微信小程序如何同时获取用户信息和用户手机号

本文链接: https://lsjlt.com/news/132333.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 微信小程序如何同时获取用户信息和用户手机号
    今天在写登陆页面的时候,由于需要的个人信息和手机号的授权,但是如果在页面上直接放2个按钮,岂不是很呆??? 索性就写了一个mask层,去引导用户授权手机号。 1. 当我点击快捷登录...
    99+
    2024-04-02
  • 微信小程序如何获取用户信息
    自我介绍 我是IT果果日记,微信公众号请搜索 IT果果日记 一个普通的技术宅,定期分享技术文章,欢迎点赞、关注和转发,请多关照。 微信小程序用户基本信息有哪些? 除了基本信息,微信还会提供openId和union...
    99+
    2023-09-05
    微信小程序 小程序 微信 Powered by 金山文档
  • 微信小程序获取用户信息
    要在微信小程序中获取用户信息,你可以按照以下步骤进行操作: 在小程序的app.json文件中添加"scope.userinfo"权限,例如: ``` "permission": {   "scope.userinfo": {     "d...
    99+
    2023-09-21
    微信小程序 小程序
  • 公众号和小程序获取用户信息及获取手机号
    公众号的获取用户信息 前端传code,后端根据code获取用户信息 代码: $code = $this->request->param('code');//通过下面url获取access_t和 openid$url = 'https://a...
    99+
    2023-08-22
    小程序 php 开发语言
  • 微信小程序用户如何授权获取手机号-getPhoneNumber
    本篇内容主要讲解“微信小程序用户如何授权获取手机号-getPhoneNumber”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序用户如何授权获取手机号-getPhoneNumber”吧!...
    99+
    2023-06-13
  • 【微信小程序开发】小程序微信用户授权登录(用户信息&手机号)
    🥳🥳Welcome Huihui's Code World ! !🥳🥳 接下来看看由辉辉所写的关于小程序的相关操作吧 目录 🥳🥳Welc...
    99+
    2023-10-26
    小程序 微信小程序 微信 1024程序员节
  • 微信小程序用户授权获取手机号(getPhoneNumber)
    前言 小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码。有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触...
    99+
    2024-04-02
  • 微信小程序开发中如何获取用户信息
    这篇文章主要为大家展示了微信小程序开发中如何获取用户信息,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“微信小程序开发中如何获取用户信息”这篇文章吧。wx.getUserInfo(OBJECT)获取...
    99+
    2023-06-26
  • 小程序如何获取用户信息
    这篇文章主要为大家展示了小程序如何获取用户信息,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“小程序如何获取用户信息”这篇文章吧。获取用户信息,withCredentials 为 true 时需要先...
    99+
    2023-06-26
  • 微信小程序怎么获取用户的手机号码
    微信小程序中获取用户手机号码的方式有:1.用户页面通过弹出获取;2.在小程序制作页面中,添加登录选项卡,用于获取用户手机号码;微信小程序中获取用户手机号码的方式有以下两种当用户进入小程序后,通过弹出获取手机号提醒,用户点击授权,即可获得用户...
    99+
    2024-04-02
  • 微信小程序开发之获取用户信息
    环境 微信开发者工具 Stable 1.06.2303220云开发控制台 v1.5.47 用户的openid和头像名称信息 openid 是小程序用户的唯一标识。注意, openid 并不是微信用户的...
    99+
    2023-09-27
    微信小程序
  • 微信小程序中如何获取用户手机号授权登录
    随着微信小程序的普及,许多应用程序需要用户登录才能提供更好的服务。而获取用户手机号码是验证用户身份和确保账户安全的重要步骤之一。因此,在本文中,我们将介绍如何在微信小程序中实现手机号授权登录。 步骤一:在小程序后台添加手机号授权 首先,在小...
    99+
    2023-08-17
    微信小程序 小程序 前端 javascript vue.js
  • 微信小程序开发怎么获取用户信息
    这篇文章主要介绍了微信小程序开发怎么获取用户信息的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序开发怎么获取用户信息文章都会有所收获,下面我们一起来看看吧。第一中直接授权获取(在同一页面之中):首先在微...
    99+
    2023-06-29
  • 微信小程序如何授权获取用户详细信息openid
    这篇文章主要介绍微信小程序如何授权获取用户详细信息openid,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!小程序获取用户的头像昵称openid之类第一种使用wx.getUserIn...
    99+
    2024-04-02
  • Thinkphp5微信小程序如何实现获取用户信息接口
    这篇文章主要为大家展示了“Thinkphp5微信小程序如何实现获取用户信息接口”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Thinkphp5微信小程序如何实现...
    99+
    2024-04-02
  • 微信小程序如何使用uni-app一键获取用户信息
    本篇内容介绍了“微信小程序如何使用uni-app一键获取用户信息”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!用户不想输入账号密码,一键登录...
    99+
    2023-07-05
  • 微信小程序获取用户openid
    小程序端直接获取: 实现代码:直接简单 wx.login({ success(res) { if (res.code) { //发起网络请求 wx.request({ ...
    99+
    2023-08-17
    微信小程序 前端 小程序
  • (详细版)java实现小程序获取微信登录,用户信息,手机号,头像
    ps:springboot结合mybatisPlus、mysql实现,简单易懂,一件粘贴使用,详细往下看↓ 步骤:          注册微信开发平台账号,并创建小程序,获取小程序的AppID和AppSecret。 2.在小程序中引导用户...
    99+
    2023-08-31
    微信 spring boot java
  • 微信小程序获取用户手机号码的详细步骤
    目录前言接下来我们通过服务器获取授权deciphering解密方法总结前言 我们在做小程序开发的过程中,经常会涉及到用户身份的问题,最普遍的就是我们要获取用户的手机号码,通过微信获取...
    99+
    2024-04-02
  • 小程序如何获取用户信息失败
    这篇文章主要介绍小程序如何获取用户信息失败,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!  在使用小程序时,很多人会不授权导致授权失败场景,但是小程序第二次不在启动授权信息弹层,遇到这种情况,为了用户体验我们需要这样...
    99+
    2023-06-26
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作