微信小程序如何通过用户授权获取手机号(getPhoneNumber)


Posted in Javascript onJanuary 21, 2020

这篇文章主要介绍了微信小程序如何通过用户授权获取手机号(getPhoneNumber),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码。有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触发才能调用的,比如getPhoneNumber。

官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html

实现思路:

微信小程序如何通过用户授权获取手机号(getPhoneNumber)

直接上干货:

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)

点击"拒绝",开发者能捕捉到该事件 ,此时getPhoneNumber 函数返回 e.detail.errMsg 为 getPhoneNumber:user deny

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
几个有趣的Javascript Hack
Jul 24 Javascript
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
详解react组件通讯方式(多种)
May 06 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 #Javascript
微信小程序如何实现点击图片放大功能
Jan 21 #Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 #Javascript
微信小程序全选多选效果实现代码解析
Jan 21 #Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 #Javascript
浅谈Vue.use到底是什么鬼
Jan 21 #Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 #Javascript
You might like
PHP封装CURL扩展类实例
2015/07/28 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
JS 分号引起的一段调试问题
2009/06/18 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
js返回顶部实例分享
2016/12/21 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
vue keep-alive的简单总结
2021/01/25 Vue.js
Python 专题一 函数的基础知识
2017/03/16 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
招商业务员岗位职责
2013/12/16 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
档案保密承诺书
2014/06/03 职场文书
妇女工作先进事迹
2014/08/17 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android