微信小程序如何通过用户授权获取手机号(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 流畅动画实现原理
Sep 08 Javascript
JavaScript 面向对象编程(1) 基础
May 18 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
基于node.js之调试器详解
Aug 22 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 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
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
JS验证字符串功能
2017/02/22 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
Pytorch之contiguous的用法
2019/12/31 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
历史学专业推荐信
2013/11/06 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
出国留学担保书
2014/05/20 职场文书
机电一体化专业求职信
2014/07/22 职场文书
模范教师事迹材料
2014/12/16 职场文书
销售经理工作检讨书
2015/02/19 职场文书
怎样写家长意见
2015/06/04 职场文书