<web-view wx:if="{{webviewShow}}" src="{{webviewUrl}}"></web-view>
const app = getApp();
Page({
data: {
webviewShow: true, // 控制webview的显示与隐藏
webviewUrl: '', // webview的地址
cacheUrl: '' // 缓存要加载的地址
},
//加载h5页面
onLoad: function (e) {
let pageurl = decodeURIComponent(e.pageurl); //页面地址
//传值web-view
this.setData({
webviewUrl: app.data.siteurl + pageurl,
cacheUrl: pageurl,
webviewShow: true // 显示webview
});
},
onHide() {
// 页面隐藏时（如跳转到其他页面），销毁webview
// 这一步是解决后退两次的关键
this.setData({
webviewShow: false
});
},
onShow() {
// 页面显示时，重新创建webview
// 需要设置一个极短的延时，确保组件被完全销毁和重建
// 大部分情况下20-50ms就够了，为了兼容性，设置100ms比较稳妥[citation:2]
setTimeout(() => {
this.setData({
webviewUrl: app.data.siteurl + this.data.cacheUrl, // 重新赋值缓存的URL
webviewShow: true // 显示webview
});
}, 100);
}
})