与后端或APP联调时如何定位问题3——移动端对接

移动端联调主要是三类问题:

  • 第一类问题,后端返回的数据是否符合要求
  • 第二类问题,JSBridge传参或回调错误
  • 第三类问题,兼容性问题

三类问题中,除了第一类查看服务端返回的数据是否符合要求可以在pc机上调试,另外两种都需要真机调试,如何连接真机调试呢?

非常重要:真机调试的APP一定要用debug包,找你对接的APP开发人员打debug包给你,同样,你部署到测试服务器的JS、CSS不要开启压缩模式。

一、真机调试

Android 真机调试

桌面端的前端开发调试非常简单,因为有 Firebug、Chrome DevTools 等工具,直接右击打开就可以看到元素的 CSS,并且可以查看各种资源、修改运行调错 JS 等。而移动端浏览器显然没法带有这些功能,于是可以用数据线连接设备,然后用电脑上的 Chrome DevTools 来调试移动设备上的页面。

第一步:打开移动端开发者模式

  1. 在安卓4.0以后,为了防止手机使用者误操作,系统默认开发者模式都是关闭的。设置→关于手机→连击7次版本号,之后便会在手机设置中出现开发者模式。
  2. 进入设置→开发者选项→打开开发者选项,打开USB调试
  3. 通过数据线连接手机和电脑,部分机型连接电脑时,会提示安装驱动程序,安装驱动程序
  4. 在手机上打开任意一个网页,只要是webview形式的网页都是可以的

第二步:在电脑上调试页面

  1. 在电脑chrome浏览器地址栏输入:chrome://inspect/#devices 会看到如下情况(如果没有显示设备信息,则表示没有连接好,可以拔插手机或关闭模式重开一下,但是部分华为的机型能看到设备名,无法看到webview中打开的网页,原因不明。据测试最好用的调试机是小米)
    与后端或APP联调时如何定位问题3——移动端对接_第1张图片
     
  2. 找到准备调试的页面,确保手机上该页面也是处于激活状态,点击蓝色的 inspect 链接,弹出一个新的窗口:

    与后端或APP联调时如何定位问题3——移动端对接_第2张图片
    注意 :第一次使用chrome://inspect/#devices时,打开的页面是空白,其实是chrome需要下载一些工具才能支持,这些工具国内网是无法访问的,需要。但是只有第一次才需要,以后有了缓存就不要了,除非你的缓存被清掉。
  3.  接下来就可以像在PC机一样调试页面了。

 

 IOS 的真机调试

首先你得有台苹果电脑,没有苹果电脑,那你可以跳过这一节了。

iPhone 等一系列苹果设备对前端还是相当友好的,性能够好,Safari 浏览器也是不错,型号固定统一,问题也比较好解决,苹果公司也提供了一系列开发者工具,但有些手势操作测试以及最真实的用户体验测试还是需要真机。Safari 调试真机上的网页也是非常简单的。

  1. 首先需要在 iPhone 等设备上设置一下 Safari 浏览器,开启调试功能。具体步骤:设置→Safari→高级→打开”web检查器“。
  2. 使用数据线连接电脑,Safari 默认是隐藏开发选项的,在第一次使用的时候,需要在 MAC上打开Safari的开发菜单:顶部菜单栏“Safari”→偏好设置→高级→打开”在菜单栏中显示“开发”菜单


     
  3. 在iOS设备上的Safari浏览器中打开要调试的页面
  4. 切换到MAC的Safari,在顶部菜单栏选择“开发”→找到你的iOS设备名称→右边二级菜单选择需要调试的对应标签页,即可开始远程调试

     
  5. 在设备上用 Safari 浏览器打开需要调试的页面,之后在桌面版的 Safari 开发选项中即可看到进行调试,跟用chrome devTools差不多。

微信 Webview 调试

微信开官方开发团队提供了自带的调试工具:http://bbs.mb.qq.com/thread-1416936-1-1.html

其它调试工具

Fiddlerr抓包

Fiddler是一个抓包工具,可以将网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作,也可以用来检测网络安全。个人认为更适合非前端人员抓包APP数据,而前端需要调试的内容更多,不太建议采用这种模式调试,更详细的抓包教程:https://www.cnblogs.com/miantest/p/7289694.html

 

二、JSBridge联调接口

JSBridge联调接口,基本集中在检查入参和回参是否符合要求。建议调用JSBridge的方法写成Promise形式,统一封装,如调用扫码接口scanCode写成统一的调用方式,可根据不同的平台,如公司自研APP、公众号、UC浏览器,根据运行的平台调用对应的JSBridge,这样页面适配性更高,即可实现一套H5页面实现多端底层接口调用,迁移成本也很小。

调用底层JSBridge实现思路大致如下:

// 调用方法
support.scanCode().then(function(result){
    // 执行扫码后回调
});


//底层调用方法
class support{
    constructor(){
        // 初始化运行环境,判断当前平台
        // 异步引入平台JSBridge,如微信公众号
        let environmentName = JRE();// 判断当前平台
        switch (environmentName) {
            case ENVIRONMENT.WEIXIN_CLIENT:
                //异步加载微信JSBridge
                ...
                weixinClient.init(weixinUrl).then(function(wxResult){
                    this.bridgeName = 'weixin';
                    this.bridge = wx;               
                }).catch(function(error){
                    console.log('微信公众号调取失败',error)
                });
                break;
           case ENVIRONMENT.APP_CLIENT:
                //异步加载APPJSBridge
                ...
           default:
                //默认加载高德地图
                ...
         }       
    }
    
    function scanCode(){
        return new Promise(function(resolve, reject){
            switch (this.bridgeName) {
                case ENVIRONMENT.WEIXIN_CLIENT:              
                     resolve(weixinClient.scanCode());
                case ENVIRONMENT.APP_CLIENT:
                     ...
                default:
                     resolve({
                         errorMessage:'更多内容请下载APP'
                     });
                } 
        })
    }    
}
    
class weixinClient{
    ...
    function scanCode() {// 调用微信扫码接口
        return new Promise(function(resolve, reject) {            
            this.bridge.scanQRCode({
                needResult: 1,
                success: function(res) {
                    resolve(res);
                }
            });            
        });
    }
}

建议在调用JSBridge前打console输出调用参数,拿到JSBridge中的返回,输出返回参数,即可查出入参和回参是否正确,再找对应的app开发人员配合解决。

 

三、兼容问题

移动端常见兼容问题:

  • 安卓和IOS机型部分事件处理机制不一样
  • 低端机型不支持ES6和fetch等语句

1、安卓与ios常见的不同事件处理机制
1)IOS中click事件延迟300ms响应
最简单的处理方案:判断当前运行设备,如果是IOS用touchend替代click,然后preventDefault来阻止默认行为click

2)IOS中input键盘事件keyup、keydown、keypress支持不是很好
解决方案:
判断当前运行设备,如果是IOS用onInput事件处理操作

3)IOS中的DIV的click事件无效 
最简便的处理方案:给​目标元素加一条样式规则 cursor: pointer

2、低端机型不支持ES6和promise等语句
页面在多数机型中有效,但在部分低端机型,如iphone6s、Iphone6中页面无法渲染,出现白屏的情况,这个时候连接真机调试,能看到iOS Safari 报错
SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.
这就是低端机型不支持es6。
解决方案:
安装以下插件
babel-preset-es2015
babel-polyfill
es6-promise

 

四、如何判断问题由webview引发

我前面戏称这是一篇甩锅教程,其实解决问题的思路都是先查己方问题,确定不是己方问题,再排查是哪一方引起的。

在工作中,有些时候APP端没有处理好webview,也会引起H5页面bug。H5页面要运行在多平台,如公众号、安卓、IOS等,如何确定和归纳问题是属于webview引起的,应该由和你配合的APP开发人员去处理呢:

  1. 首先,这类bug不是通用性的,如果一个bug在所有平台中都暴露,这一定是你的问题。
  2. 这类bug是在特定的容器中暴露,在其它容器中正常,如安卓正常,IOS不正常。找到暴发问题的移动终端如IOS,查页面在该移动端的浏览器能否正常运行,再看在app中是否能正常运行。
  3. 测测其它平台,如PC端浏览器和安卓APP是否正常运行,采用排除法,确定只有IOS的有问题,基本就是IOS端APP的webview问题。

 

结语:

这个系列写到这,基本结束了,有很多部分因手上没有实际的项目可供参考就没有整理进来,如支付宝的JSBridge调试、后端服务常见报错,会在以后的工作中慢慢完善进来。基本上都是一些工作中的总结,如有错漏,欢迎交流指点。

 

与后端或APP联调时如何定位问题

与后端或APP联调时如何定位问题1--chrome开发者工具简介

与后端或APP联调时如何定位问题2——与后端联调接口

与后端或APP联调时如何定位问题3——移动端对接

 

参考:

http://yujiangshui.com/multidevice-frontend-debug/

https://www.cnblogs.com/charliechu/p/5981346.html

https://segmentfault.com/a/1190000003810652

你可能感兴趣的:(与后端或APP联调时如何定位问题3——移动端对接)