# 移动端Web开发注意事项 > 该文档将基于现有项目开发中遇到的问题汇总，目前项目： `水贝点金` 、 [`扶贫主页(**钉钉工作台主页定制**)`](/733491) ## 规范 ### `webpack` 打包文件生成大小要求 1. 主入口所有文件加起来最好是在 `244 KiB` 以内 - 单个静态资源(js、css、png等)最好是在 `244 KiB` 以内 --- - 依据： `webpack4` 在打包完成后会对生成的文件进行检查，超过 `244 KiB` 会有警告 ### 数据请求 数据请求需考虑到请求失败，每个请求失败后需要重新请求，重复请求次数建议是3次以上 --- - 设计方案: 通过局部变量作为计数，在请求异常时重新发起，实现如下： ~~~ js static executeService<T>(service: IServiceInfo) { return new Promise<T>((resolve, rejct) => { let reloading = RELOADCOUNT let execute = () => { Service._executeService<T>(service).then(res => { resolve(res) }).catch(err => { let type = err.type ? err.type : '' if (reloading > 0 && type !== 'FormatError') { window.baseConfig.development && console.log('数据请求失败，重新请求，请求计数：' + reloading); execute() reloading-- } else { rejct(err) } }) } execute() }) } ~~~ - 依据： `水贝点金` 中有一个场景频繁出现，截图如下：  经分析，当在流畅的网络环境中，只要订单中的重量超过 **10000g** 就必然重现，通过调试发现第一次数据请求，会出现请求超时或直接请求失败，通过第二次请求就成功获取数据 ### 数据提交 数据提交到后端，需要加锁，防止重复提交 --- - 设计方案：待讨论 - 依据： 弱网络情况下，用户点击提交多次会生成多个支付单  ### 页面跳转 在App设计和实现时，尽量少用 `pushState` 、 `popstate` 、 `遮罩层` 这三者 --- - 设计方案：在钉钉容器中，只使用钉钉提供的原生 `遮罩层` - 依据： 在Web网站下，怎么通过返回键把 `遮罩层` 隐藏呢？目前主流的方案是：通过 `popstate` 监听返回事件，通过 `pushState` 往 history 添加记录，在 `popstate` 中隐藏`遮罩层`，而在 `水贝点金` 中使用了大量的 `遮罩层` ，而且页面过多跳转，一个处理不慎，就会出现各种跳转异常 ### 网络异常 在App设计和实现时： 1. 进入页面需有加载中的友好提示，如果获取数据失败需要友好的提示-数据获取失败，在已经加载的页面也需要友好的提 - `SPA`下，使用路由懒加载，需要对每个页面切换做判断，防止用户点击后无反应 --- - 设计方案：待讨论 - 依据：`水贝点金` 中，整个项目使用了`SPA`，由于项目过大，通过`Vue Router`的`懒加载`把不同路由对应的页面分割成不同的代码块，然后当路由被访问的时候才加载对应页面，在弱网络下，如果页面体积较大（超过244 KiB），会出现第一次访问该页面时，点击无效的用户体验(其实页面已经在加载中了)，也有可能会加载失败 ### 页面预加载 在App设计和实现时，确定会跳转到下一页的，需要预加载下一页所使用到的资源 --- - 设计方案：待讨论 - 依据：`水贝点金` 中有个场景是：引导页是本地静态网站，在引导页加载完成后需要预加载正式App的站点首页资源，而目前这一块并没有完善，用户从引导页跳转到首页依然需要时间等待 ### 静态资源加载 在App设计和实现时： 1. 静态资源(主要是图片啦)的加载需要`懒加载` - 对于加载中和加载失败的图需要有个样式提示 - 图片需要进行cdn加速，需要通过url进行图片编辑 - 图片加载效果一般是，默认先加载缩略图，然后再慢慢变清晰 - 图片链接统一使用`https`协议 --- - 设计方案：待讨论 - 依据：`水贝点金` 中的图片加载即使在流畅的环境也加载缓慢，更不用说弱网络的环境下了。 - 类比行业效果：正常新闻类App，即使在几乎断网的网络状态下，图片依然会呈现，只不过是非常低的分辨率 ### 组件按需加载 在`Vue`的使用中，有个全局组件的概念，在使用`Vue`时，应该尽量避免使用；那么对应`React`中，其实就是针对一些`UI库`(例如： antd)进行组件按需加载的操作 --- - 设计方案：`Vue`中，避免过多的使用即可，针对第三方UI库，无论是VUE还是React都可以通过 `Babel` 的 插件实现 - 设计方案存在问题：存在多个库时，只有第一个的库样式生效，目前只能引用全局样式 - 依据：`水贝点金` 中有一个场景，用户在初次加入`App`时，在弱环境下会出现较长的白屏，导致该问题的原因就是：主入口所有文件过大导致的，而在`水贝点金` 中导致该问题最大的根源就说过多使用全局组件  ### 样式内联图片加载 在App设计和实现时，为了兼顾兼容性问题，会使用一下像素极小的图片作为背景图，这种图片即使在弱网络环境下也完美加载(前提是cdn)，但是在断网情况下会加载失败导致样式异常，需要有重新加载机制 --- - 设计方案： 在写样式的时候，涉及到 `*-image: url("...");` 时，必须也有 `*-color: #...;`，以防止图片加载失败有备用的默认颜色替代 - 依据：`水贝点金` 中有两个主题，在需要切换主题是关闭网络然后切换就会出现以下情况  ## 问题 ### 代码调用时机 1. 在VUE中，使用 `keep-alive` 后，定义滚动视图，并通过该视图在每次 `mounted` 和 `activated` 中进行数据请求，导致组件第一次加载是会对数据进行多次请求 ### 后台编辑器编辑的文章在前端显示异常 1. 不同浏览器有不同的默认样式，通过 `cssreset-min.css` 进行覆盖，需要重新添加： ~~~ less .font-size(@size: 24){ font-size: @size * 1px; /*px*/ } h1{ .font-size(64); font-weight: bold; } h2{ .font-size(48); font-weight: bold; } h3{ .font-size(37.44); font-weight: bold; } h4{ .font-size(32); font-weight: bold; } h5{ .font-size(26.56); font-weight: bold; } h6{ .font-size(24); font-weight: bold; } i, cite, em, var, address, dfn { font-style: italic; } strong, b { font-weight: bold; } ~~~ ### 安卓样式异常 1. 圆形图片变成椭圆了，目前的处理是通过绝对定位解决的 - 低版本浏览器不支持弹性布局导致的样式问题 - `border`边框样式丢失 ## 灵异事件 > 没找到根源的问题 ### 无网络下 TcScrollView 上拉加载过多出现布局异常 - 异常截图  - 左：正常代码 右： 异常代码  ### 同一张图片在列表下多次显示，会出现部分丢失