uniapp微信小程序开发测试获取手机号码

先申请测试号

注意认证但是没有完全认证不要试测试号解密如下

总结我自己的两大坑

1.官网的WXBizDataCrypt需要导入crypto要提前下载但是试了很多次没有效果重新编写这个。将crypto库换成crypto-js库

2.我一直在尝试用下有下面这个界面的测试号不行获取不到用户的code还是啥忘记了s

新建WXBizDataCrypt.js官网也有也可以直接负责下面的内容

javascript 复制代码
import CryptoJS from 'crypto-js';

class WXBizDataCrypt {
  constructor(appId, sessionKey) {
    this.appId = appId;
    this.sessionKey = sessionKey;
  }

  decryptData(encryptedData, iv) {
    // 确保 encryptedData 和 iv 都是 Base64 编码的字符串
    const sessionKey = CryptoJS.enc.Base64.parse(this.sessionKey);
    const encryptedBuffer = CryptoJS.enc.Base64.parse(encryptedData);
    const ivBuffer = CryptoJS.enc.Base64.parse(iv);

    try {
      // 使用 AES 解密
      const decrypted = CryptoJS.AES.decrypt(
        { ciphertext: encryptedBuffer },
        sessionKey,
        {
          iv: ivBuffer,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7,
        }
      );

      // 将解密后的数据转换为 UTF-8 字符串
      const decoded = decrypted.toString(CryptoJS.enc.Utf8);

      // 解析 JSON 数据
      const result = JSON.parse(decoded);

      // 检查解密结果中的 App ID
      if (result.watermark.appid !== this.appId) {
        throw new Error('Illegal Buffer: App ID mismatch');
      }

      return result;
    } catch (err) {
      console.error('解密失败', err);
      throw new Error('Illegal Buffer: ' + err.message);
    }
  }
}

export default WXBizDataCrypt;

npm 下载 crypto-js:将node_modules中 crypto-js文件夹中的 crypto-js.js复制到WXBizDataCrypt同级目录

接下来在生成按钮

html 复制代码
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
	<view class="wx_text">微信授权登录</view>
</button>

接下来在第一张图片中的appid与AppSecret(小程序密钥)复制下来

typescript 复制代码
getPhoneNumber(e) {
		    uni.login({
		        provider: 'weixin', // 使用微信登录
		        success: (res) => {
		            uni.request({
		                url: 'https://api.weixin.qq.com/sns/jscode2session',
		                method: 'GET',
		                data: {
		                    appid: "appid自己的",
		                    secret: "AppSecret(小程序密钥)复制下来",
		                    js_code: res.code, // wx.login 登录成功后的code  
		                    grant_type: 'authorization_code',
		                },
		                success: (res) => {
		                    console.log('Request success:', res);
		                    if (res.data && res.data.session_key) {
		                        let pc = new WXBizDataCrypt('appid自己的', res.data.session_key);
		                        try {
		                            let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
		                            console.log('手机号码信息', data);
		                        } catch (err) {
		                            console.error('解密失败', err);
		                        }
		                    } else {
		                        console.error('未能获取 session_key:', res);
		                    }
		                },
		                fail: (err) => {
		                    console.error('Request failed:', err);
		                }
		            });
		        },
		        fail: (err) => {
		            console.error('Login failed:', err);
		        }
		    });
		}

简写的方法

typescript 复制代码
getPhoneNumber(e) {
				console.log(e)
				// 用户同意授权,拿到code去获取手机号
				uni.login({
					provider: 'weixin', //使用微信登录
					success: (res) => {
						uni.request({
							url: 'https://api.weixin.qq.com/sns/jscode2session',
							method: 'GET',
							data: {
								appid:"appid自己的",
								secret:"ppSecret(小程序密钥)复制下来",
								js_code: res.code, //wx.login 登录成功后的code  
								grant_type: 'authorization_code',
							},
							success: (res) => {
								let pc = new WXBizDataCrypt('appid自己的', res.data.session_key);
								
								try {
								  let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
								  console.log('手机号码信息', data);
								} catch (err) {
								  console.error('解密失败', err);
								}
							}
						});
					}
				})
		
		}
相关推荐
CHU7290352 小时前
淘宝扭蛋机抽盒小程序前端功能解析:解锁趣味抽盒新体验
前端·小程序
2501_933907213 小时前
深圳本凡科技专业企业APP开发,助力手机应用创新优化
科技·微信小程序·小程序
每天都要加油呀!5 小时前
TypeError: uni.requestPayment is not a function
小程序
java1234_小锋5 小时前
分享一套优质的微信小程序校园志愿者系统(SpringBoot后端+Vue3管理端)
微信小程序·小程序·校园志愿者
2501_916008897 小时前
深入解析iOS机审4.3原理与混淆实战方法
android·java·开发语言·ios·小程序·uni-app·iphone
打破砂锅问到底0077 小时前
AI 驱动开发实战:10分钟从零构建「微信群相册」小程序
人工智能·微信·小程序·ai编程
CHU7290357 小时前
扭蛋机盲盒小程序前端功能设计解析:打造趣味与惊喜并存的消费体验
前端·小程序
QT.qtqtqtqtqt8 小时前
uni-app小程序前端开发笔记(更新中)
前端·笔记·小程序·uni-app
CHU7290359 小时前
直播商城APP前端功能全景解析:打造沉浸式互动购物新体验
java·前端·小程序
喵喵虫18 小时前
uniapp修改封装组件失败 styleIsolation
uni-app