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

2020.02.05更新

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

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

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

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

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>

效果图