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

news/2024/7/19 16:34:26 标签: js, javascript, 小程序, 前端, 微信小程序

实际应用项目:http://github.crmeb.net/u/long

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

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

实现思路:

直接上干货:

1、

1

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

2、JS内getPhoneNumbe组件函数(该事件中最重要的就是在wx.login登录后发起接口请求),这里需要配置参数来给接口:

这些是必不可少的参数,这些齐备才能算一个合法的请求。

appid: “你的小程序APPID”,

secret: “你的小程序appsecret”,

code: res.code,

encryptedData: telObj,

iv: ivObj

最终结果展示:

javascript">//通过绑定手机号登录

  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


http://www.niftyadmin.cn/n/908804.html

相关文章

代码书写规范

作者&#xff1a;词晖链接&#xff1a;https://www.zhihu.com/question/19586885/answer/48933504来源&#xff1a;知乎著作权归作者所有&#xff0c;转载请联系作者获得授权。CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height,…

新手程序员最常用的十大网站

这里给大家推荐一款免费迭代 二开便捷的商城项目&#xff1a;源码直通车>>> 刚开始入行的程序员很多很迷惘&#xff0c;不知道去哪里找到合适有用的资源&#xff0c;哪里有和自己一样的新手&#xff0c;哪里有高手&#xff0c;哪有有代码可以学习。 我将分享一些收藏多…

Mathematica数据处理(6)--散点图(上)

今天我们来讲一下散点图的处理 最基本的&#xff0c;也是最常用的函数 ListPlot ListPlot[Prime[Range[5]]] 得到下面的图 下面看一下怎么来美化这个图&#xff0c;变化点的颜色和大小 ListPlot[Prime[Range[5]], PlotStyle -> {Blue, PointSize[Large]}] 得到下面的图 那么…

1年内4次架构调整,谈Nice的服务端架构变迁之路

Nice 本身是一款照片分享社区类型的应用&#xff0c;在分享照片和生活态度的同时可以在照片上贴上如品牌、地点、兴趣等tag。 Nice从2013.10月份上线App Store到目前每天2亿PV&#xff0c;服务端架构经过了4次比较大的调整&#xff08;2014年年底数据&#xff09;。本次分享将介…

python爬虫之Scrapy提示 “不是内部或外部命令,也不是可运行的程序”解决方案

这里给大家推荐一款免费迭代 二开便捷的商城项目&#xff1a;源码直通车>>> 报错提示&#xff1a; 首先卸载之前的版本 提示没有安装过 直接安装 pip install scrapy 可能会提示这个 按照提示执行这个命令即可 安装完成 执行scrapy测试 出现以上提示 表示安装成功

ListMapString,Object使用Java代码遍历

List<Map<String,Object>>的结果集怎么使用Java代码遍历以获取String&#xff0c;Object的值&#xff1a; package excel;import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map;public class List1 {public static…

十分钟玩转 jQuery原理简介

这里给大家推荐一款免费迭代 二开便捷的商城项目&#xff1a;源码直通车>>> 一、简介 定义 jQuery创始人是美国John Resig&#xff0c;是优秀的Javascript框架&#xff1b; jQuery是一个轻量级、快速简洁的javaScript库。 jQuery对象 jQuery产生的对象时jQuery独有的…

阻抗匹配四种处理方式

一、串联端接方式 靠近输出端的位置串联一个电阻&#xff0c;要达到匹配效果&#xff0c;串联电阻和驱动端输出阻抗的总和应等于传输线的特征阻抗Z0。 在通常的数字信号系统中&#xff0c;器件的输出阻抗通常是十几欧姆到二十几欧姆&#xff0c;传输线的阻抗通常会控制在50欧姆…