DAY04 微信小程序项目框架应用

1.实现mine页面不点击button实现自动获取用户权限得到用户头像和名称。

mine.wxml

<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>

小程序预览

 

遇到的问题：实现了用户头像及昵称垂直居中的布局，但昨天编写的修改头像为圆角的语句却不适用了。

2.设置背景图片

在wxss里设置背景为本地图片是不可以的，会报错：“本地资源图片无法通过 WXSS 获取。

有以下三种方式：可以使用网络图片，或者 base64，或者使用<image/>标签。

①使用<image>标签：使用<image>标签只是简单地插入图片，该背景图无法实现不同手机型号自适应高度。

②将图片转换成base64格式，然后点击复制，将复制的内容复制到填写图片路径的地方。但是这种方法得到的路径很长，若在编译时报错，进行删除操作时会很麻烦。

③使用网络图片，将该网络图片的路径复制到填写图片路径的地方，我使用的就是这种方法。

mine.wxml

<view class='a'>

mine.wxss

.a{
width:100%;
height:350rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background:url('http://r.photo.store.qq.com/psb?/V11k7Vuu2kPmx1/j*ZhngN2TY*RUMrr1bdyhauZXRikjuhbp*YPHuns2mw!/r/dFMBAAAAAAAA')
no-repeat 0 0;
background-size: 100% 100%;
}