uni-app 獲取使用者微信資料 app 小程式
阿新 • • 發佈:2018-12-30
<template> <!-- 使用者資訊模組 --> <view class="userBox"> <!-- 暱稱 --> <text class="nickName">{{nickNames}}</text> <!-- 頭像 --> <image class="userIcon" :src="avatarUrl">頭像</image> </view> </template> <script> export default { data() { return { nickNames: '匿名使用者', avatarUrl: '../../../static/xcx03.jpeg', show: '', hidden: '' } }, onLoad: function(option) { let that = this; uni.login({ provider: 'weixin', success: function(loginRes) { console.log(loginRes); // 獲取使用者資訊 uni.getUserInfo({ provider: 'weixin', success: function(infoRes) { console.log(infoRes); that._data.nickNames = infoRes.userInfo.nickName; that._data.avatarUrl = infoRes.userInfo.avatarUrl; } }); } }); } } </script> <style> /* 使用者盒子 */ .userBox { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: linear-gradient(to top right, #63b8ff 0%, #4876ff 25%, #3a5fcd 100%); } /* 使用者暱稱 */ .nickName { color: #ffffff; } /* 使用者頭像 */ .userIcon { align-self: flex-end; border-radius: 50%; overflow: hidden; width: 100px; height: 100px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) } </style>