mine页面:显示手机信息,获取昵称和头像
1.wx.getSystemInfo(Object object)
获取系统信息
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
重要的js内容
data: {
uicon:'../../assets/icons/my.png',
uname:'用户名',
model:'',
system:'',
screenHeight:'',
screenWidth:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// this
var _this = this;
// 获取手机系统信息
wx.getSystemInfo({
success: function (res) {
console.log(res);
_this.setData({
model: res.model,
system: res.system,
screenHeight: res.screenHeight,
screenWidth: res.screenWidth
})
}
});
wx.getSetting({
success(res) {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: function (res) {
_this.setData({
uicon: res.userInfo.avatarUrl,
uname: res.userInfo.nickName
})
}
})
} else {
bindGetUserInfo();
}
}
});
},
wxml
<view class="container">
<view class='bg'>
<!-- <image class='auto-img' src='../../images/bg.jpg' /> -->
<image class='usericon' src='{{uicon}}'></image>
<text>{{uname}}</text>
</view>
<view>手机型号:{{model}}</view>
<view>手机版本号:{{system}}</view>
<view>手机屏幕分辨率:{{screenWidth}} * {{screenHeight}}</view>
</view>
mine页面存放背景图片
<view class="container">
<view class='bg'>
<!-- <image class='auto-img' src='../../images/bg.jpg' /> -->
<image class='usericon' src='{{uicon}}'></image>
<text>{{uname}}</text>
</view>
</view>
调节背景图片和昵称的大小位置
.container{
width: 100%;
height: 100%;
}
.auto-img{
width: 100%;
height: 100%;
display: block;
}
.usericon{
height:200rpx;
width:200rpx;
border-radius:50%;
}
.bg>text{
color: white;
}