一个游戏官网的0到1过程

前期感受

• 怕业务突然挂了，自己也没发现，缺少前、后端告警；

• 怕兼容性问题，毕竟c端的设备千奇百怪，每次调试的都很头疼，造成项目延期；

• 后端接口虽然只有一个，但整个后端devops部署流程一样都少不了。

项目调研阶段

前端选型

后端选型

1. 云函数的vscode插件已经不维护了，尝试用vscode push函数失败。

2. 文档提供的Serverless Cloud Framework方案只支持到node12。

3. 最重要的是不支持cors配置，需要再接入云网关才能有这个能力，而一个网关一年要900。

项目Demo

后端

// 核心函数，通过
const INPUT = [{
    name: '星瞳_Official',
    room: 'https://live.bilibili.com/22886883'
},{
    name: '学英语',
    room: 'https://live.bilibili.com/24167384',
}, {
    name: '听wo姐说',
    room: 'https://live.bilibili.com/27311555'
}];
async function getYoutuber(item) {
    const yt = { ...item }
    const body = await new Promise(async (resolve, reject) => {
        try {
            const res = await fetch(item.room);
            const body = await res.text()
            resolve(body)
        } catch (error) {
            reject(error)
        }
    })
    const reg = RegExp('\"live\_status\"\:(\\d*)');
    const liveStatus = body.match(reg)[1];
    console.log(liveStatus);
    yt.liveStatus = liveStatus
    youtubers.push(yt);
    return yt
}

前端

1. generate的项目和公司的eslint规范无法同时配置

2. 项目有一个pc端页面，一个m/的移动端页面，需要在浏览器请求的时候服务端根据设备http_user_agent进行分别重定向，但是由于前端是准备放在腾讯云的cos中，没有nginx这一层，所以无法做到分别重定向。只能将nuxt的改为前端渲染应用csr，但未来考虑扩展。

3. nuxt的NuxtImg指令，大部分优化能力都需要项目开启ssr，但因为上面的问题，导致这个指令的优化大部分都用不了

组件库的选择

动画库的选择

设备识别

如何定义素材尺寸

全屏背景（视频/图片）策略

const VIDEO_SIZE = [3840, 2160];
// 这里用视频的宽高比
const materialRatio = videoOriginSize[0] / videoOriginSize[1];

const decideWidthOrHeight = () => {
    // 找出原图的最小边
    const screenRatio = window.innerWidth / window.innerHeight;
    if (screenRatio > materialRatio) {
      return 'w-full';
    }
    return 'h-full';
};

<video
      v-if="videoUrl"
      id="background-video"
      ref="videoRef"
      loop
      muted
      autoplay
      playsinline
      webkit-playsinline
      x5-video-player-type="h5"
      x5-video-orientation="landscape"
      x5-playsinline="x5-playsinline"
      :poster="posterUrl"
      :src="videoUrl"
      class="select-none object-cover object-top"
      :class="[decideWidthOrHeight()]"
    >
      <source :src="videoUrl" type="video/webm" />
    </video>

彩蛋设计

// 根据原始彩蛋的左上角0点位置以及大小，去计算最终的位置

const EASTER_EGG = [
  {
    x: 310,
    y: 237,
    size: [227, 468],
    bgImage: '/_nuxt/assets/images/egg-1.png',
  },
  {
    x: 500,
    y: 860,
    size: [325, 410],
    bgImage: '/_nuxt/assets/images/egg-2.png',
  },
];

const calcCurrentScale = () => {
  if (!eggs) {
    return [];
  }

  if (videoOrientation.value === 'landscape') {
    scale.value = window.innerWidth / videoOriginSize[0];
    return eggs?.map((egg) => {
      return {
        x: egg.x * scale.value,
        y: egg.y * scale.value,
        size: egg.size.map((len) => len * scale.value),
        bgImage: egg.bgImage,
      };
    });
  } else {
    scale.value = window.innerHeight / videoOriginSize[1];
    return eggs?.map((egg) => {
      return {
        x: egg.x * scale.value,
        y: egg.y * scale.value,
        size: egg.size.map((len) => len * scale.value),
        bgImage: egg.bgImage,
      };
    });
  }
};

// 通过hover时实现放大图片覆盖原来位置的原图，并增加动画，产生彩蛋的错觉
<template>
 <img
      v-for="(egg, index) in eggsScaled"
      :key="index"
      :style="`width:${egg.size[0]}px; height: ${egg.size[1]}px; top: ${egg.x}px ; left: ${egg.y}px;`"
      :src="egg.bgImage"
      class="when-hover absolute bg-cover bg-center bg-no-repeat"
  />
</template>
<style scoped lang="scss">
.when-hover {
  transition: all 0.3s;
  opacity: 0;
  &:hover {
    transform: scale(1.2);
    filter: drop-shadow(0px 0px 20px rgb(9, 187, 189));
    opacity: 1;
  }
}
</style>

微信下的视频自动播放

// 微信兼容自动播放
  if (window.WeixinJSBridge) {
    WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
      const videoDom = document.getElementById('background-video');
      videoDom?.play();
      // audioRef.value?.play();
    });
  } else {
    document.addEventListener('WeixinJSBridgeReady', function () {
      WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
        const videoDom = document.getElementById('background-video');
        videoDom?.play();
        // audioRef.value?.play();
      });
    });
  }

正式开发

b站接口

app、微信朋友圈、朋友分享

 meta: [
  { property: 'og:title', content: '《虚环》官方网站- 谁是最强的虚拟偶像？' },
  {
    property: 'og:description',
    content:
      '虚环首曝主题站，谁是最强的虚拟偶像？虚环是一款以虚拟偶像、模拟经营和都市幻想为主题的动作策略演出游戏，游戏中的角色原型均为现实中存在的虚拟偶像。玩家需要在游戏中扮演一位神秘的侦探，收集、培养并组建自己的偶像团体，通过参加VFC最强偶像争霸战，揭开关于比赛和世界的黑暗真相',
  },
  { property: 'og:image', content: 'https://vo.qq.com/img/logo.png' },
  { property: 'og:url', content: 'https://vo.qq.com' },
  { property: 'wechat:title', content: '《虚环》官方网站- 谁是最强的虚拟偶像？' },
  {
    property: 'wechat:description',
    content:
      '虚环首曝主题站，谁是最强的虚拟偶像？虚环是一款以虚拟偶像、模拟经营和都市幻想为主题的动作策略演出游戏，游戏中的角色原型均为现实中存在的虚拟偶像。玩家需要在游戏中扮演一位神秘的侦探，收集、培养并组建自己的偶像团体，通过参加VFC最强偶像争霸战，揭开关于比赛和世界的黑暗真相',
  },
  { property: 'wechat:image', content: 'https://vo.qq.com/img/logo.png' },
  { property: 'wechat:url', content: 'https://vo.qq.com' },
]

对象存储作为页面访问

整个项目的数据情况

总结