前端小笔记

最新推荐文章于 2024-01-27 00:14:05 发布

-风子-

最新推荐文章于 2024-01-27 00:14:05 发布

阅读量111

点赞数

文章标签： react QRCodes html2canvas vConsole

本文链接：https://blog.csdn.net/qq_15862785/article/details/103577503

版权

1.react 中，让字符串已HTML形式加载显示

dangerouslySetInnerHTML={{ __html: option[optionFix] }}

例如：

let  var ='<label style='color:red'>加载数据</label>';
render() {
return (
      <div
        dangerouslySetInnerHTML={{ __html: option[optionFix] }} />
    )
}

2.默认事件以前的滑动穿透

兼容ios写法：

1. passive:false 参数不写明。在某些浏览器的默认参数不一样，导致穿透无法解决

     document.body.addEventListener('touchmove', function (e) {
          e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
        }, {passive: false});

2.添加样式解决

<body style="touch-action:none;"></body>

3.真机调试H5

<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>

<script type="text/javascript">
  var vConsole = new VConsole();
</script>

4.截屏示例 html2canvas

npm install html2canvas --save

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import QRCodes from 'qrcode.react';
import cssModules from 'react-css-modules';
import styles from '../myQRC/qrc.scss';
import html2canvas from 'html2canvas';
import $ from 'jquery';

const urlParam = getUrlParam();
export const SCREEN_W = document.documentElement.clientWidth;
const backImg = require('../../images/qrc_bg.png');
@cssModules(styles, { allowMultiple: true, errorWhenNotFound: false })
class Qrc extends Component {
  static propTypes = {
    appState: PropTypes.object,
    dispatch: PropTypes.func,
  };

  constructor(props) {
    super(props);
    const { sessionId } = urlParam;
    let requestSrc = 'ios';
    if (userAgentInfo.isApp()) {
      if (userAgentInfo.isIOS()) requestSrc = 'ios';
      if (userAgentInfo.isAndroid()) requestSrc = 'android';
    }
    this.state = {
      isShow: false,
      qrc: '',
      userId: '',
      imgShow: false,
      imgPath: '',
    };
    /*  ${window.NORMAL_SERVER}/user/myQrc.jpg?sessionId=${sessionId}&requestSrc=${requestSrc}&v=${Date.now()}*/
  }

  componentDidMount() {
    this.props.dispatch(toGetOpenStatus(urlParam))
      .then((rs) => {
        console.log(`rs = ${JSON.stringify(rs)}`);
        if (rs && rs.userId) {
          this.setState({
            qrc: `${TOMCAT_PRE_QRC_ADDRESS}?invUserId=${rs.userId}#signRegist`,
            userId: rs.userId,
          }, () => {
            this.setState({
              isShow: true,
            });
          });
        }
      });
    // 延时生成图片
    const that = this;
    setTimeout(() => {
      html2canvas($('#myQrcDiv')[0])
        .then((canvas) => {
          const src = canvas.toDataURL('image/jpeg');
          that.setState({
            imgShow: true,
            imgPath: src,
          });
        });
    }, 1000);
  }

  render() {
    return !this.state.isShow ? '' : (<div style={{ height: '100%' }}>
      <div
        id="myQrcDiv"
        styleName="qcrContent"
        style={{ backgroundImage: `url(${backImg})`, display: !this.state.imgShow ? 'block' : 'none' }}
      >
        <div styleName="qrcBox">
          <div styleName="title">您的专属邀请码为</div>
          <div styleName="qrcNumber">{this.state.userId}</div>
          <div styleName="qrcDesc">好友也可以在注册时直接填写邀请码</div>
          <div styleName="splitLine" />
          <QRCodes
            value={this.state.qrc}
            size={SCREEN_W * 0.50}
          />
          <div styleName="desc">邀请好友扫描二维码</div>
        </div>

      </div>
      <img src={this.state.imgPath} style={{ display: this.state.imgShow ? 'block' : 'none', width: '100%' }} />
    </div>
    );
  }
}

5.页面第一次加载，或刷新时，页面闪烁

5.1 Vue中可写几种都能防止

<style>
    [v-cloak] {
        display: none;
    }
</style>


<span v-bind="xx"></span>

<span v-cloak>{{xx}}</span>

<span v-html="xx"></span>

5.2 普通可以先隐藏页面，加载完成在显示

<body id="bodyV" style="display: none"></body>

  window.onload = function () {
    document.getElementById('bodyV').style.display = 'block';
  }

6.手机打开相机、相册设置

<!-- 打开选择相机或相册  -->

<input type="file" accept="image/*" />

<!-- android手机且使用QQ浏览器  -->

<input type="file" accept="image/*" capture="camera" />

//正常情况下，上面那句大多数手机是直接打开相机，