记录一下weex中使用web标签所遇到的问题

在weex中的使用组件web标签,实际则是webview的应用,只是sdk中只封装了基本方法,下面所列举遇到的问题实则都是webview加载url过程中所遇到的常规问题

1.拍照与选择照片

2.录视频

3.加载第三方url 键盘遮挡输入框

正常使用web标签(实际是在weex中通过webiview封装的组件)加载第三方url,如果发生键盘遮挡输入法的问题,我们基本上可以通过常规方法设置'''android:windowSoftInputMode'''即可解决,但在weex中发现不起作用,也不是因为设置了全屏属性导致的,在和前段调试的过程中发现window的窗口大小没有变化,最终确定是web标签的高度没有变化导致的

必须指定 width 和 height 的样式属性，否则将不起作用；

使用过程:
weex官方文档中指出必须有宽高,否则web标签不起作用,自然在使用的时候会设置一个指定高度(屏幕高度-状态栏高度-标题栏高度),然后根据web标签属性src指定一个url,页面正常加载显示,只是在页面输入框获得焦点,键盘弹起来,可输入框不会向上滑动,遮挡了...
按常规方法设置之后都不起作用,在和前端联调反馈说键盘弹起时窗口大小没有变化,页面无法向上滑动,输入框被键盘遮挡,进而做了这样的一个处理,
监听键盘的弹起或者收起状态,
默认键盘是收起的,这个时候使用的是web默认时的初始高度((屏幕高度-状态栏高度-标题栏高度)),
当键盘弹起时,则修改web的高度为原始高度+页面变化高度+标题栏高度
再收起时 则还原为初始高度
如此测试发现正常,问题解决
在这个调试过程中发现部分手机会有一片空白,这是因为有些手册有底部虚拟导航按键,这个高度不有计算导致的

4.应用唤醒和下载

5.加载第三方url 重定向返回键无法返回或者连续点击2次返回可返回

6.返回键问题

7.当weex使用web标签加载第3方h5链接JS交互问题

这里主要涉及3个要素:前端页面(vue代码) 与 原生代码(android或者ios) 和 第3方H5页面,其实也就是原生webview在两端的交互实现, 大概交互流程如图所示

工作簿1.png

具体可以参考链接js交互参考