uniapp嵌套webview页面时,出现白屏

uniapp嵌套webview页面时,出现白屏解决方案——subnvue加载弹框

1.封装subnvue公共组件:loading.nvue文件,注意是nvue文件

<template>
	<view class="content"></view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onReady() {
			uni.showLoading({
			    title: '加载中...',
				mask: true
			});
		}
	}
</script>

2.在pages.json文件中配置subnvue:

{
	"path": "首页路径",
	"style": {
		"navigationBarTitleText": "首页",
		"navigationBarBackgroundColor":"#1677FF",
		"navigationBarTextStyle":"white",
		"app-plus": {
			"subNVues":[{
				"id": "loadingSubnvue", // 唯一标识
				 "path": "pages/monitor/history/subNVue/loading", // 页面路径
				  "type": "popup",//原生子窗口内置样式,可取值:'popup',弹出层;"navigationBar",导航栏
				"style": {  
					"position": "dock",  
					"dock": "bottom",  
					"background": "transparent"
				}  
			}]
		}
	}
},

3.在页面中使用loading.nvue文件:

<web-view :src="webviewUrl" @message="handleMessage" :update-title="false"></web-view>
onLoad(){
	this.subnvue_open();
},
onUnload() {
	uni.$off('loadingSubnvue');//移除监听配置的原生子窗体
},
methods:{
//打开配置的原生子窗体
	// #ifdef APP-PLUS
	subnvue_open() {
		this.subNVue = uni.getSubNVueById('loadingSubnvue'); //通过id获取nvue子窗体
		this.subNVue.show();
	},
	// #endif
	// 接收webvue的Html发送过来的消息 (APP端) 手机真机测试看打印结果
	handleMessage(evt) {
		//如果html页面加载完成,则关闭loading弹窗
		if(evt.detail.data[0].show == false){
			uni.hideLoading();
		}
	}
}

4.webview页面中监测html页面是否加载完成:

//加载发生变化时调用
document.onreadystatechange = subSomething
function subSomething() {
    // 判断是否加载完成
    if (document.readyState == 'complete') {
		document.getElementById('app').style.display = 'block'
		console.log('加载完成','-------------------')
	    // 加载完成后传值给uniapp
		document.addEventListener('UniAppJSBridgeReady', function() {
			uni.getEnv(function(res) {  
				console.log('当前环境:' + JSON.stringify(res));  
			}); 
			uni.postMessage({
				data: {
					show:false
				},
			})
		})
	}
}
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值