移动端web活动项目常见问题

比诺
157 阅读8分钟

development

1、如何实现monorepo多活动并存的开发和部署？

答：需要区分活动的关键举措是Webpack 的「entry」和「ouput」的配置，目前的实现方式主要是在共用「package.json」的情况下，不同的活动拥有独立的项目文件夹，通过监听处理vue-cli-server 的相关命令及参数(形如：vue-cli-service serve --page=pages/classification)即可得到对应「entry」，而「ouput」可通过配置「outputDir」来区分构建输出目录。另一种方案是各自独立维护「package.json」及构建部署程序。

2、如何实现千万奖金池的8位数字滚动过渡效果？

答：比较基础的方案是维护一份二维数组，每个占位纵向渲染10个数字子元素，数字滚动效果是通过定时器微控数字子元素的父容器的纵向偏移值，在过渡时间后调整该占位的数字子元素的父容器的纵向偏移值，达到指定数字仍有过渡效果。

3、为什么使用html2Canvas生成海报时二次加载当前页面依赖的静态资源？

答：经排查原因是html2Canvas拷贝并渲染了当前document.documentElement，故在当前页面中使用的相关依赖会二次加载，不过资源加载会遵循其缓存规则。

4、移动端设备适配标准

答：目前由测试同学输出机型适配标准，具体屏幕适配方案需要结合视觉稿。常规方案如下：

横向物理分辨率纵向物理分辨率方案
≦750px≦1334px视觉稿100%还原。
≦750px>1334px设定内容最大高度「2048px」，正常文档流布局(特殊情况上下居中)，剩余部分用活动背景色填充。
>750px≦1334px设定内容最大宽度「1536px」，正常文档流布局，左右居中，剩余部分用活动背景色填充。
>750px>1334px设定内容最大宽度「1536px」，最大高度「2048px」，正常文档流布局(特殊情况上下左右居中)，剩余部分用活动背景色填充。

5、移动端web如何调试？答：

  • 浏览器devtool的移动设备模拟器调试；
  • 移动端模拟器调试，如网易MuMu、夜神模拟器等；
  • 使用微信开发者工具调试；
  • 使用chrome://inspect页面检查工具；
  • 使用真机调试；

6、如何测试Vue组件 ？

答：可进行单元测试、组件测试、端到端测试等，可参考 Vue 2.x 测试、Vue 3.x 测试等文档。

7、使用了哪些弹性布局方案？

答：目前弹性布局方案主要有百分比、rem、em、vw/vh等，现有项目中主要使用rem作为整体方案，局部采用百分比、em等方案，实现方案借助了fancy-lib-flexible 来动态计算html的font-size及dpr，然后使用CSS 后处理器插件 postcss-pxtorem 将项目开发中使用的px转换为rem。

8、如何解决移动端web滚动穿透？

答：当尝试滚动移动端web的弹窗时，会发生层叠上下文层级较低的DOM发生了滚动，即滚动穿透。可以尝试阻止滚动事件冒泡；或者找到额外的滚动元素，然后向其添加样式overflow: hidden；

build and deploy

1、目前活动仍在内部测试中，但需要在今后的特定时间点上线，如何提前线上内测且不影响线上用户？

答：进行灰度构建和部署。如果只有一个机器或数据库或其他服务等提供支持，前端可通过指定构建新目录和生成新的访问链接等方式简单实现前端的线上内测，而后端则需要考虑通信、数据、服务等隔离来实现。

2、Jenkins项目构建过久，如何对脚手架及本地资源优化？

答：此种情况一般是项目文件过多过大，除了对本地资源进行压缩优化或上传到OSS外，还可配合webpack对脚手架进行优化，具体优化措施见webpack的性能优化。

3、如何实现web项目快速开发和部署? 答：

  • 革新的研发部署方式。如引入码良来实现基于组件的可视化页面编辑和一键部署，大大缩短了体验课落地页等的投入生产的周期；
  • 优化现有项目研发流程。目前项目的主要研发流程是产品在TAPD提报需求，评审通过后多人协同开发某个项目或需求，在开发周期内会经过开发、单员及组件和项目测试、codeReview，然后推送到代码库并提测。在测试环境和预发环境进行冒烟测试、STE测试、QA测试、产品及业务验收后进行线上灰度部署和线上全量部署，待回归测试无误后代表成功交付。其中借助gitlab webhooks和jenkins实现了推送代码自动部署。若要实现CI/CD，需要完善大量的测试套件和自动化测试、将jenkins及OPS等关联到TAPD、丰富使用Jenkins Pipeline等，目前Jenkins不仅可以作为CI 服务器，还可以变成任何项目的持续交付中心。

runtime

1、活动上线成功后用户仍访问旧页面？

答：目前C端项目使用了CDN静态加速(静态资源)和CDN动态加速(HTTP 接口)。用户仍访问旧页面即命中了缓存，可能是客户端缓存也可能是CDN缓存，首先清下CDN缓存并预热，仍不行的话需要引导用户手动清除客户端缓存。

2、如何快速替换活动文案和图片？

答：快速替换活动文案和图片，即是在最小人力成本和时间成本的条件下实现，对于图片等静态资源可以通过替换在线资源并刷新CDN来实现，对于文案类的可以将其后台配置化，通过接口读取文案内容。

3、如何为移动端活动生成海报？

答：借助Canvas绘制能力及良好兼容性的toDataURL API可以将页面内容绘制并生成海报，在项目中可借助成熟的HTML到Canvas的页面插件来代替手动使用canvas实现绘制，如html2canvas、dom-to-image、rasterizeHTML.js等。

4、点击生成海报时存在延迟2s的问题？

答：生成海报需要一定的处理时间，可将生成海报动作提前。由于红包活动的海报是与当前页面无耦合的，特在页面渲染完成后在浏览器闲置时将海报对应dom放置到浏览器或webview的视口外来提前生成海报。

5、海报生成效果模糊？

答：影响海报生成的因素有很多，如各元素质量及透明度、绘制图片的方式、图形与画布的缩放比 scale、画布大小等。

6、如何处理字体包加载慢导致app内web渲染延迟？

答：在确定需要使用新字体包后，若是项目中的文字均是非动态文字，可以借助font-spider对这些文字进行抽离压缩，否则就需要在字体包加速速度和文案渲染速度方面着手，使用强制缓存和CDN，提升字体包加载速度。当字体包加载完成后渲染引擎需要渲染并替换对应文本，可配置字体的文本显示方式(font-display)，其默认是在字体包加载完成后才会渲染文本，优化配置参考如下：

@font-face{
    font-family: 'HYZhengYuan';
    font-display: swap; // 文本阻塞阶段耗时为0，先加载无样式文本，待字体包加载完成后切换字体，直到全部文本切换完成。
    src : url('~@/styles/font/HYTANGMEIRENW.TTF');
}

7、用户标识符存在重复的现象，如何优化？

答：C/S和B/S结构下采集用户唯一标识的方案

8、如何处理微信链接屏蔽？

答：上线的活动在被友商或用户举报后存在被屏蔽链接的情况。建立监控及预警机制，在被屏蔽的第一时间生成新的活动链接(新的域名或路径)并代替推广或投放链接。

9、如何捕获异常及上报？

答：前端异常大概分为运行时、非运行时、异步、同步等异常，不同的异常有不同的捕获方式，具体表现如下表。异常可采用fetch、XMLHttpRequest、new Image().src、navigator.sendBeacon等进行上报。目前公司层面将异常捕获及上报至阿里云日志统一封装维护，异常种类及捕获方式如下所示：

异常种类运行时同步运行时异步非运行时同步非运行时异步
捕获方式
  • try catch
  • window.onerror
  • window.addEventListener('error')
  • Promise.prototype.catch
  • window.onerror
  • window.addEventListener('error')
  • Promise.prototype.catch
  • try catch
  • window.onerror
  • window.addEventListener('error')
  • Promise.prototype.catch
  • element.error
  • window.onerror
  • window.addEventListener('error')
  • Promise.prototype.catch

    • 10、如何定位并处理移动端异常？答：

    1. 收集用户异常截图或视频；
    2. 收集异常发生的开始时间、频率、账号等；
    3. 然后通过埋点和异常上报数据基本定位问题；
    4. 其次再结合用户的网络环境、操作行为(录屏)等进一步定位问题。后续可以引入ARMS增强应用实时监控。
    avatar
    文章
    阅读
    粉丝