首页 » Uni-app » uni-app 新手微信小程序登入获取用户信息

2020.02.05更新

新版登入界面模版,更好的用户体验。请访问:https://www.frbkw.com/2342/

 

2019年10月29号 是一个特殊的日子是吧!原本是想再本月发布枫瑞自己的小程序但是因为之前到处浪,导致现在博客和公众号10天都没有更新了。也是心急着想吧小程序做出来,但是枫瑞也是一个新手难免会碰到很多不会。目前小程序微信已经线上测试了,展示版本bug不多,目前兼容微信和qq

uni-app 新手微信小程序登入获取用户信息

更具官方的文档,如果开发者要存用户数据,那么登入授权的时候就得经过开发者服务器

uni-app 新手微信小程序登入获取用户信息

 

另外一种则是不通过开发者服务器,直接从微信接口获取,简单但是不利于大型产品使用,如果你的产品只是和枫瑞一样只是一个展示类型的,那么可以一下方式

 

1.发送请求

provider是登入的平台,微信啊 qq,支付宝等,把获取数据赋值给yonghuwx

onLoad() {
			
	let that = this;
		uni.login({
			provider: 'weixin',
			success: function(loginRes) {
				console.log(loginRes.authResult);
				// 获取用户信息				
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						console.log('用户昵称为:' + infoRes.userInfo.nickName);					
						that.yonghuwx = infoRes.userInfo
						console.log(that.yonghuwx)
				}
			});
		}
	});
}

建立一个数组

data() {
	return {
		yonghuwx: []
	}
},

2.渲染数据

<view class="tx-w">
	<view class="tx">
		<image class="tx-img" :src="yonghuwx.avatarUrl"></image>
		<view class="zx"></view>
	</view>
	<view class="name">{{yonghuwx.nickName}} </view>
	<view class="name-qm">自然的美好的,你的</view>
</view>

 

这样的效果就是用户打开小程序后直接获取用户头像和名字,不用在点击授权按钮,如果要用户点击按钮在获取权限的话

<button open-type='getUserInfo' class="xx-dr">生活 != 工作</button>

效果图

uni-app 新手微信小程序登入获取用户信息

转载请声明原站来源:作者:枫瑞博客, 转载或复制请以 超链接形式 并注明出处 枫瑞博客网
原文地址:《uni-app 新手微信小程序登入获取用户信息》 发布于2019-10-29

赞(0) 生成海报

评论 抢沙发

3 + 3 =


长按图片转发给朋友

微信公测版本发布啦
写bug咯!!写bug!!!多端微信小程序星宿适配中....