微信小程序如何通过用户授权获取手机号(getPhoneNumber)
这篇文章主要介绍了微信小程序如何通过用户授权获取手机号(getPhoneNumber),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
小程序有一个获取用户很便捷的api，就是通过getPhoneNumber获取用户的已经绑定微信的手机号码。有一点要大家注意，现在微信和注重用户体验，有些方法都是需要用户主动去触发才能调用的，比如getPhoneNumber。
官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
实现思路：
直接上干货：
1、
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
2、JS内getPhoneNumbe组件函数（该事件中最重要的就是在wx.login登录后发起接口请求），这里需要配置参数来给接口：
这些是必不可少的参数，这些齐备才能算一个合法的请求。
appid: “你的小程序APPID”, secret: “你的小程序appsecret”, code: res.code, encryptedData: telObj, iv: ivObj
//通过绑定手机号登录
getPhoneNumber: function (e) {
var ivObj = e.detail.iv
var telObj = e.detail.encryptedData
var codeObj = "";
var that = this;
//------执行Login---------
wx.login({
success: res => {
console.log('code转换', res.code);
//用code传给服务器调换session_key
wx.request({
url: 'https://你的接口文件路径', //接口地址
data: {
appid: "你的小程序APPID",
secret: "你的小程序appsecret",
code: res.code,
encryptedData: telObj,
iv: ivObj
},
success: function (res) {
phoneObj = res.data.phoneNumber;
console.log("手机号=", phoneObj)
wx.setStorage({ //存储数据并准备发送给下一页使用
key: "phoneObj",
data: res.data.phoneNumber,
})
}
})
//-----------------是否授权，授权通过进入主页面，授权拒绝则停留在登陆界面
if (e.detail.errMsg == 'getPhoneNumber:user deny') { //用户点击拒绝
wx.navigateTo({
url: '../index/index',
})
} else { //允许授权执行跳转
wx.navigateTo({
url: '../test/test',
})
}
}
});
},
最终结果展示：
点击"拒绝"，开发者能捕捉到该事件 ，此时getPhoneNumber 函数返回 e.detail.errMsg 为 getPhoneNumber:user deny
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
下面一小段代码给大家介绍微信小程序 功能函数 密码验证*,具体代码如下所示: //登录输入密码 userPasswordInput: function (e) { var that = this; this.setData({ userPassword: e.detail.value }) // console.log(e.detail.value.length) // console.log(e.detail.value); var value = e.detail.value var str
-
微信小程序用户授权、位置授权及获取微信绑定手机号
1.位置授权 位置授权相对简单,可以直接调用方法wx.getLocation()就可以弹出授权框, 在调用前需要在app.json中设置用途说明 Page({ "permission": { "scope.userLocation": { "desc": "你的位置信息将用于xxx" } } }) 授权框 但是存在不少用户会拒绝授权,如果拒绝授权就不会再弹窗,而是直接进入接口 fail 回调,就要手动授权,我们可以通过自定义弹
-
微信小程序利用云函数获取手机号码
小程序获取手机号码方式 一.取到加密数据,然后提交到服务器解密, 二.获取到 cloudID,用云函数, 优点:直接获取原始数据,节省服务器资源 1.xml <button class="gettel" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> 快捷获取</button> 2. 点击按钮调用云函数,将cloudID传给云函数 getPho
-
微信小程序获取用户绑定手机号方法示例
用户调用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
-
微信小程序获取用户信息及手机号（后端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<
-
Java解密微信小程序手机号的方法
本文实例为大家分享了Java解密微信小程序手机号的具体代码,供大家参考,具体内容如下 第一步:创建AES解密工具类:代码如下 import org.apache.commons.codec.binary.Base64; import javax.crypto.Cipher; import javax.crypto.KeyGenerator; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.SecretKeySp
-
微信小程序绑定手机号获取验证码功能
微信小程序验证码获取方式,代码如下所示: <!-- 绑定手机号 --> <view class='content'> <form bindsubmit="formSubmit"> <view class='phone-box'> <text class='phone'>手机号</text> <input name="phone" type='number' placeholder=&quo
-
微信小程序如何获取用户手机号
最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话密钥). 2.拿到jscode后,将其发送给服务端,服务端拿它与微信服务端做交互获取openid和sessionkey.具体获取方法如下: (1)需要写一个HttpUrlConnection工具类: public class MyHttpUrlConnection { private final i
-
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
这篇文章主要介绍了微信小程序如何通过用户授权获取手机号(getPhoneNumber),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码.有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触发才能调用的,比如getPhoneNumber. 官方文档:https://developers.weixin.qq.com/minipr
-
微信小程序后台解密用户数据实例详解
微信小程序后台解密用户数据实例详解 微信小程序API文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html openId : 用户在当前小程序的唯一标识 因为最近根据API调用https://api.weixin.qq.com/sns/jscode2session所以需要配置以下服务,但是官方是不赞成这种做法的, 而且最近把在服务器配置的方法给关闭了.也就是说要获取用户openid,地区等信息只能在后台获取. 一下是官方的
-
微信小程序使用form表单获取输入框数据的实例代码
本文讲述了微信小程序使用form表单获取输入框数据的实例代码.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml 用户名: 密码: 登录 重置 {{tip}}{{userName}}{{psw}} index.js Page({ data:{ // text:"这是一个页面" tip:'', userName:'', psw:'' }, formBindsubmit:function(e){ if(e.detail.value.userName.leng
-
微信小程序扫描二维码获取信息实例详解
1.最简单的扫二维码获得信息. 首先,在网上找一个二维码生成网站,生成一个二维码,我用的是草料二维码,随便生成了一个二维码做测试. 就这个. 我搭建的界面如下: 如图可见,点击1中的"点我扫一扫",可以扫二维码,扫错了如2所示,扫对了如3所示."你傻不傻啊?"就是上图的二维码内容. 嗯,大家都不傻. 4是小程序的结构,就是快速模板建立的,index页面里的内容都删空了,替换了新的代码,其中wxss文件没有东西,因为并没有对界面进行设计. 其中index.wxml的代
-
微信小程序mpvue点击按钮获取button值的方法
在小程序里面是没有dom元素的,这个我们只要会小程序的应该都知道,但是在平时开发中我们偶尔会遇到需要点击某个元素获取它的值的情况,在这里给大家列举了两种情况解决方法 方式一:数据绑定 这种情况的话,对应的场景是只有一个按钮或元素调用这个方法的情况下的 在你的.vue文件中的data数据里面添加变量 data() { return { msg:'苏喂苏喂苏喂' }; getData(){ console.log( this.msg ) } 按钮上 <button @click="getDat
-
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
本文实例讲述了微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能.分享给大家供大家参考,具体如下: 效果图 实现原理 采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据:如果 city 不为空,则返回 city 指定位置的天气数据. WXML <view class="map-weather"> <view><text>城市:</text&
-
微信小程序实现限制用户转发功能的实例代码
在上篇文章给大家提到微信小程序实现禁止分享代码实例,感兴趣的朋友可以点击查阅.今天继续给大家分享微信小程序实现限制用户转发功能,一起看看吧! 在小程序的开发过程,你是不是也经常遇到这么一个需求,用户希望某个页面只能自己转发分享,不希望被别人再次分享出去,接下来我们聊聊如何实现这个功能. 限制用户转发需要解决两个问题: 关闭系统右上角菜单栏中的转发功能 隐藏群聊会话中长按转发分享的功能 1.关闭系统右上角菜单栏中的转发功能 通过调用微信 API:wx.hideShareMenu({ }) 关闭当前
-
微信小程序实现基于三元运算验证手机号/姓名功能示例
本文实例讲述了微信小程序实现基于三元运算验证手机号/姓名功能.分享给大家供大家参考,具体如下: wxml部分: <view class="fl_form" style="position:relative;padding-top:20rpx;"> <text><text style="color:red;padding-right:10rpx">*</text>您的姓名</text> &
-
微信小程序如何获知用户运行小程序的场景教程
前言 最近微信小程序团队像打了鸡血似的,不断推出一系列新的小程序功能,以及拓展了不少小程序的入口,使得小程序的运行场景变得越来越丰富.因此,不同的进入场景,必然会带来不同的用户需求,如何能根据这些不同的用户场景,来优化和提升我们的小程序的体验呢? 下面主要给大家介绍了微信小程序中如何获知用户运行小程序的场景,分享给大家供大家参考学习,下面来看看详细的介绍: 从小程序的基础库API v1.1.0的开始,场景值这一功能被正式的引入.我们可以在小程序的App入口代码中获取该场景值: //在小程序的on
-
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: 小demo,代码很简单. 1.index.wxml <!--index.wxml--> <button style="margin:30rpx;" bindtap="chooseimage">获取图片</button> <image src="{{tempFilePaths }}" mode="aspecFill"