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星茫V3.0更新uni-app多端小程序源码丸子插件wordpress后台

晚风踩着云朵,月亮贩卖寂寞,而你来自万顷银河,是我翘首以盼的快乐————uni星茫[...

新手uni-app纯手写微信小程序自定义标题栏适配全面/异形屏幕iphone x

爱上你这件事太妙了,三缄其口,却又四海生风,有亏盈,有枯荣唠叨一会作为一个新手我[&...

如何解决自定义标题栏点击返回直接退出小程序

世事如书,我偏爱你这句,愿做个逗号待在你脚边唠叨一会上次发文也是在20天前了,从[&...

uni-app 新建本地模拟json数据教程

在开发app中,往往后端对丢我们接口,如果后端没有提供。那么前端都会自己模拟数据,自...

发表评论

邮箱地址不会被公开。 必填项已用*标注