uni-app的开发实际上本身就是在WebView上开发,只不过很多时候加载的是本地的网页资源。
而在uni-app中嵌入一个网络页面(外部资源),官方也提供了案例就是vue页面中在创建一个web-view标签。
<template>
<view>
<web-view src="http://www.mebugs.com/"></web-view>
</view>
</template>
加载一个网络页面需要解决一个比较尴尬的问题就是网页中做的导航和原生导航共存的问题。
对于APP而言,我们希望尽量使用原生导航,所以在实现中往往隐藏网页自带的导航,然后通过原生导航操作页面。
于是会发现一个问题,原生导航的返回往往是返回到上一个页面(这里指的是uni-app工程里面的上一页)。
优点:
缺点:
<template>
<view>
<web-view src="http://www.mebugs.com/"></web-view>
</view>
</template>
<script>
export default {
onNavigationBarButtonTap(e) {
var index = e.index;
if(index == 0) {
// 如果计数器>1 执行自WebView回退
if(this.index > 1) {
this.back()
}else{
// 框架回退
uni.navigateBack()
}
}
// 个人中心
if(index == 1)
uni.navigateTo({
url: '/pages/index/mine'
})
},
data() {
return {
currentWebview: false,
view: false,
index: 0
}
},
onReady() {
this.initWebview()
},
methods: {
initWebview() { //初始化并获取子WebView
// #ifdef APP-PLUS
this.currentWebview = this.$scope.$getAppWebview()
let this_ = this
// 避免初始化失败 延时判断
setTimeout(function() {
this_.view = this_.currentWebview.children()[0]
if(this_.view) {
// 子WebView绑定打开新页面触发的事件方法
this_.view.onloading = this_.loadNewUrl()
}else{
// 如果子WebView还是没有 递归获取
this_.initWebview()
}
}, 1000)
// #endif
},
back() {
// 子webView回退
this.view.back()
this.index = this.index - 1
},
loadNewUrl() {
// 计数器增加
this.index = this.index + 1
}
}
}
</script>
当前还没有观点发布,欢迎您留下足迹!