Use web component to display any web content in the weex page. The srcattribute is used to specify a special source. You also can use webview module to control some web operation such as goBack,goForward and reload. see webview module.For example,You can use web component and webview module to assemble a browser.

Child Components

This component supports no child components.


src(string): this attribute specifies the page source to load.


width(float): the width of the component, default value is 0. This style must be specified.

height(float): the height of the component, default value is 0. This style must be specifed.

common styles

check out the common styles.

support flexbox related styles
support box model related styles
support position related styles


pagestart: sent after the web component starts loading a page.
pagefinish: sent after the web component finishes loading a page.
error: sent if the web component failed to load a page.

common events

support appear / disappear event.

Check out common events


not support click event.


We use a simple Browser Demo to show how to use web component and webview module. Check out webview module.

<div class="wrapper">
<div class="group">
<input class="input" v-model="value" ref="input" type="url" autofocus="false"></input>
<div class="group">
<text class="button" @click="loadURL">LoadURL</text>
<text class="button" @click="reload">reload</text>
<web ref="webview" :src="url" class="webview" @pagestart="start" @pagefinish="finish" @error="error"></web>
const webview = weex.requireModule('webview')
const modal = weex.requireModule('modal')
export default {
data () {
return {
url : 'https://m.alibaba.com',
value: 'https://m.alibaba.com'
methods: {
loadURL (event) {
this.url = this.value
modal.toast({ message: 'load url:' + this.url })
setTimeout(() => {
console.log('will go back.')
modal.toast({ message: 'will go back' })
}, 10000)
reload (event) {
console.log('will reload webview')
modal.toast({ message: 'reload' })
start (event) {
console.log('pagestart', event)
modal.toast({ message: 'pagestart' })
finish (event) {
console.log('pagefinish', event)
modal.toast({ message: 'pagefinish' })
error (event) {
console.log('error', event)
modal.toast({ message: 'error' })
<style scoped>
.group {
flex-direction: row;
justify-content: space-around;
margin-top: 20px;
.input {
width: 600px;
font-size: 36px;
padding-top: 15px;
padding-bottom: 15px;
border-width: 2px;
border-style: solid;
border-color: #BBBBBB;
.button {
width: 225px;
text-align: center;
background-color: #D3D3D3;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 30px;
font-size: 30px;
.webview {
margin-left: 75px;
width: 600px;
height: 750px;
border-width: 2px;
border-style: solid;
border-color: #41B883;

try it