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

2024-11-28 18:23:39

今天在写登陆页面的时候，由于需要的个人信息和手机号的授权，但是如果在页面上直接放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)
    },

总结

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

微信小程序获取用户绑定手机号方法示例

用户调用wx.login()方法,获取登录用户凭证code wx.login({ success: function(res) { console.log('loginCode', res.code) } }); code传给后台,凭证code获取session_key和openid https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=aut
微信小程序如何获取用户手机号

最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话密钥). 2.拿到jscode后,将其发送给服务端,服务端拿它与微信服务端做交互获取openid和sessionkey.具体获取方法如下: (1)需要写一个HttpUrlConnection工具类: public class MyHttpUrlConnection { private final i
微信小程序getPhoneNumber获取用户手机号

微信小程序getPhoneNumber获取用户手机号小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等, 有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无效).将button中的open-type="getPhoneNumber",并且绑定bindgetphonenumber事件获取回调. <button open-type="getPhoneNumber"
微信小程序如何通过用户授权获取手机号(getPhoneNumber)

这篇文章主要介绍了微信小程序如何通过用户授权获取手机号(getPhoneNumber),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码.有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触发才能调用的,比如getPhoneNumber. 官方文档:https://developers.weixin.qq.com/minipr
微信小程序开发之获取用户手机号码(php接口解密)

后边要做一个微信小程序,并要能获取用户微信绑定的手机号码.而小程序开发文档上边提供的获取手机号码的接口(getPhoneNumber())返回的是密文,需要服务器端进行解密,但是官方提供的开发文档一如既往的乱,如果没有对小程序开发文档有一个整体的了解,搞懂解密流程还是有点难的.这里把小程序从请求用户授权获取手机号码直至获取到手机号码明文的整个流程串了起来,方便迅速了解,如下: 一. 前端相关操作: 1. 请求用户授权获取手机号码: 因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 AP
微信小程序用户授权、位置授权及获取微信绑定手机号

1.位置授权位置授权相对简单,可以直接调用方法wx.getLocation()就可以弹出授权框, 在调用前需要在app.json中设置用途说明 Page({ "permission": { "scope.userLocation": { "desc": "你的位置信息将用于xxx" } } }) 授权框但是存在不少用户会拒绝授权,如果拒绝授权就不会再弹窗,而是直接进入接口 fail 回调,就要手动授权,我们可以通过自定义弹
微信小程序获取手机号授权用户登录功能

小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无效).将button中的open-type="getPhoneNumber",并且绑定bindgetphonenumber事件获取回调. <span style="font-size:14px;"><button open-type="get
微信小程序用户授权获取手机号（getPhoneNumber）

前言小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码.有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触发才能调用的,比如getPhoneNumber. 实现思路: 1.通过wx.login获取code,从而获取到用户的openID和sessionKey 2.通过getPhoneNumber获取encryptedData,iv 3.通过参数[encryptedData] .[iv] .[sessionKey] 请求后
微信小程序获取用户信息及手机号（后端TP5.0）

本文实例为大家分享了微信小程序获取用户信息及手机号的具体代码,供大家参考,具体内容如下 wxml页面 <view wx:if="{{config.tipsshow1}}" class='dialog-container'> <view class='dialog-mask'></view> <view class='dialog-info'> <view class='dialog-title'>login prompt<
C#微信小程序服务端获取用户解密信息实例代码

C#微信小程序服务端获取用户解密信息实例代码实现代码: using AIOWeb.Models; using Newtonsoft.Json; using Newtonsoft.Json.Linq; using System; using System.Collections.Generic; using System.Data; using System.Data.SqlClient; using System.Linq; using System.Web; namespace AIOWe
微信小程序开发之获取用户信息的两种方法

今天介绍两种微信小程序获取用户信息的方法第一中直接授权获取(在同一页面之中): 首先在微信程序一个页面的WXML文件写入获取用户信息的按钮  <button type="default" bindtap="getUserInfor"> 登录</button>  <image src="{{userinfor.avatar
微信小程序如何同时获取用户信息和用户手机号

今天在写登陆页面的时候,由于需要的个人信息和手机号的授权,但是如果在页面上直接放2个按钮,岂不是很呆??? 索性就写了一个mask层,去引导用户授权手机号. 1. 当我点击快捷登录的微信登录时,首先触发的是微信原生的获取用户信息userInfo 的方法,再它的 success 回调里面去打开 mask 层..... 2. mask 层里面有一个按钮,这个按钮是去触发微信原生的获取用户手机号的 getPhoneNumber 的方法,接下来就不用我多说了吧.... 直接甩代码 <!--快
微信小程序如何再次获取用户授权的方法

现在在做一个小程序有地图的功能,通过点击按钮打开地图.调用wx.getlocation()这个接口是需要用户的授权.如果他授权了,返回一个success当然最好啦,就什么问题都没有了.如果他点了取消,返回一个fail,我就使用预设的经纬度打开一个定位.但是如果用户点击返回以后,再次点击按钮进入地图就会没有反应(如果一开始有授权的话就可以再次重新打开地图). 有什么方法可以解决呢,或者怎样可以重新获取用户授权.毕竟叫他们删了重来的话,这样的体验好像不大好... 方法:A:单击隐藏图章wx.open
springboot+jwt+微信小程序授权登录获取token的方法实例

目录前言配置 XcxAuthenticationProvider XcxAuthenticationToken 小程序授权登录前言我们有时候在开发中,遇到这样的问题,就是我们需要小程序授权登录我们自己的后台,通过小程序的信息换取我们自己后台的token,实现账号密码.小程序授权登录的多种登录方式. 配置在 SecurityConfig文件中配置 XcxAuthenticationProvider public class XcxAuthenticationProvider implem
微信小程序实现手机获取验证码倒计时60s

本文实例为大家分享了微信小程序实现手机获取验证码倒计时的具体代码,供大家参考,具体内容如下功能展示: WXML: <view class="all">  <view class="tel">  <view class="icon_tel"> <image class="tel_image
微信小程序传值以及获取值方法的详解

微信小程序传值以及获取值方法,传值有两种方法,对应也有获取值得方法, 1.设置id的方法标识跳转后传递的参数值: 2.通过使用data - xxxx 的方法来标识要传递的值微信小程序设置id的方法标识来传值在要跳转的item处,设置一个id并给当前的id赋值上对应的key值,比如一部电影的id(后面带着id去下一个页面查询,详细信息)如: 后我们在js的bindtap的响应事件中获取,并传递到下一个界面中: 获取到id传的值通过e.currentTarget.id;获取设置的id值,并通过
微信小程序实现动态获取元素宽高的方法分析

本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用呢? 首先,这个接口会返回一个对象实例. var obj=wx.createSelectorQuery(); 下面的就是返回的对象实例 obj 的所有内容. 返回的 obj 有五个方法: 1. obj.in(co
微信小程序云开发获取文件夹下所有文件(推荐)

上周一个高中同学让我帮他做个图片展示的公众号,因为一直在加班的原因,所以一时忘了,昨晚想起来就赶紧加班加点的帮他弄了下,遇到了个问题,记录一下. 他的需求是要有个后台给他上传图片并且将图片归类,前端公众号根据每次不同的主题显示不同的封面和照片,但是服务器又不想买贵的,思来想去,最后决定用小程序云开发,连服务器和公众号认证费都免了,哈哈哈哈因为改成小程序云开发,所以需求也有了些变动,最后改成不需要后台,图片直接在云开发控制台中上传,然后在小程序中添加一个专门用来对封面和名称做修改的管理员页面,其

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

相关推荐

随机推荐