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 新手微信小程序登入获取用户信息

0
分享到:

评论0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
掉头发中!小程序慢更新
没有账号? 忘记密码?
var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?18b345cf548f88d90a655d9ce1fa4140"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();