参考资料:

微信小程序官方文档

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. 正则表达式-固定XML格式提取内容

    (?<=(<(?<a>([A-Za-z]*?))>)).*?(?=(</\k<a>>))

  2. Flutter学习(7)——网络请求框架Dio简单使用

    原文地址: Flutter学习(7)--网络请求框架Dio简单使用 | Stars-One的杂货小窝 Flutter系列学习之前都是在个人博客发布,感兴趣可以过去看看 网络请求一般APP都是需要的,在 ...

  3. 凯撒密码(Caesar cipher) 详解

    ------------恢复内容开始------------ 最近训练CTF的时候,发现密码学这块的知识不太系统,所以自己接下来会陆陆续续整理出来 就先从古典密码中的凯撒密码说起吧 凯撒密码内容比较简 ...

  4. 用 区间判断(if)来猜价格的高低

    1 #include <stdio.h> 2 #include <stdlib.h> 3 int main() 4 { 5 int price = 150; 6 int gue ...

  5. selenium元素定位之 八大元素定位

    进入网站,按F12,点击弹出框右上角的位置的小箭头,然后移到需要定位的元素上,点击一下即可定位元素(1) id定位(有id才可以定位)wd.find_element_by_id('') #输入id属性 ...

  6. lerna 常用命令

    lerna 介绍 lerna 处理机构 固定模式(fixed) 所有包是统一的版本号,每次升级,所有包版本统一更新,不管这个包内容改变与否 具体体现在,lerna 的配置文件 lerna.json 中 ...

  7. 特殊回文数 BASIC-9

    特殊回文数 代码 import java.util.Scanner; /*123321是一个非常特殊的数,它从左边读和从右边读是一样的. 输入一个正整数n, 编程求所有这样的五位和六位十进制数, 满足 ...

  8. Golang语言系列-13-常用内置包

    常用内置包 net/http包 http请求和响应 http服务端 main.go文件 package main import ( "fmt" "io/ioutil&qu ...

  9. Kafka丢数据、重复消费、顺序消费的问题

    面试官:今天我想问下,你觉得Kafka会丢数据吗? 候选者:嗯,使用Kafka时,有可能会有以下场景会丢消息 候选者:比如说,我们用Producer发消息至Broker的时候,就有可能会丢消息 候选者 ...

  10. KVM常用命令

    查看所有虚拟机状态:执行virsh list –all 启动该虚拟机:执行virsh start test 关机虚拟机:virsh shutdown     此方法为正常关机方法,需要一段才能关机关闭 ...