微信小程序如何通过用户授权获取手机号(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 相关文章推荐
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
js实现数字从零慢慢增加到指定数字示例
Nov 07 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
数据库中排序的对比及使用条件详解
2012/02/23 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
公司前台接待岗位职责
2013/12/03 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
《手指教学》反思
2014/02/14 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书