微信小程序获取手机号 教程(不是完整的)

注意若是个人的不能获取到手机号没有权限
该文档微信写的时候是个人的无法获取手机号后续未测试 介意勿看 祝你们加油
首先在uni-app建一个项目
本文档按照视频写的 (时间到27分钟可以自己继续往下看)
视频链接
第二步自己注册一个微信小程序(我也忘记我怎么注册的贴一个网址哈哈)
微信小程序注册
然后创建一个文件夹因为他是登陆么所以单独拎出来(你们随意)
在这里插入图片描述
然后写复制代码

let global={
	//获取值
	userInfo:{
		openid:null,
		session_key:null
	},
	// 小程序的
	appId:'',
	appSecret:'',
		/**
		 * 获取opinid和sessionkey
		 */
	getOpenId:function(){
		var that=this;
		//获取code
		uni.login({
				provider:'weixin',
				success:function(res){
					console.log('获取code:'+JSON.stringify(res))
		let code=res.code;
		that.getOpenIdByJs(code,data=>{
			that.userInfo.openid=data.openid;
		that.userInfo.session_key=data.session_key;
		
		});
		}
		});
		},
		// 
		/**通过code换取对应的key(js版本  ,数据不安全)
		 * @param {Object} code
		 */
		getOpenIdByJs:function(code,callback){
			// let url='https://api.weixin.qq.com/sns/jscode2session?appid='+this.appId+
			// '&secret='+this.appSecret+'&js_code='+code+'&grant_type=authorization_code';
			// 	uni.request({
			// url:url,
			// data:{},
			// 第二种写法
				uni.request({
			url:'https://api.weixin.qq.com/sns/jscode2session?appid',
			data:{
				appid:this.appId,
				secret:this.appSecret,
				js_code:code,
				grant_type:'authorization_code'
			},
			success: (res) => {
				console.log('获取opinid:'+JSON.stringify(res))
			callback(res.data);
			}
		});
		}
		
};
// 导出
module.exports=global;



main.js加入 注意自己换地
在这里插入图片描述

// 引入 获取小程序
import global from '@/common/global.js';
// 全局用$
Vue.prototype.$global=global;
// 登录时自动获取  直接调用
Vue.prototype.$global.getOpenId();

appid 和appSecret的位置
https://mp.weixin.qq.com/
在这里插入图片描述
到这了用微信开发工具运行一下
在这里插入图片描述
得到这样的
继续往下走
在index.vue写

 <button class="phoneLogin" type="primary"  open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">手机号一键登录</button>
	       

然后运行就看到了
在这里插入图片描述
悲伤那么大(因为我到这才发现我不可以获取,想了一下还是继续写下去吧)
然后下载一个微信解密包
微信手机号解密包
虽然我打开他是空页面但是他就莫名其妙的下载下来了。。
打开文件夹之后
在这里插入图片描述
打开node
在这里插入图片描述
第一个是domo可以自己看一眼或者直接往下走
把下边的那个复制到我们的项目中


调用

/**
		 * 获取解密并返回
		 * @param {Object} encryptedData
		 * @param {Object} 
		 */
		getMobile(encryptedData,iv){
		let data=this.decoeWxData(encryptedData,iv)	;
		},
			/**微信解密
			 * @param {Object} encryptedData 密文
			 * @param {Object} iv 向量
			 */
		decoeWxData:function(encryptedData,iv){
			var WXBizDataCrypt = require('./WXBizDataCrypt.js')
			var pc = new WXBizDataCrypt(this.appId, this.userInfo.session_key)
			var data = pc.decryptData(encryptedData , iv)
		
			console.log('解密后 data: ',JSON.stringify(data) )
return data;
		}
		
};

index.vue

methods:{
			getPhoneNumber(e){
			let encryptedData=e.detail.encryptedData;
				 iv=e.detail.iv;
				this.mobile= this.$global.getMobile(encryptedData,iv);
			
			}
		}
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值