记录一下前端H5的复制功能在ios端的兼容性问题

记录一下前端H5的复制功能在ios端的兼容性问题 问题1问题2

问题1

通过document.execCommand('copy');方法调用复制功能，在ios端无效。
解决办法：
利用copy-to-clipboard库实现复制

问题2

ios端复制，不支持点击复制功能，先异步请求后台数据，再复制后台返回的异步数据。简而言之就是，ios的复制方法，不能复制异步数据，只能复制同步数据。

如下示例：
点击“复制链接”按钮，先调用后端接口获取数据、再复制数据，这样ios是不能复制异步数据的

  <div className="copy-btn" onClick={this.copyUrl}>复制链接</div>
  // 点击复制按钮
  copyUrl = async () => {
    const postData = {
      expire: this.state.whichTagExpire,
      tagId: this.state.whichTagIdSelected
    }
    const path = '/tag/getUrl';
    // 获取异步数据
    const res = await Http.post(path, postData);
    // 复制数据
    copy(res.data);
  }

解决办法：
提前获取异步数据，点击“复制链接”按钮，就只执行复制，而不请求后台接口

  <div className="copy-btn" onClick={this.copyUrl}>复制链接</div>
  // 提前获取异步数据，并存储到state中
  async componentDidMount() {
    const postData = {
      expire: this.state.whichTagExpire,
      tagId: this.state.whichTagIdSelected
    }
    const path = '/tag/getUrl';
    const res = await Http.post(path, postData);
    this.setState({
	  url: res.data
	})
  }
  // 点击复制按钮，直接调用copy，复制url
  copyUrl = () => {
    copy(this.state.url);
  }