Skip to content
On this page

使用开屏画面

开屏画面内容分类

  • 静态/动态广告:持续 5 秒,除非用户手动关闭。

  • APP LOGO:持续最多 5 秒,用于遮盖网页内容加载过程,一旦加载完成就必须立即关闭,不应等到 5 秒结束。

开屏画面格式分类

既然开屏画面是为了加载别的内容拖延时间,那么它自身必然不能当场加载,而是要提前加载,这时候又分 2 种情况:

  • 静态图片:因为体积小,所以在包括流量网络的任意环境下都可以加载。

  • 动态视频:通常使用 MP4 格式,大小通常在 2MB 以内,使用强缓存,缓存的expires等同于广告截止日期,只在 WIFI 环境预加载。我们也往往在动态广告的角落看到“已在 WIFI 环境预加载”的提示。首先你需要让 APP 壳给 H5 提供当前网络环境信息,以便让 H5 得知当前是否是 WIFI 环境。这不难,不细说。

预加载方案

App.vue读取localStoragesplashScreenInfo,根据信息向服务器定时轮询,询问服务器是否有新广告,有则缓存文件并更新localStoragesplashScreenInfo

localStoragesplashScreenInfo至少有如下字段:

json
{
  "id": 321,
  "sourceUrl": "https://www.abc.com/123.mp4",
  "linkUrl": "/lmn/xyz",
  "expirationTime": 900000
}

checkForNewSplashScreen的执行时机应是在首页全部加载完成之后开始执行。

伪代码如下,静态图片和动态视频的区别在于需要不需要判断 WIFI 环境:

js
// 使用 expired-storage 以支持存储 JSON 和过期时间
import ExpiredStorage from 'expired-storage';
const expiredStorage = new ExpiredStorage();
// 上一次存储的 splashScreenInfo
const splashScreenInfo = expiredStorage.getItem('splashScreenInfo') || {};
function checkForNewSplashScreen() {
  if (NETWORK_STATE === 'WIFI') {
    // 服务端根据上一次的广告 id 告诉你有没有新的广告
    getNewSplashScreenInfo({ oldId: splashScreenInfo.id })
      .then((response) => {
        if (response.data.isNew) {
          // 为了缓存图片或 MP4 文件
          return getSource(response.data.sourceUrl).then(() => {
            // expirationTime 是服务器计算出的还有多少秒过期,注意单位是秒
            expiredStorage.setItem('splashScreenInfo', response.data, response.data.expirationTime);
          });
        }
      })
      .catch((e) => {});
  }
}
// 5分钟轮询一次新广告
checkForNewSplashScreen();
setInterval(() => {
  checkForNewSplashScreen();
}, 1000 * 60 * 5);

杨亮的前端解决方案