小程序页面嵌入H5

本文主要是介绍小程序页面嵌入H5，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<template>
	<view class="content">
		<web-view id="tq-view" src="https://widget-page.qweather.net/h5/index.html?md=012346&bg=1&lc=accu&key=7b9bf0a2b0064edbb77ecf758c8034f3&v=_1650194718744"></web-view>
	</view>
</template>

<script>
	var wv; //计划创建的webview
	export default {
		data() {
			return {
				canBack:false,
			}
		},
		onLoad() {

		},
		onBackPress() {
		    if (wv && this.canBack) {
		        wv.back();
		        return true;
		    }
		    return false;
		},
		onReady() {
		    // #ifdef APP-PLUS
		    var self = this;
		    var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()

			setTimeout(function() {				
				wv = currentWebview.children()[0];
				currentWebview.children()[0].setStyle({
					pullToRefresh: {
						support: true,
						style: plus.os.name === "Android" ? "circle" : "default"						
					}
				})
				wv.addEventListener(
		            'progressChanged',
		            function(e) {
		                wv.canBack(function(e) {
		                    self.canBack = e.canBack;
		                });
		            },
		            false
		        );
		    }, 500); //如果是页面初始化调用时，需要延时一下
		    // #endif
		},
		onPullDownRefresh(){
			
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

这篇关于小程序页面嵌入H5的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！