信小程序开发 day03 - 视频播放页实现、引入第三方van

一、视频播放页面实现

1、什么情况下不适合使用async、await？而要使用then、catch？

• 当请求不应该造成阻塞的时候，就优先考虑使用then、catch

2、如何实现播放器固定，底下其他内容可以滚动的效果？

page {
  margin-top: 225px;
}

.video {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

二、音乐的banner实现

1、引入 vant/weapp 的UI组件库

• ① npm init -y
• ② npm install @vant/weapp
• ③ 开发者工具 → 详情 → 勾选使用npm
• ④ 开发者工具 → 工具 → 构建npm

2、如何在js中拿到小程序中某个wxml元素的宽高？

    const query = wx.createSelectorQuery()
    query.select(selector).boundingClientRect()
    query.exec(function (res) {
      console.log(res[0]) // res[0]就是拿到元素宽高信息
    })

3、如果想把上面的代码封装成一个公共的函数，要怎么返回宽高？

• 使用 Promise 包裹

export default function (selector) {
  return new Promise((resolve, reject) => {
    const query = wx.createSelectorQuery()
    query.select(selector).boundingClientRect()
    query.exec(function (res) {
      resolve(res[0])
    })
  })
}

4、如果一个函数被回调多次，我们仅需其中一次，要怎么做比较好？

• 对函数进行【防抖】或【节流】都可

5、什么是图片底部三像素问题？

image.png

• 一个div里面包裹img元素，img会距离div的底部有3个像素的距离，如上图所示
• 这是因为【行盒】默认是基线对其导致的
• 解法①设置div的font-size: 0px;
• 解法②设置div的display: flex;
• 解法③设置img的vertical-align: bottom;
• 等等其他解法