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);
								}
							}
						});
					}
				})
		
		}
相关推荐
计算机学姐9 分钟前
基于微信小程序的民宿预订管理系统
java·vue.js·spring boot·后端·mysql·微信小程序·小程序
寰宇软件3 小时前
PHP防伪溯源一体化管理系统小程序
小程序·uni-app·vue·php
trabecula_hj3 小时前
微信小程序中实现进入页面时数字跳动效果(自定义animate-numbers组件)
微信小程序·小程序
菜鸟码神3 小时前
微信小程序隐藏右侧胶囊按钮,分享和关闭即右侧三个点和小圆圈按钮
微信小程序·小程序
大叔_爱编程6 小时前
wx035基于springboot+vue+uniapp的校园二手交易小程序
vue.js·spring boot·小程序·uni-app·毕业设计·源码·课程设计
林涧泣6 小时前
【Uniapp-Vue3】previewImage图片预览
uni-app
灰天76811 小时前
健身房项目 Uniapp+若依Vue3版搭建!!
uni-app
说私域17 小时前
社群裂变+2+1链动新纪元:S2B2C小程序如何重塑企业客户管理版图?
大数据·人工智能·小程序·开源
寰宇软件18 小时前
PHP CRM售后系统小程序
微信小程序·小程序·vue·php·uniapp
浩宇软件开发1 天前
微信小程序实现自定义日历功能
微信小程序·小程序