学习打卡03 小程序02

lyqiuyo 2021-12-04 16:33:58

一、布局

<!--index.wxml-->
<view>
<image></image>
<text></text>
<button>获取用户信息</button>
</view>

1) <view></view> 容器包裹器类似于div

2) <div></div> 可定义文档中的分区部分，可以将文档分割成独立的、不同的部分。

二、获取信息

<button bindtap="getUserProfile">获取用户信息</button>

bindtap属性为按钮绑定点击事件，响应函数getUserProfile

函数getUserProfile

// index.js
Page({
    /**
   * 页面的初始数据
   */
  data: {
    userInfo: null
  },
  getUserProfile(){
    wx.getUserProfile({
      desc: '用户注册',
      success: (res) => {
        console.log('获取用户信息成功', res.userInfo);
        console.log('头像图片地址',  res.userInfo.avatarUrl);
        this.setData({
          userInfo: res.userInfo 
        })
      },
      fail: (res) => {
        console.log('获取用户信息失败', res);
      },
    })
  }
  })

三、绑定信息

<view class="flexstyle">
<image src="{{userInfo.avatarUrl}}"> </image>
<text>{{userInfo.nickName}}</text>
<but bitonndtap="getUserProfile">获取用户信息</button>
</view>

{{}} 获取Page里data的数据

四、样式布局

/**index.wxss**/
image{
  width: 40vw;
  height: 40vw;
  border-radius: 50%;
}

text{
  font-size: 70rpx;
}

.flexstyle{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

每个对象影响html对应的标签？

vh -- 视窗高度 1vh 表示1%

vw -- 视窗宽度

border-radius -- 设置元素的外边框圆角。使用一个半径确定一个圆形。可以填好多半径，好复杂，暂时理解不了。

font-size -- 字体大小

rpx -- (responsive pixel) 响应单位，微信小程序独有、解决屏幕自适应的尺寸单位。前端好复杂

.flexstyle -- 弹性伸缩盒由view的class绑定

height : 100vh 表示这个view高度占满 100%视窗

display: flex 表示将对象作为弹性伸缩盒显示。不理解，对象是什么? img/text/flexstyle ?

flex-direction: column 表示主轴方向为垂直，这个view中的布局为垂直布局

align-items: center 表示元素于交叉轴的中点对齐

justify-content: space-between 表示元素都等间距显示