(TODO)移动端开发经验

调试工具

这里罗列了几款：

https://juejin.cn/post/6844903656895021063

whistle(推荐)

开源
https://juejin.im/post/6861882596927504392#heading-11

这个可以抓包，可以代理文件到本地，和 fiddler 很像。

whistle(读音[ˈwɪsəl]，拼音[wēisǒu])基于Node实现的跨平台web调试代理工具，类似的工具有Windows平台上的Fiddler，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用，不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功能：

USB 调试

1.可以通过https://t.zhouchangju.com/tool/version.html 查看当前浏览器的内核及版本

2.如果在某个内核上无法显示，甚至移动端调试工具都无法加载，可以在 PC 上下载对应版本的浏览器内核进行调试

3.如果 PC 上无法通过下载低版本的浏览器进行调试，可以把测试机通过 USB 连接到笔记本上，然后在笔记本上的 chrome 浏览器中进行真机调试（公司虚拟机不支持 USB）

4.如果以上措施都没办法定位到问题，那么可能是平台版本导致的，比如安卓 5.0 以下的老旧版本，可能连一些基础的东西都不支持，这种情况可以查阅官方支持性文档，或者去相关的社区中寻找对应的解决方案

VConsole

给页面加入 VConsole：

1
2
3
4
5
6
var script = document.createElement('script');
script.src = '//s.thsi.cn/js/datav/lib/vconsole.min.js';
document.getElementsByTagName('body')[0].appendChild(script);
setTimeout(() => {
  new VConsole();
}, 3000);

比如移动端经常会遇到页面缓存导致新修改的内容未生效，就可以通过 VConsole，输入 JS 强刷页面：

1
window.location.reload(true);

Eruda

据尹兄说，比 VConsole 好用：

https://github.com/liriliri/eruda/blob/master/doc/README_CN.md

stats.js

帧数、内存消耗、CPU 消耗的工具

尺寸的处理

使用的是 rem.js。直接 script 标签引入 design-width 为设计稿宽度：

1
<meta name="rem" content="design-width=1170,max-width=480" />

替代方案 vw/vh，postcss-px-to-viewport

postcss.config.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 需要转换的单位，默认为"px"；
      viewportWidth: 1170, // 设计稿的视口宽度，进行比例换算
      unitPrecision: 2, // 单位转换后保留的小数位数
      propList: ['*'], // 要进行转换的属性列表,*表示匹配所有,!表示不转换
      viewportUnit: 'vw', // 转换后的视口单位
      fontViewportUnit: 'vw', // 转换后字体使用的视口单位
      selectorBlackList: [], // 不进行转换的css选择器，继续使用原有单位
      minPixelValue: 1, // 设置最小的转换数值
      mediaQuery: false, // 设置媒体查询里的单位是否需要转换单位
      replace: true, // 是否直接更换属性值，而不添加备用属性
    },
  },
};

这样开发时只需要将单位写成设计稿上的数值，postcss-px-to-viewport 会将 px 转成 vw。

1
2
3
4
5
6
7
8
9
10
11
/* example input: */
.class {
  width: 10px;
  height: 10px;
}

/* example output: */
.class {
  width: 8.55vw;
  height: 8.55vw;
}

常见问题

如何测试低端机型无法正常显示的问题

可以下载低版本 chrome 浏览器直接查看

whistle 搞定环境，弄个亲测可用版本

vconsole 和 e 什么工具

搞个一键开启调试的 webpack 配置项

公司的真机平台如何使用

移动端常用的 API 接口

比如监测是否位于前台、后台

判断系统类型

判断系统版本

修改默认的红色导航栏

分享、二次分享

常见的坑

音乐的自动播放

rem.js 导致 iOS 下图片资源过多时，占用 CPU 和内存过大，进而卡顿的问题

iOS 的 audio 标签报错问题

资源如何预加载

投放方不支持修改导航栏的客户端协议地址

端内投放不用添加分享按钮

页面切换到后台后，音乐仍然在播放

分享：二次分享的接口、配置要求(10jqka 域名)、协议要求(不能去掉协议头)

公司字体加载导致的获取文字包围盒错误的问题

动态柱状图用了公司的 dingstock 字体，有点大，当字体还没加载完成的时候，我们就计算了文字区域的宽度：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let axisX = this.xScale(tick);
const tickDiv = tickValueDiv
  .append('div')
  .style('position', 'absolute')
  .text(() => {
    if (that.option.progress.children.axis.tickFormat && typeof that.option.progress.children.axis.tickFormat === 'function') {
      return that.option.progress.children.axis.tickFormat(tick);
    }
    return tick;
  })
  .style('transform', function () {
      // 就是这一行
    const textWidth = d3.select(this).node().getBoundingClientRect().width;
    axisX -= textWidth / 2;
    return `translate(${axisX}px,  0)`;
  });
    customize(tickDiv, this.option.progress.children.axis.style);
});

结果此时获取到的宽度是 57，实际上应该是 31 才对；这样就导致最终我对文字区域的定位出错了，向左多偏移了一段距离。

解决方案：

1、字体加载时机提前：https://www.jianshu.com/p/e36b1793c642 (我们试了，不行)

2、联系设计师，换个系统默认就有的字体(仅针对 iOS 环境换个字体)

跟同事讨论了之后，还有个办法：

1、主动在页面上先画一个标签，给其指定为我们所需的远程字体

2、在document.fonts.ready之后，执行我们的其他字体相关的操作：

1
2
3
document.fonts.ready.then(function () {
  // 字体加载完成后的逻辑
});

手机通过电脑网络上网

电脑开启热点，手机通过热点上网

chrome inspect 模式进行调试

开发自测标准

单个图片不能大于 100kb(少量图片，可以用熊猫压缩)

音频、图片、js、css 等资源的地址，发布后需要改为静态资源服务器的地址，否则会访问不到

检查静态资源的地址，去掉写死的 http 协议头

是否压缩 js

是否去掉 console

文件名是否已存在中文

低版本浏览器是否做了不兼容的提示信息

其他工具

Chrome 插件

https://jsdevspace.substack.com/p/13-super-useful-chrome-plugins-for

参考资料

判断手机类型：

纯 JS 判断 iPhone 准确机型，iPhone6~iPhoneXs MaxLongsir的博客-CSDN 博客_js 判断 iphone 型号