问题总结20-11-30至20-12-06

⭐基本结构

NAS+阿里云邮箱+TFS Git+WiFi

TFS Git：

1. Google浏览器不支持。

2. Git：SSH（生成公钥，然后在安全性中加入），HTTP（删除本地Gitetcconfig文件）。

3. 公司TFS Git里A2Vue项目缺少bulid文件夹。

 

⭐A2Mobile发布：远程桌面连接+192.168.1.67:30001，输入账号密码，进入对应项目文件夹，将自己电脑上的项目yarn build后的bulid文件夹里的文件复制到远程。

 

⭐近期项目A2PC技术栈：React+Echarts+TS+Git。

https://www.cnblogs.com/lodadssd/p/12587694.html

https://www.jianshu.com/p/80140d2ade59

http://www.storagelab.org.cn/zhangdi/2020/01/16/tsreact%e5%bc%80%e5%8f%91%e7%ac%94%e8%ae%b01%ef%bc%9awhat-why-typescript/

https://blog.csdn.net/Tyro_java/article/details/80151369?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

https://www.jianshu.com/p/7ad7ab2745af

 

⭐Echarts组件中formatter属性可以修改图表状态，formatter: '{b}<br/>{a}:{c}%'。

效果：

https://blog.csdn.net/qq_37837029/article/details/88551056

 

⭐toFixed( )四舍五入。

 

⭐首屏显示Loading加载

直接在public文件夹的index.html中：

<div>Loading</div>
<div id='root'></div>

控制样式使Loading显示，root隐藏。

scr文件夹index.tsx里ReactDOM.render之后，document.getElementById控制样式使Loading隐藏，root显示。

 

⭐@keyframes

通过 @keyframes 规则，能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套 CSS 样式。

@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

 https://www.w3school.com.cn/cssref/pr_keyframes.asp

⭐ts+React框架中获取节点的写法

document.getElementById('id')!.style

 https://blog.csdn.net/m0_37697423/article/details/106100922

⭐M3U8视频

移动端显示直接<video>标签即可。

PC端显示需要用到video.js插件 npm install --save video.js 。

videoPlayer.js

import React, { Component } from "react";
import Videojs from "video.js";
//import "videojs-contrib-hls";
import "video.js/dist/video-js.css";

class VideoPlayer extends Component {
  constructor(props) {
    super(props);
  }

  componentWillUnmount() {
    // 销毁播放器
    if (this.player) {
      this.player.dispose();
    }
  }
  componentDidMount() {
    const { height, width, src } = this.props;
    this.player = Videojs(
      "custom-video",
      {
        height,
        width,
        bigPlayButton: true,
        textTrackDisplay: false,
        errorDisplay: false,
        controlBar: true,
        type: "application/x-mpegURL",
      },
      function () {
        this.play();
      }
    );
    this.player.src({ src });
  }

  render() {
    return (
      <video
        id="custom-video"
        className="video-js"
        controls
        preload="auto"
      ></video>
    );
  }
}

export default VideoPlayer;

https://blog.csdn.net/bly1126/article/details/106021315

video.js播放器宽高自适应：在class中增加vjs-fluid。

video.js播放按钮居中：在class中增加vjs-big-play-centered。

http://www.360doc.com/content/19/0405/01/5342107_826513747.shtml

http://www.wlizhijun.cn/

https://blog.csdn.net/qq285679784/article/details/86060723

⭐手机查看Vue项目

package.json中加入--host 0.0.0.0 "dev": "webpack-dev-server --inline --host 0.0.0.0 --progress 。

https://blog.csdn.net/sinat_31900531/article/details/89205110

⭐搭建React+Ts项目后运行yarn start强制要求tsconfig.json文件里"jsx": "react-jsx"，解决方法降低react-scripts版本。