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"
//   }
// }

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

相关文章
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
255 3
|
2月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
667 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
52 0
微信小程序更新提醒uniapp
|
2月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
43 2
|
2月前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
30 0
|
2月前
|
存储 移动开发 小程序
uniapp富文本editor输入二次扩展兼容微信小程序
uniapp富文本editor输入二次扩展兼容微信小程序
77 0
|
2月前
|
小程序
uniapp实现微信小程序隐私协议组件封装
uniapp实现微信小程序隐私协议组件封装
49 0
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
131 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
63 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
84 7