为何有这个需求

小程序胶囊按钮的样式太影响用户体验了，比如一些时钟，跑马灯等，需要全屏展示。

实现方法

原理并不复杂，就是使用video标签，在页面显示后设置视频元素全屏显示。

<video id="np-clocks" class="screen" controls="{{false}}" loop="{{true}}" bindtap="outFull" vslide-gesture-in-fullscreen="{{false}}"
  bindtap="tips" bindlongpress="outFull" enable-auto-rotation="{{true}}" show-fullscreen-btn="{{true}}">
  <!-- 要显示的内容 -->
</video>

Page({
  onReady() {
    this.video = wx.createVideoContext('np-clocks')
    this.fullScreen("in")
  },
  inFull() {
    this.fullScreen("in")
  },
  outFull() {
    this.fullScreen("out")
  },
  fullScreen(e) {
    if (e === "in") {
      this.video.requestFullScreen({
        direction: 90
      })
      this.video.hideStatusBar()
    } else {
      this.video.exitFullScreen();
    }
  },
  tips(e) {
    wx.showToast({
      title: '长按退出全屏',
      duration: 3000,
      icon: "none",
      mask: true
    })
  },
})

结语

实现的方式比较取巧，但是效果还不错。如果你想实现竖屏的全屏，应该需要用css旋转90度。但是我没有试过，如果你感兴趣，可以试试。