微信小程序,登录,获取用户信息,手机号

    wx.login({
        success : function () {
            wx.getUserInfo () {
                success : function () {
                }
            }
        }
	})

上面是常用的写法,但是其实登录和获取用户信息没有必要写在一块,wx.login和wx.getUserInfo并没有强制绑定使用。login是静默行为,getUserInfo会调起授权弹框

wx.getUserInfo弃用了,现在返回的变成匿名的微信用户和头像,要用wx.getUserProfile

下面是相对完善的代码

授权登录,获取用户信息

html代码(授权只能点击触发,不能直接触发)

<view class="button-sq" hover-class="button-hover" @tap="authoLogin()">
	<text>授权</text>
</view>

js代码 (appid,secret在小程序开发>开发管理>开发设置>开发者id 查看)


methods: {
			//用户授权,获取用户信息
			authoLogin() {
				uni.getUserProfile({
					desc: 'Wexin', // 这个参数是必须的
					success: res => {
						console.log(res)
						console.log("用户信息", res.rawData)//可获取用户头像url和名字等信息
						this.isShowDialog = false;
						this.loginUser()//获取用户code函数
					}
				})
			},
		//用户登录
			loginUser() {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						console.log('用户登录')
						console.log(loginRes)
						this.jsCode = loginRes.code;//保存登录后的code
						
						//获取session_key
						uni.request({
						    url: 'https://api.weixin.qq.com/sns/jscode2session',
						    method:'GET',
						    data: {
						    appid: this.appid,        //你的小程序的APPID
						    secret: this.secret,    //你的小程序秘钥secret,  
						    js_code: this.jsCode,    //wx.login 登录成功后的code
						    grant_type:'authorization_code'
						    },
						    success: (cts) => {
						        console.log('获取信息',cts);  // 换取成功后 暂存这些数据 留作后续操作
						        this.openid=cts.data.openid    //openid 用户唯一标识
						        this.session_key=cts.data.session_key    //session_key  会话密钥
						    }
						});
						
						

					}
				});
			},
			
}

获取解密手机号

html代码(点击按钮直接触发授权)

<button class="tl-btn-630" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信账号快捷登录</button>

js代码

			//获取手机号授权
			getPhoneNumber(e) {
				uni.showLoading({})
				this.iv = e.detail.iv //获取iv 
				this.encryptedData = e.detail.encryptedData//获取encryptedData
				this.decryptPhone()//解密手机号函数
			},
			
			//解密手机号
			decryptPhone(){
				let pc = new WXBizDataCrypt(this.appid,this.session_key);
				let data = pc.decryptData(this.encryptedData , this.iv);
				console.log('解密后 data: ', data)
				
			},
			

好了关键来了,这个WXBizDataCrypt去哪里拿呢
到微信官方地址服务端获取开放数据 | 微信开放文档

在这里插入图片描述

点击下载后,找到里面的Node文件夹下的WXBizDataCrypt.js 文件,然后将他引入到你项目里,最后在头部引用一下

 

import 	WXBizDataCrypt from '@/common/utils/WXBizDataCrypt.js';

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值