前言
最近在做hw项目，刚好又被一些以前踩过的坑，又坑了一次，为了下次不忘记，特地总结一下这些年做移动端遇到的相关知识点
希望能帮助到有缘人，快一年没更新了， 😁😁😁
本文主要内容
- 移动端适配方案，从原理到适配方案的整体思路
- 移动端和APP交互具体流程明细，包含拦截器方式采坑记录
- 调试方法（包括真机调试安卓和ios，window如何调试ios真机等）
- 移动端兼容性问题（这个后续补上）
移动端适配方案
下面是图片，想要复制的点原文地址查看
rem适配方案详解(喜欢的自己看)
vw适配方案详解(喜欢的自己看)
总结
rem我也用过，感觉不太适应现在了，最近的项目我都开始向vw迁移了,我们的设计稿都是375，然后代码里面写px，通过这个插件自动转换成 vw
移动端和APP交互具体流程明细
下面是图片，想要复制的点原文地址查看
坑点
拦截式方式的一些坑爹行为
因为我们公司都是需要兼容低版本的安卓，所以用的是拦截式的实现，当客户端回调我们webview的方法的时候，安卓和ios的入参是有区别的：
- 1.我们在安卓环境下会在回调的参数里面收到的是一个JSON字符串,我们需要调用JSON.parse 来转换一下；
- 2.我们在IOS环境下会在回调的参数里面收到的是一个对象，不需要调用JSON.parse 来解析！！
- 3.一定要让客户端大哥保证，只做一次整体的JSON 转换字符串，如果做多次，会导致我们JSON解析报错，具体解析报错如下所示；
- 比如说我现在和客户端大哥约定的格式是 ｛status:1, data:{}｝, status 为1表示调用成功，0表示调用失败，data里面放的是客户端给我们的参数；
- 我碰到的情况是 客户端大哥先在data这层做了一次JSON.stringify, 然后在最后对整个一次JSON.stringify 相当于做了两次；
- 这个时候就会触发下图的问题，原因是经过webview的调用之后，会少一个反斜扛，这个原因我还没具体深究，懂的大哥可以带我；
- 解决方法就是只做一次整体的JSON.stringify 就不会有问题。
- 还有比如说调用客户端打开一个新webview的方法，这种一般都需要传一个链接给他们，然后链接需要调用encodeURIComponent方法把编码一下，再给他们。
注入式的，没使用过，等待有缘人带我飞
下面是图片，想要复制的点原文地址查看
个人推荐的真机调试方式
下面是图片，想要复制的点原文地址查看
预留一个坑，移动端兼容问题，有空的时候来补一下
下班了，下次有空再来补一下这里咯
参考资料
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。