v0.5+
Use web component to display any web content in the weex page. The src
attribute 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.
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.
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.
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.
<template> <div class="wrapper"> <div class="group"> <input class="input" v-model="value" ref="input" type="url" autofocus="false"></input> </div> <div class="group"> <text class="button" @click="loadURL">LoadURL</text> <text class="button" @click="reload">reload</text> </div> <web ref="webview" :src="url" class="webview" @pagestart="start" @pagefinish="finish" @error="error"></web> </div> </template> <script> 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' }) webview.goBack(this.$refs.webview) }, 10000) }, reload (event) { console.log('will reload webview') modal.toast({ message: 'reload' }) webview.reload(this.$refs.webview) }, 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' }) } } } </script> <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; } </style>