业务场景:
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发的消息,所以此方法放弃了。
如果有大神知道解决方案:求指导。
7***@qq.com (作者)
不行,场景是公安行业,用uniapp开发,有一些业务页面是H5,需要通过web-view内嵌到uniapp里面来。uniapp需要提供sdk,让这些H5页面可以调用uniapp的功能,比如相册,相机等。能做的就是让他们的H5页面在跳转的时候携带参数,我们在uniapp的web-view中更具参数来判断是否需要展示导航栏。
2024-01-16 22:35