今天是实训的第四天,今天主要学习了背景图片实现不同手机型号自适应高度;给地图页面加光标;自动获取用户权限得到用户头像和名称;其中背景图片只能使用网络图片或者base64格式的图片,故还学习了base64格式图片的转换方式;
今天学习的内容和昨天有部分是重复的,所以今天的内容基本上都掌握了。
自动获取用户权限得到用户头像和名称:
<view class='radius'>
<open-data type="userAvatarUrl"></open-data>
</view>
<open-data type="userNickName" ></open-data>
让头像圆框显示:
.radius{
overflow:hidden;
display: block;
width: 200rpx;
height: 200rpx;
border-radius: 50%;
border: 3px solid #faa;
}
base64转换方法:
wx.chooseImage({
success: res => {
wx.getFileSystemManager().readFile({
filePath: res.tempFilePaths[0],
encoding: 'base64', //编码格式
success: res => { //成功的回调
console.log('data:image/png;base64,' + res.data)
}
})
}
});
作业:
实现mine页面不点击button实现自动获取用户权限得到用户头像和名称,
头像与名称的背景图实现不同手机型号自适应高度,
地图页面给它加个光标。