美文网首页
记录一下weex中使用web标签所遇到的问题

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

作者: 键盘之下无新事儿 | 来源:发表于2019-08-18 17:17 被阅读0次

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

    1.拍照与选择照片
    2.录视频
    3.加载第三方url 键盘遮挡输入框

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

    <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交互参考

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/opdgjctx.html