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

简介: uniapp微信小程序获取用户手机号

价值产生信心,信心产生热忱,而热忱则征服世界。——华特·H·柯亭姆

我们在uniapp开发中有时会需要获取用户的手机号

可以在官方文档找到对应的方法

这里注意一点,只能通过button进行点击获取

但我们这样获取到后还需要解密

比如我这里获取到的

<template>
  <view><button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">点我获取手机号</button></view>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    getPhoneNumber(e) {
      console.log(e.detail.errMsg);
      console.log(e.detail.iv);
      console.log(e.detail.encryptedData);
    }
  }
};
</script>

你会发现获取到的是一串密文

这个我们需要用session_key

需要通过调用wx.login

wx.login({
  success (res) {
    if (res.code) {
    console.log('获取code成功,code为:' + res.code)
    } else {
      console.log('登录失败!' + res.errMsg)
    }
  }
})

获取一个code作为参数

然后再加上appidappsecrect调用微信提供的api

去换取openidsession_key

然后再用微信官方提供的一个js去解密

下载地址

我们这里是node环境

所以引入node能用的这个js即可

使用方式在上面的那个demo.js中有

打开就是这样的

var WXBizDataCrypt = require('./WXBizDataCrypt')
var appId = 'wx4f4bc4dec97d474b'
var sessionKey = 'tiihtNczf5v6AKRyjwEUhQ=='
var encryptedData = 
  'CiyLU1Aw2KjvrjMdj8YKliAjtP4gsMZM'+
  'QmRzooG2xrDcvSnxIMXFufNstNGTyaGS'+
  '9uT5geRa0W4oTOb1WT7fJlAC+oNPdbB+'+
  '3hVbJSRgv+4lGOETKUQz6OYStslQ142d'+
  'NCuabNPGBzlooOmB231qMM85d2/fV6Ch'+
  'evvXvQP8Hkue1poOFtnEtpyxVLW1zAo6'+
  '/1Xx1COxFvrc2d7UL/lmHInNlxuacJXw'+
  'u0fjpXfz/YqYzBIBzD6WUfTIF9GRHpOn'+
  '/Hz7saL8xz+W//FRAUid1OksQaQx4CMs'+
  '8LOddcQhULW4ucetDf96JcR3g0gfRK4P'+
  'C7E/r7Z6xNrXd2UIeorGj5Ef7b1pJAYB'+
  '6Y5anaHqZ9J6nKEBvB4DnNLIVWSgARns'+
  '/8wR2SiRS7MNACwTyrGvt9ts8p12PKFd'+
  'lqYTopNHR1Vf7XjfhQlVsAJdNiKdYmYV'+
  'oKlaRv85IfVunYzO0IKXsyl7JCUjCpoG'+
  '20f0a04COwfneQAGGwd5oa+T8yO5hzuy'+
  'Db/XcxxmK01EpqOyuxINew=='
var iv = 'r7BXXKkLb8qrSNn05n0qiA=='
var pc = new WXBizDataCrypt(appId, sessionKey)
var data = pc.decryptData(encryptedData , iv)
console.log('解密后 data: ', data)
// 解密后的数据为
//
// data = {
//   "nickName": "Band",
//   "gender": 1,
//   "language": "zh_CN",
//   "city": "Guangzhou",
//   "province": "Guangdong",
//   "country": "CN",
//   "avatarUrl": "http://wx.qlogo.cn/mmopen/vi_32/aSKcBBPpibyKNicHNTMM0qJVh8Kjgiak2AHWr8MHM4WgMEm7GFhsf8OYrySdbvAMvTsw3mo8ibKicsnfN5pRjl1p8HQ/0",
//   "unionId": "ocMvos6NjeKLIBqg5Mr9QjxrP1FA",
//   "watermark": {
//     "timestamp": 1477314187,
//     "appid": "wx4f4bc4dec97d474b"
//   }
// }

解密完成后即可获取手机号~

相关文章
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的广西文化传承小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的广西文化传承小程序的详细设计和实现(源码+lw+部署文档+讲解等)
20 3
|
8天前
|
存储 小程序 前端开发
【微信小程序 - 工作实战分享】1.微信小程序发送手机短信验证码(阿里云)
【微信小程序 - 工作实战分享】1.微信小程序发送手机短信验证码(阿里云)
17 0
|
19小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的高校社团管理小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的高校社团管理小程序的详细设计和实现(源码+lw+部署文档+讲解等)
9 1
|
21小时前
|
小程序 开发者
uniapp实战 —— 开发微信小程序的调试技巧
uniapp实战 —— 开发微信小程序的调试技巧
7 1
|
19小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的趵突泉景区的智慧导游小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的趵突泉景区的智慧导游小程序的详细设计和实现(源码+lw+部署文档+讲解等)
7 0
基于SpringBoot+Vue+uniapp的趵突泉景区的智慧导游小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
10天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的智慧农业小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的智慧农业小程序的详细设计和实现(源码+lw+部署文档+讲解等)
29 6
|
10天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
25 3
|
21小时前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
5 0
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的爱看漫画小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的爱看漫画小程序的详细设计和实现(源码+lw+部署文档+讲解等)
6 0
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的毕业生就业管理微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的毕业生就业管理微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
4 0