tips: 非前端同学慎入,可能看不懂我说的啥 =。=
问题现象
安卓和ios的应用内通过webview内嵌h5页面,某个页面在其他安卓以及ios机型上都运行正常的情况下,oppo R7 plus,页面功能失效
项目背景
失效功能的方法是 通过jsbrige传过来的客户端内置的方法,大概意思就是 客户端把方法暴露在window上,h5页面通过调用window[方法名]来使用
调试方法
上面说了,方法是客户端提供的,所以只有在端内环境下生效,浏览器打开h5页面地址是没办法调试的,所以这个调试过程就比较难受,下面介绍一种稍微简单的方式
- 手机数据先链接电脑和手机,提示是否授权访问什么的选 是
- 打开chrome浏览器,输入 chrome://inspect/
- 在手机上打开你需要debug的h5页面
- 在chrome 界面找到你打开的链接,如图
5. 点进去上图所示绿色模块,就可以打开浏览器下的手机调试模式
6. h5本地代码内 通过console.log 的形式然后部署到手机访问链接的服务,即可进行调试
排查过程
调试方法有了,下边就是找原因,为什么只有这个机型下不行,(过程很长,偏业务分析,不赘述了)排查发现,把客户端方法注册到h5window的方法是在 项目工程目录下的public的index.html内,这个index.html有什么特点呢,它是不会被webpack打包的,我们现在大部分都是es6语法,然后这个项目里把注册客户端方法的es6写法放在了public的index.html内,然后这个机型又很老,它内置的浏览器识别不了es6的语法,所以导致功能失效,其他机型是可以识别es6语法的,所以只有这个巨老的OPPO下失效了(现在还有人用吗,,,???)
总结
1.其实很久没有调试过内嵌端内且调用端内方法的项目了,所以对调试方法不熟,学习到了调试方法, 2.功能失效的时候 是报错 > 的错,但是没有敏感到想到是 es6语法的问题, 3.为避免类似功能出现,以后在public的index.html内还是慎用 es6的语法,js方法放到项目内部去写,不要在index.html内直接写es6语法