feat(components): 新增 WebView 组件 close #2018

packages/taro-components/src/components/web-view/__test__/web-view.test.js

@@ -0,0 +1,18 @@
+import Nerv from 'nervjs'
+import { renderIntoDocument } from 'nerv-test-utils'
+import WebView from '../index'
+
+describe('WebView', () => {
+  it('render WebView', () => {
+    const onLoadSpy = jest.fn()
+    const view = <WebView src='https://www.baidu.com' />
+    const component = renderIntoDocument(view)
+
+    const loadEvent = document.createEvent('Event')
+    loadEvent.initEvent('load', false, false)
+    // const dom = Nerv.findDOMNode(component)
+    // expect(dom.textContent).toEqual('hello taro')
+    component.getDOMNode().dispatchEvent(loadEvent)
+    expect(onLoadSpy).toHaveBeenCalled()
+  })
+})

packages/taro-components/src/components/web-view/index.js

@@ -0,0 +1,33 @@
+import Nerv from 'nervjs'
+import omit from 'omit.js'
+import './style/index.scss'
+
+class WebView extends Nerv.Component {
+  constructor () {
+    super(...arguments)
+    this.onLoad = this.onLoad.bind(this)
+    this.onError = this.onError.bind(this)
+  }
+
+  onLoad (e) {
+    const { onLoad } = this.props
+    onLoad && onLoad(e)
+  }
+
+  onError (e) {
+    const { onError } = this.props
+    onError && onError(e)
+  }
+
+  render () {
+    const {
+      src,
+      ...other
+    } = this.props
+    return (
+      <iframe className='taro-webview' onLoad={this.onLoad} onError={this.onError} {...omit(this.props, ['src', 'className'])} src={src} {...other} />
+    )
+  }
+}
+
+export default WebView

packages/taro-components/src/components/web-view/style/index.scss

@@ -0,0 +1,11 @@
+iframe {
+    border: none;
+}
+.taro-webview {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+}

packages/taro-components/src/index.js

@@ -26,3 +26,4 @@ export { default as Tabbar } from './components/tabbar'
 export { default as TabbarContainer } from './components/tabbar/container'
 export { default as TabbarPanel } from './components/tabbar/panel'
 // export { default as Navigator } from './components/navigator'
+export { default as WebView } from './components/web-view'