任务:1、实现mine页面不点击button实现自动获取用户权限得到用户头像和名称;
2、头像与名称的背景图实现不同手机型号自适应高度,地图页面给它加个光标。
1、实现mine页面不点击button实现自动获取用户权限得到用户头像和名称
只需要在onLoad: function开始的时候查看是否拥有权限,成功后就可以调用查看用户头像还有用户名称了,在这里调用用户名称还有头像用了open-data的方法,但是这种方法不能像平常一样将头像设定一个格式或者style,但是通过在wxss里面设置overflow:hidden;display: block;还是能够将头像的边角隐藏掉的。
下面是源代码(因为是和获取设备信息代码一起,所以代码有点长):
js源代码:
const app = getApp()
Page({
data: {
model: '',
pixelRatio: '',
windowWidth: '',
windowHeight: '',
language: '',
version: '',
system: '',
platform: '',
},
onLoad: function () {
// 查看是否授权
wx.getSetting({
success(res) {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: function (res) {
console.log(res.userInfo)
var userInfo = res.userInfo
var nickName = userInfo.nickName
var avatarUrl = userInfo.avatarUrl
var gender = userInfo.gender //性别 0:未知、1:男、2:女
var province = userInfo.province
var city = userInfo.city
var country = userInfo.country
}
})
}
}
})
},
bindGetUserInfo(e) {
console.log(e.detail.userInfo)
},
getInfo: function () {
var _this = this;
wx.getSystemInfo({
success: function (res) {
_this.setData({
model: res.model,
pixelRatio: res.pixelRatio,
windowWidth: res.windowWidth,
windowHeight: res.windowHeight,
language: res.language,
version: res.version,
system: res.system,
platform: res.platform
})
},
fail: function (res) {
},
complete: function (res) {
}
})
}
})
wxml源代码:
<!-- 如果只是展示用户头像昵称,可以使用 <open-data /> 组件 -->
<view class="userinfo">
<view class="userinfo-avatar">
<open-data type="userAvatarUrl"></open-data>
</view>
<open-data type="userNickName"></open-data>
</view>
<button bindtap='getInfo' >获取系统信息</button>
<view wx:if="{{model !=''}}" class='bg'>
<view>手机型号:{{model}}</view>
<view>设备像素比:{{pixelRatio}}</view>
<view>窗口宽度:{{windowWidth}}</view>
<view>窗口高度:{{windowHeight}}</view>
<view>微信设置的语言:{{language}}</view>
<view>微信版本号:{{version}}</view>
<view>操作系统版本:{{system}}</view>
<view>客户端平台:{{platform}}</view>
</view>
wxss源代码(图片的dase64代码太长了,在这里就不展示了):
/* 头像 */
.userinfo-avatar {
overflow:hidden;
display: block;
width: 160rpx;
height: 160rpx;
margin: 20rpx;
margin-top: 50rpx;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
/* 字体 */
.userinfo {
position: relative;
width: 750rpx;
height: 320rpx;
color: rgb(255, 255, 255);
display: flex;
flex-direction: column;
align-items: center;
}
/* 设备信息字体 */
.bg{
position: relative;
width: 750rpx;
height: 320rpx;
color: rgb(187, 181, 181);
display: flex;
flex-direction: column;
align-items: center;
}
/* 背景 */
.userinfo{
/* width: 100%;
height: 100%; */
background-size:100% 100%;
background-repeat:no-repeat;
background-image: url("");
}
实现的图片如下:
2、头像与名称的背景图实现不同手机型号自适应高度,地图页面给它加个光标
和昨天一样。。。
所以就直接上代码吧:
其实就是在classify.wxml加一个设定而已
wxml源代码:
{{longitude}}:{{latitude}}
<view class="" hover-class="none" hover-stop-propagation="false" style="width: 100%; height: 100%;">
<map id="map" longitude="{{longitude}}" latitude=" {{latitude}}" markers="{{markers}}" scale="13"
show-location style="width: 100%; height: 100%;"></map>
</view>
就是里面的show-location style="width: 100%; height: 100%;"在起作用
效果图: