小程序 web-view

小程序 web-view

https://opendocs.alipay.com/mini/component/web-view

https://opendocs.alipay.com/mini/api/webview-context

https://opensupport.alipay.com/support/knowledge/46919/201602349122?ant_source=zsearch

---

https://opensupport.alipay.com/support/helpcenter/190

https://opendocs.alipay.com/search?keyword=web view&pageIndex=1&pageSize=10&type=qa

---

webview

1. Open H5 url

    if (replace) {
      Taro.redirectTo({
        url,
      })
    } else {
      Taro.navigateTo({
        url,
      })
    }

1. web-view component with H5 url ??? auto render bug

open iframe page (taro router) ???

// import Taro, { Component } from '@tarojs/taro'
import Taro, { Component, Config } from '@tarojs/taro'

import {
  View,
  Text,
  WebView,
} from '@tarojs/components'
import './index.scss'

// import classNames from 'classnames'
// import PropTypes, { InferProps } from 'prop-types'

const log = console.log;

export default class IframeComponent extends Component {
  config = {
    navigationBarTitleText: '购买须知'
  }
  constructor (props) {
    super(props)
    const {
      url,
    } = props
    this.state = {
      link: url || ``,
    };
  }

  componentWillReceiveProps(nextProps) {
    const {
      url,
    } = nextProps;
    if (url !== this.state.link) {
      this.setState({
        link: url || ``,
      })
    }
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  stopDefaultEvent = (e) => {
    e.preventDefault();
    e.stopPropagation();
    return;
  }

  render () {
    // const {
    //   link,
    // } = this.state;
    const {
      url,
    } = this.props;
    return (<WebView className='iframe-container' src={link} onMessage={this.stopDefaultEvent} />);
    // const {
    //   url,
    // } = this.props;
    // return (<WebView className='iframe-container' src={url} onMessage={this.stopDefaultEvent} />);
  }
}

IframeComponent.defaultProps = {
  url: '',
}

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---