weex的组件< web>的使用（结合webview模块）

使用场景：在移动端的某一块嵌入一个web网页

目录

1. 设置web组件加载的网址
2. 控制向前、后退、重载
3. 完整代码
4. 事件

基础使用

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 , 是 组件元素，可通过 ref 获取

goForward

前进

goForward(webElement)

参数 webElement , 是 组件元素，可通过 ref 获取

reload

刷新

reload(webElement)

参数 webElement , 是 组件元素，可通过 ref 获取

开始使用

1. 设置web标签引用名称

   <web ref="webview" class="webview" src="https://vuejs.org" >    web>
   

2. 添加按钮，并加上点击事件

   <div class="btn-group">
       <text class="button" @click="forward">Fowardtext>
       <text class="button" @click="goback">Gobacktext>
       <text class="button" @click="reload">Reloadtext>
   div>
   

3. 实现页面向前、后退、重载功能

   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">Fowardtext>
  <text class="button" @click="goback">Gobacktext>
  <text class="button" @click="reload">Reloadtext>
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>

---

事件

• pagestart ==> web页面开始加载时调用的事件
• pagefinish ==> web页面加载完成时调用的事件
• error ==> web页面加载失败时调用的事件
• receivedtitle ==> Web 页面的标题发生改变时调用（仅限 Android 平台）。

顾名思义， 事件，就要写在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;
    }
  }