参考资料:

微信小程序官方文档

uniapp开发微信小程序获取用户手机号

页面增加一个按钮

<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">唤起授权</button>

前端解密

安装 crypto-js

npm install crypto-js

下载 WXBizDataCrypt.js 文件

WXBizDataCrypt.js微信官方下载地址

打开Node文件夹,把 WXBizDataCrypt.js 文件放入你的项目中。(比如我是放在我的common文件夹下)
在需要解密的页面引用该文件
import WXBizDataCrypt from "@/common/WXBizDataCrypt.js"; //请以你的实际地址为准

具体代码如下,关键位置请看注释

<script>
//在需要解密的页面引用该文件
import WXBizDataCrypt from "@/common/WXBizDataCrypt.js";
export default {
data() {
return {}
},
methods: {
getPhoneNumber(PhoneNumber) {
let appid = "wxce185cd1da123456" //需替换
let secret = "25d0fe7478355910fc143ce6b1234567" //需替换
//调用 wx.login 接口,获取code
uni.login({
provider: 'weixin',
success: res => {
let url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret +
'&js_code=' +
res.code + '&grant_type=authorization_code'; //用 code 换取 session 和 openId
uni.request({
url: url, // 请求路径
success: res => { //成功res返回openid,session_key
// console.log(res)
//解密用户信息
let pc = new WXBizDataCrypt(appid, res.data.session_key);
let data = pc.decryptData(PhoneNumber.detail.encryptedData, PhoneNumber.detail.iv);
// //data就是最终解密的用户信息
// countryCode: "86" 区号
// phoneNumber: "15634123456" 用户绑定的手机号(国外手机号会有区号)
// purePhoneNumber: "15634123456" 没有区号的手机号
// watermark:
// appid: "wxce185cd1da123456"
// timestamp: 1607906868
console.log(data)
},
fail: err => {
console.log(err)
}
})
}
})
}
}
}
</script>

uniapp 获取用户手机号的更多相关文章

  1. nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId

    nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId 前言: 我准备用nodejs+koa+uniapp实现一款餐饮点单小程序,以及nodejs+koa+vue实现后端管理 ...

  2. 微信小程序获取用户手机号详解

    最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话 ...

  3. 微信小程序获取用户手机号 记录 (PHP)

    1. 用户登录时需要获取 openid ,同时可以获取 session_key, 二者同时返回, 此时我们要将二者存储在服务端. 2. 小程序端 button 按钮拉起授权, 向api 传递 iv 和 ...

  4. uniapp获取用户OpenId及用户详情

    页面增加一个按钮 <button type="default" open-type="getUserInfo" @click="getUserI ...

  5. 微信小程序获取用户手机号

    获取微信用户绑定的手机号,需先调用wx.login接口. 小程序获取code. 后台得到session_key,openid. 组件触发getPhoneNumber 因为需要用户主动触发才能发起获取手 ...

  6. 微信小程序获取用户手机号,服务器解码demo

    原理:通过微信登陆接口wx.login得到encryptedData . iv  .code.经过接口处理code得到sessionkey.最后官方demo得到解密后的手机号.(接口处理这一步也可以在 ...

  7. Taro -- 获取用户手机号

    1. 安装 Taro 脚手架工具 安装 Taro 开发工具 @tarojs/cli 使用 npm 或者 yarn 全局安装 $ npm install -g @tarojs/cli $ yarn gl ...

  8. 微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法

    异常描述: 点击按钮获取用户手机号码,有的时候会出现点击无反应或很久之后才弹出用户授权获取手机号码的弹窗,这种情况下,也会出现点击穿透的问题(详见:微信小程序开发——连续快速点击按钮调用小程序api返 ...

  9. 小程序登录&授权&获取用户信息

    一 .登录 时序图如下: wx.login() 获取js_code 示例代码: App({   onLaunch: function() {     wx.login({       success: ...

随机推荐

  1. vue日记之可展开的消息气泡

    项目小需求之聊天气泡可展开内容 因为某些信息内容太长或者某种原因必须分行输出,这就导致了有时候一个气泡占据了一整个聊天区域 所以我打算实现一个在该气泡加载的时候判断其气泡长度,并在长度过长的情况下进行 ...

  2. Session与Cookie的原理以及使用小案例>从零开始学JAVA系列

    目录 Session与Cookie的原理以及使用小案例 Cookie和Session所解决的问题 Session与Cookie的原理 Cookie的原理 Cookie的失效时机 小提示 Session ...

  3. 关于 pip 的 15 个使用小技巧

    认识pip 众所周知,pip可以对python的第三方库进行安装.更新.卸载等操作,十分方便. pip的全称:package installer for python,也就是Python包管理工具. ...

  4. ECDSA高性能硬件实现——算法详解与模块划分

    ECDSA全称椭圆曲线数字签名算法,它是基于素数域的椭圆曲线对信息进行加签与验签.其核心在于对信息的加签,及对加签的信息进行验签,那么下面介绍该算法流程. 假设Alice希望对消息m进行签名,并将消息 ...

  5. 洛谷P1377题解

    题面 首先他叫我们建一颗笛卡尔树,所以我们就建一颗笛卡尔树. 然后他说要生成序列中最小的.想到笛卡尔树的一条性质:左<根<右.但是根节点必须先插进去.他的两个儿子用贪心的思想就知道是先选左 ...

  6. CF466C 题解

    Description 给定一个数组,求有多少组 \(i,j\) 将整个数组分成和相等的三个数组. Solution 从左往右看一遍,记录每一个 \(i\) 使得 \(\sum_{k=1}^i a_k ...

  7. 洛谷P2504题解

    题目 瓶颈生成树的裸题.可以查看这个来获取更多信息. 他问的是能够在所有树上自由穿梭的猴子个数,那我只需要算出这张图上最小生成树中权值最大的边,和每个猴子的最大跳跃长度进行比较即可. 因为我用的是 \ ...

  8. Object.defineProperty 中 get set 用法

    就是两个函数,只要搞清楚get.set的执行时机就可以了.执行时机如下代码: <!DOCTYPE html> <html lang="en"> <he ...

  9. 面试官:你的App卡顿过吗?你是如何监控的?

    一.故事开始 面试官:平时开发中有遇到卡顿问题吗?你一般是如何监控的? 来面试的小伙:额...没有遇到过卡顿问题,我平时写的代码质量比较高,不会出现卡顿. 面试官:... 这回答似乎没啥问题,但是如果 ...

  10. Python语言系列-02-基础数据类型

    格式化输出 #!/usr/bin/env python3 # author:Alnk(李成果) # 百分号% 格式化输出 name = input('姓名:') age = input('年龄:') ...