uniapp vue页面嵌套webview组件 ,自定义webview大小

注意 web-view组件要放到最前,在其之前的代码的都会压住

<view class="container">
		<!--webview 放到顶部,通过定位到党网联盟占位的地方,在其之前的代码要被压上 -->
		<web-view src="++++++++++" class="wbp"></web-view>
		<view class='indexPageHeader' id="indexPageHeader">
			<view class="header-top-bg">
				。。。。。。。。。。。。
				<view v-else style="height: 70rpx;"></view>
			</view>
			<!-- webview在页面显示的位置  -->
			
			<view class="viewholder-party">
				<!-- 占位 webview 脱离文档流 要用占位 高度为对webview设置的高度 -->
			</view>
async onReady(){
	// #ifdef APP-PLUS
	var currentWebview = this.$scope.$getAppWebview();
	const query = uni.createSelectorQuery().in(this);
		let topHeight = 0;
		query.select('.header-top-bg').boundingClientRect(data => {
			topHeight = data.height; // 头部元素高度
		}).exec();
	    setTimeout(function() {
			let wv = currentWebview.children()[0];
			wv.setStyle({top:topHeight,height: 86})
		}, 1000); //如果是页面初始化调用时,需要延时一下
	// #endif
},
### 如何在 UniApp 中使用 WebView 组件实现页面嵌套 #### 使用 `@dcloudio/uni-webview-js` 实现消息传递 为了使 Vue 项目中的功能网页能够在 UniApp 应用中正常工作并进行交互,可以通过安装和配置 `@dcloudio/uni-webview-js` 来简化这一过程。下面是一个简单的例子来展示如何设置按钮点击事件向 webview 发送消息。 ```html <template> <div> <!-- 定义一个按钮用于触发消息发送 --> <el-button type="primary" @click="sendMess">发送</el-button> <!-- 配置 Webview 组件 --> <web-view :src="'https://example.com'" ref="webView"></web-view> </div> </template> <script> import uniWebview from '@dcloudio/uni-webview-js' export default { components: { uniWebview }, methods: { sendMess() { // 向 webview 发送消息对象 uniWebview.postMessage({ data: { action: 'message' } }); } } } </script> ``` 此方法允许开发者轻松地通过 JavaScript 对象结构化的方式与嵌入式的 HTML 页面通信[^1]。 #### 处理 .nvue 文件以支持 evalJs 函数 当涉及到更复杂的场景如 app 和 h5 的双向通讯时,需要注意的是只有 `.nvue` 文件才具备特定的方法比如 `evalJs` 进行脚本执行。因此,在设计应用架构之初就要考虑到这一点,并确保所有涉及此类操作的页面都采用 `.nvue` 扩展名编写[^2]。 #### 解决白屏问题及确认加载状态 为了避免可能出现的白屏现象以及确保 html 内容完全加载后再执行后续逻辑,可以在 webview 加载的内容内监听文档的状态变化。一旦检测到文档已准备好,则可安全地初始化其他资源或启动进一步的动作: ```javascript // 当加载状态发生改变时调用该函数 document.onreadystatechange = function () { if (document.readyState === "complete") { // 显示隐藏的应用主体部分 document.getElementById('app').style.display = 'block'; console.log('HTML 文档已经完全加载'); // 注册回调等待 JS Bridge 就绪后通知宿主 App document.addEventListener('UniAppJSBridgeReady', function () { uni.getEnv(function(envInfo){ console.info(`运行环境信息:${JSON.stringify(envInfo)}`); // 可选:此时也可以尝试向父级组件回传某些初始数据 uni.postMessage({data:{show:true}}); }); }); } }; ``` 这段代码片段展示了怎样利用标准 DOM API 结合 UniApp 提供的功能接口有效地管理跨平台间的互动流程[^3]。 #### 接收来自外部的数据 对于那些由其他模块(例如小程序内部导航)跳转而来的页面来说,可能需要处理携带过来的一些参数。这通常是在生命周期钩子函数 `onLoad()` 中完成的,如下所示: ```javascript // 假设这是目标页面 luckdraw.vue export default { onLoad(options) { console.debug("接收到的选项:", options); } } ``` 这里简单记录下所获取的信息以便于调试目的;实际应用场景可能会依据这些输入做更多有意义的事情,像是调整界面布局或是预填充表单字段等[^4]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值