本文主要是介绍小程序页面嵌入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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!