混合开发H5页面嵌入ios/Android及echarts图表问题总结

刚开始接到需求说一个H5页面要嵌入Android/ios端,从没接触过.所以这是我第一次接触.
我是用react框架写的H5页面内有用react-for-echarts图标.
然后ios端和android端会把webview(系统中内置了一款高性能 webkit 内核浏览器,)方法发给你来调用,从而可以获取到APP的登录信息,然后根据获取的登录信息来发才能请求接口.上代码!

首先在react钩子中判断是ios/Android

Android

根据Android提供的方法同步可以获取到用户信息,前面用逻辑短路更严谨的判断下,以防报错

IOS

IOS比较麻烦点,首先IOS端会提供方法后在调用全局的函数(注意是全局函数),所以使用window点什么来定义,通过形参就可以接受到用户信息

问题一

联调APP

因为是要获取到APP用户的信息才能访问数据的,所以一开始不知道怎么联调.
一开始是用手机连着电脑的APP开发软件,然后在我的js代码中alert出数据来联调的,真的太麻烦了.后面看到一个工具 vconsole就方便很多了

vconsole

我们在写webapp或者移动端网页需要嵌入到app时候，尤其是在APP内置的webView上加载我们的页面，想要查看手机浏览器信息是非常困难的事，当出现问题的时候，你又不能查看日志，一般会连接本地测试环境，然后在alert来打印日志（这种做法太蠢了），然后一遍一遍的定位bug，修改代码。

问题二

打包上传后没问题,后面发现在测试中发现有些手机从APP端点进去就白屏了这个问题一直很难定位,APP端也一直在找问题点,后面只能代码一段一段的屏蔽打包上传测试,发现是echarts表格出问题了,估计是适配不了echarts-for-react,所以又定位到图表,后面采用了echarts原生写法,写在react上,问题解决.

####效果如图