微信小程序登录:QQ小程序登录: uniapp制作小程序登录 新方式和旧方式

**微信小程序登录:QQ小程序登录: uniapp制作小程序登录 **

内容写的有点很仔细了 但是小白可能不好理解 看我的博客之前 请放下自己的坏情绪 调整下心情
否则事半功倍
在这里插入图文档片描述
在这里插入图片描述

微信小程序之前的一版本是通过点击按钮的形式进行弹窗的:但是现在已经废弃了
还是可以使用的 但是不会在弹窗授权了 而是直接返回的匿名的微信名称 微信头像 但是那些必要的参数还是没有改变的—eg(例如)::::(iv , rawData , signature)

但是还是有好处的 :我们另类客户不想要授权弹窗 那正好可以考虑这个方式 但是大多小程序我的导航哪里显示的手机微信的昵称头像 这时候就惨了(鱼和熊掌不可得兼)

<button open-type="getUserInfo" @click="logo"></button>
methods:{
logo(){
	wx.getUserInfo({provider: 'weixin',success: (res) => {}})
	//uniapp的写法是
	uni.getUserInfo({provider: 'weixin',success: (res) => {}})
}

完整的写法: 微信原生开发直接吧uni改为wx QQ小程序直接改为QQ 例如:( uni.getUserInfo===>wx.getUserInfo==>QQ.getUserInfo) uniapp开发直接使用

	uni.login({
			provider: 'weixin',
			success: reslogin => {
				uni.showLoading({
					title: 'rading...',
				}) 
				uni.getUserInfo({
					provider: 'weixin',
					success: (res) => {
						console.log('用户昵称,iv,encryptedData...', res);
						
//------------------------------以上步骤就已经登录成功了----------------------
				//获取到了参数 发给后端获取token 置换session_key等参数				
					wx.request({
							// 注意,如果小程序开启校验合法域名时必须使用https协议
							//在测试的情况下可以不开启域名校验
							url: 'https://api.xxxx.com/api/Loginxxxu/LogxxxxOpenId',
							data: {
								// 接口设置的固定参数值
								"postdata": [{
										"field": "AppID",
										"value": "98429DF9"//后端的参数  
									},
									{
										"field": "code",
										"value": code
									},
									{
										"field": "encryptedData",
										"value": res.encryptedData
									},
									{
										"field": "iv",
										"value": res.iv
									},
									{
										"field": "rawData",
										"value": res.rawData
									},
									{
										"field": "signature",
										"value": res.signature
									}
								]
							},
							// 请求的方法
							method: 'POST', // 或 ‘POST’
							// 设置请求头,不能设置  Referer
							header: {
								'content-type': 'application/json' // 默认值
							},
							// 请求成功时的处理
							success: (res) => { 
							},
							// 请求失败时的一些处理
							fail: err => {
								uni.hideLoading() 
							},
						})
					}
				});

			}
		});

下面是更新的版本:
备注:QQ小程序不支持最新的方式(getUserProfile) 还是使用button配合getUserInfo使用

<view @click="logo"></view>  //最新的getUserProfile不需要配合button使用了
logo(){ 
		uni.login({
			provider: 'weixin',
			success: reslogin => { 
			}
		 });
		if (uni.getUserProfile) { 
			uni.getUserProfile({
				desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
				success: (res) => { 
					uni.showLoading({
						title: '登录中...',
					})
					wx.request({
						// 注意,如果小程序开启校验合法域名时必须使用https协议
						//在测试的情况下可以不开启域名校验 
						url: 'https://api.xxx.com/api/Logxxxuth/LogixxxhatGetOpenId',
						data: {
							// 接口设置的固定参数值
							"postdata": [{
									"field": "AppID",  
									"value": "0BB80B3D336A9390xxxxxx2B"
								},
								{
									"field": "code",
									"value": code
								},
								{
									"field": "encryptedData",
									"value": res.encryptedData
								},
								{
									"field": "iv",
									"value": res.iv
								},
								{
									"field": "rawData",
									"value": res.rawData
								},
								{
									"field": "signature",
									"value": res.signature
								}
							]
						},
						// 请求的方法
						method: 'POST', // 或 ‘POST’
						// 设置请求头,不能设置  Referer
						header: {
							'content-type': 'application/json' // 默认值
						},
						// 请求成功时的处理
						success: (res) => {
							console.log(res, 'code')
							if (res.data.code == 20000) {
							  uni.hideLoading()
							}
						},
						// 请求失败时的一些处理
						fail: err => {
							uni.hideLoading()
							 
						},
					})
				},
			})
		}
	}

在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值