版权声明:本文为博主原创文章,未经博主允许不得转载 https://blog.csdn.net/AiHuanhuan110/article/details/89602113
使用场景:在移动端的某一块嵌入一个web网页
目录
- 设置web组件加载的网址
- 控制向前、后退、重载
- 完整代码
<web>
事件
基础使用
1.设置加载网址
-
在web标签中设置需要显示的网址(src属性)
<template> <div> <div class="main"> <web class="webview" src="https://vuejs.org"> </web> </div> </div> </template> <script> </script> <style scoped> .main{ display: flex; flex-direction: column; } .webview{ width:720px; height:700px; } </style>
效果如下:
2.控制页面向前、后退、重载
借助
webview
模块
引入模块
const webview = weex.requireModule('webview');
API
goBack
返回
goBack(webElement)
参数 webElement
, 是 <web>
组件元素,可通过 ref
获取
goForward
前进
goForward(webElement)
参数 webElement
, 是 <web>
组件元素,可通过 ref
获取
扫描二维码关注公众号,回复:
6044953 查看本文章
reload
刷新
reload(webElement)
参数 webElement
, 是 <web>
组件元素,可通过 ref
获取
开始使用
-
设置web标签引用名称
<web ref="webview" class="webview" src="https://vuejs.org" > </web>
-
添加按钮,并加上点击事件
<div class="btn-group"> <text class="button" @click="forward">Foward</text> <text class="button" @click="goback">Goback</text> <text class="button" @click="reload">Reload</text> </div>
-
实现页面向前、后退、重载功能
methods: { goback() { webview.goBack(this.$refs.webview); }, forward() { webview.goForward(this.$refs.webview); }, reload() { webview.reload(this.$refs.webview); } }
效果图如下(此时在手机上预览,是可以进行前进、后退和重载的)
完整代码
<template>
<div>
<div class="main">
<web ref="webview" class="webview" src="https://vuejs.org" > </web>
</div>
<div class="btn-group">
<text class="button" @click="forward">Foward</text>
<text class="button" @click="goback">Goback</text>
<text class="button" @click="reload">Reload</text>
</div>
</div>
</template>
<script>
const webview = weex.requireModule('webview');
export default {
methods: {
goback() {
webview.goBack(this.$refs.webview);
},
forward() {
webview.goForward(this.$refs.webview);
},
reload() {
webview.reload(this.$refs.webview);
}
}
}
</script>
<style scoped>
.main {
display: flex;
flex-direction: column;
flex:1;
}
.webview {
flex:1;
width:750px;
}
.btn-group {
background-color:#ebebeb;
padding-top:20px;
padding-bottom:20px;
flex-direction: row;
justify-content: space-around;
}
.button {
color: #fff;
background-color: #337ab7;
height:70px;
width: 170px;
line-height:70px;
border-radius: 35px;
font-size: 36px;
text-align: center;
font-weight: 500;
margin-bottom: 10px;
}
</style>
<web>
事件
- pagestart ==> web页面开始加载时调用的事件
- pagefinish ==> web页面加载完成时调用的事件
- error ==> web页面加载失败时调用的事件
- receivedtitle ==> Web 页面的标题发生改变时调用(仅限 Android 平台)。
顾名思义, <web>
事件,就要写在web标签里:
<web ref="webview" src="https://vuejs.org"
@pagestart="onPageStart"
@pagefinish="onPageFinish"
@error="onError"
@receivedtitle="onReceivedTitle"></web>
然后在methods中实现这些方法
methods: {
// ...其它代码
onPageStart: function(e) {
this.pagestart = e.url;
},
onPageFinish: function(e) {
this.pagefinish = e.url;
if (e.title) {
this.title = e.title;
}
},
onError: function(e) {
this.error = e.error;
},
onReceivedTitle: function(e) {
this.title = e.title;
}
}