小程序頁面嵌入H5
互聯網 2022/4/26 11:42:48
<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">&…
<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>
關于找一找教程網
本站文章僅代表作者觀點，不代表本站立場，所有文章非營利性免費分享。
本站提供了軟件編程、網站開發技術、服務器運維、人工智能等等IT技術文章，希望廣大程序員努力學習，讓我們用科技改變世界。
[小程序頁面嵌入H5]http://www.yachtsalesaustralia.com/tech/detail-317236.html
贊(0)
- 2022-05-200-CH32V307+ESP8266基本控制篇(自建物聯網平臺)-整體運行測試-微信小程序使用APUConfig配網綁定ESP8266,并通過MQTT實現遠程通信控制
- 2022-05-20一個小程序開發的舒爾特訓練
- 2022-05-18小程序嵌套H5頁面
- 2022-05-18記一次小程序逆向
- 2022-05-18微信小程序添加分享功能(分享給朋友) uniapp版
- 2022-05-17微信小程序授權及檢測訪問當前頁面需要去登錄的操作
- 2022-05-17記錄小程序字符串模板渲染WxParse
- 2022-05-17FinClip小程序+Rust（三）：一個加密錢包
- 2022-05-17FinClip小程序+Rust（二）：環境搭建
- 2022-05-15三、條件和列表渲染（微信小程序開發【有基礎】-組件篇）
