7***@qq.com
7***@qq.com
  • 发布:2024-01-16 18:32
  • 更新:2024-05-28 00:36
  • 阅读:373

uniapp内嵌web-view导航栏问题

分类:uni-app

业务场景:
1、uniapp需要内嵌第三方H5页面,只能通过web-view来内嵌,第三方H5页面还需要调用uniapp的功能 如(相机、相册)等功能
实现方案:
(1)开发一套jssdk,挂在到window上,(这个不多说,官网有说明)该sdk中有对应的方法供H5页面调用。

问题:
(1)如果不设置导航栏,web-view占满屏幕(沉浸式)。于是设置导航栏,但是H5的某一些业务场景是不需要导航栏。有些场景需要导航栏,并且通过跳转协议能够动态设置导航栏标题。

探索实现方案一:

<template>  
    <view class="wbPageWrap">  
        <!-- 网页链接后添加时间戳解决webview缓存问题 -->  
        <web-view  
            :src="webviewSrc"  
            :webview-styles="webviewStyles"  
            :fullscreen="fullscreen"  
            :update-title="updateTitle"  
            @message='getBridgeMsg'  
        />  
    </view>  
</template>
onLoad(options) {  
    this.jumpConfig = JSON.parse(options.jumpConfig);  

    if (this.jumpConfig.jumpUrl) {  
        this.webviewSrc = this.jumpConfig.jumpUrl;  
    }  
},  

mounted() {  
    JsBridge.currentWebview = this.$scope.$getAppWebview().children()[0];  
        // 动态设置导航栏标题  
    uni.setNavigationBarTitle({  
        title: this.jumpConfig.title  
    })  
},

补充:方案一,无法动态隐藏标题栏(如问题中说的:H5某一些场景不需要导航栏,需要全屏展示)不知道有没有大神知道如何通过跳转协议参数来动态隐藏导航栏。

探索实现方案二:自定义导航栏

<template>  
    <view class="wbPageWrap">  
        <!--自定义标题栏-->  
        <view class="headerWrap" v-if="!hideTitle">  
            <view class="goBackItemBox" @click="goBackHandle">  
                <image class="goBackIcon" src="../../static/icon_goBack.png"/>  
            </view>  
            <text class="titleItemBox">{{ titleText }}</text>  
            <view class="otherItemBox"></view>  
        </view>  

        <!-- 网页链接后添加时间戳解决webview缓存问题 -->  
        <web-view  
            :src="webviewSrc"  
            :webview-styles="webviewStyles"  
            :fullscreen="fullscreen"  
            :update-title="updateTitle"  
            @message='getBridgeMsg'  
        />  
    </view>  
</template>

问题:自定义导航栏之后,发现页面没有展示。

解决方案:根据参数判断是否需要隐藏导航栏,如果不需要隐藏导航栏,需要设置web-view的top和height。statusBarHeight为状态栏高度,windowHeight为窗口高度,这里的50是导航栏高度(具体跟进自己业务情况而定)

if (!this.jumpConfig?.config["hideTitle"]) {  
    this.titleText = this.jumpConfig.title;  

    /*设置web-view距离顶部的距离以及自己的高度,单位为px*/  
    JsBridge.currentWebview.setStyle({  
        top: systemInfo.statusBarHeight + 50,  
        height: systemInfo.windowHeight - systemInfo.statusBarHeight - 50  
    })  
}

补充:该方案看上去完美解决了动态隐藏导航栏的问题。

问题:
该方案在点击自定义导航栏返回按钮时,失效,无任何反应。

丫丫个呸的。。。。。折腾了1天,没有找到解决方案。求大神指导。

补充:plus.webview.create的方式创建web-view 无法接受H5给app发的消息,所以此方法放弃了。

如果有大神知道解决方案:求指导。

2024-01-16 18:32 负责人:无 分享
已邀请:
DCloud_heavensoft

DCloud_heavensoft

搞2个本地页面,一个有导航栏,一个没导航栏,不行吗?

  • 7***@qq.com (作者)

    不行,场景是公安行业,用uniapp开发,有一些业务页面是H5,需要通过web-view内嵌到uniapp里面来。uniapp需要提供sdk,让这些H5页面可以调用uniapp的功能,比如相册,相机等。能做的就是让他们的H5页面在跳转的时候携带参数,我们在uniapp的web-view中更具参数来判断是否需要展示导航栏。

    2024-01-16 22:35

7***@qq.com

7***@qq.com - 23223

一样的问题。解决了吗,作者。我的webview也是,返回事件不响应
设置wenview top 之后,导航可以完整显示出来,但是返回按钮无响应

放弃了键盘

放弃了键盘

在web-view页面写好有标题栏和没有标题栏的样式,组件在加载h5的时候给app页面post一个参数告诉页面是否需要标题栏,页面接收到这个参数后不就简单了吗。

  • 7***@qq.com (作者)

    后面确实是这个方案来做的。

    2024-06-21 11:26

要回复问题请先登录注册