执行顺序：
npm install create-umi -g
npm add umi -g
create-umi （在空文件夹执行）

如何安装不成功，清空全局，检查系统环境，重新运行执行顺序:
npm remove create-umi -g
npm remove umi -g

环境版本：
node -v v10.15.1（之前版本v8，会报错）
npm -v 6.4.1
git --version 2.29.0

antd上传组件upload上传文件时，不断更新上传status返回的值

handleUpload=(data)=>{

    const fileList=data.fileList;

    this.setState({    //上传文件不断监听status

         fileList,

    })

}

1、设置state变量的值

this.setstate({

   [`fileList${index}`]:index

})

2、获取state变量的值
this.state[`fileList${index}`]

<DatePicker
    format="YYYY-MM-DD HH:mm:ss"
    disabledDate={disabledDate}
    showTime={{ defaultValue: moment("00:00:00", "HH:mm:ss") }}
  />
  
  disabledDate(time) {
   var timeYear=time.get('year');  //当前年
   var currentYear=moment().formart('YYYY'); //今年
   return timeYear!=currentYear;

arcgis地图服务限制特定区域，其他不显示的地图遮罩起来

方法一：使用canvas的clearRect方法，实现镂空效果
方法二：使用canvas的path实现镂空效果

clearRect方法：

        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.fillStyle="#fff";
        ctx.fillRect(0,0,300,150);
        ctx.clearRect(20,20,100,50);

        dojoRequire(["esri/map", 
        "esri/geometry/Point",
        "esri/layers/ImageParameters",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/GraphicsLayer", ], (Map, Point, ImageParameters, ArcGISDynamicMapServiceLayer,GraphicsLayer) => {
          
          
        map = new Map("map", {
            basemap: "satellite", 
            center: [113.36112, 23.12467],
            zoom: 11,
        });
            
               
        var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer", {
          "opacity"        :1.0,
        });
        map.addLayer(dynamicMapServiceLayer);
        })
        
        

react web项目，页面刷新url的参数不消失

1、安装 query-string
npm i -save-dev query-string

2、点击按钮跳转页面：
this.props.history.push({
pathname: '/g6',
search:`?id=${id}&name=${name}`
});

3、g6页面获取参数：
let {id,name} = querystring.parse(this.props.location.search)

安装query-string插件：
npm i -save-dev query-string

在页面引入query-string
import queryString from 'query-string';

例子:

页面一 传参

方法一：

var url='http:baidu.com?name=1&id=2'

window.open(url)

方法二：

this.props.histroy.push({

pathName:'/list',

search:'?id=2&name=1'

})

页面二 接收参数

import queryString from 'query-string';

const {name,id}=queryString.parse(this.props.location.search)

react web项目加密histroy是BrowserRouter路由参数

使用js方法btoa与decodeURIComponent

加密：btoa(unescape(encodeURIComponent(markup)))

解密：decodeURIComponent(escape(window.atob(markup)))

列子：

页面一：传参

var url='name=1&id=2';

url=btoa(unescape(encodeURIComponent(url)))

var newUrl='[http://baidu.com?$]${url}'

window.open(newUrl)

页面二：接收参数

var url=this.props.location.search;

url=url.substring(1)

var newUrl=decodeURIComponent(escape(window.atob(url)))

const {name,id}=queryString.parse(newUrl)

使用leaflet.js自定义gradient
效果如图：

html部分引入样式文件

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css"/>
    <link rel="stylesheet" href="http://brzanek.webd.pl/2017/Leaflet.idw-master/example/style.css"/>

<div id="map"></div>

script代码

var meteoPoints = [
            [53.165246, 15.405640, "32"],
            [53.423798, 14.546544, "30"],
            [54.188946, 16.177284, "33"],
            [53.901899, 14.243151, "33"],
            [53.272598, 16.466926, "33"],
            [54.172996, 15.591984, "13"],
            [52.731677, 14.696901, "30"],
            [53.532029, 15.811808, "33"],
            [54.429791, 16.398224, "33"],
            [53.913285, 15.201148, "32"],
            [53.673976, 15.110885, "32"],
            [53.334351, 15.046874, "31"],
            [53.709982, 16.693660, "33"],
            [53.087991, 16.118558, "33"],
            [53.555588, 16.229920, "33"],
            [54.358499, 16.677729, "33"],
            [53.952695, 16.590419, "33"],
            [53.298850, 15.902762, "33"],
            [53.037661, 15.663925, "32"],
            [52.996378, 15.212792, "31"],
            [53.465263, 15.336522, "32"],
            [52.922836, 14.855624, "11"],
            [52.960999, 14.431242, "30"],
            [53.251748, 14.487758, "30"],
            [53.550950, 14.570500, "30"],
            [53.147528, 14.896472, "31"],
            [53.562454, 14.827649, "31"],
            [53.638311, 15.622662, "32"],
            [54.007723, 15.981029, "33"],
            [53.772207, 15.408535, "2"],
            [54.062919, 15.270917, "32"],
            [54.081248, 15.015305, "32"],
            [53.969001, 14.776628, "32"],
            [54.027660, 14.759995, "50"],
            ];

    var map = L.map('map').setView([53.606015, 15.517806], 8);
 
    var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map);

    var idw = L.idwLayer(meteoPoints,{
            opacity: 0.3,
            maxZoom: 8,
            cellSize: 1,
            exp: 3,

            gradient: {
                0:        '#970033',
                0.01:    '#b10022',
                0.02:    '#b90025',
                0.05:    '#c80026',
                0.07:    '#d8002a',
                0.1:    '#ed002f',
                0.11:    '#fc003e',
                0.12:    '#dd0004',
                0.14:    '#e00004',
                0.15:    '#e90916',
                0.17:    '#ed1e31', 
                0.19:    '#ee4831',
                0.2:    '#fc4a06',
                0.21:    '#fd6007',
                0.22:    '#fd7707', 
                0.25:    '#fd8e07',
                0.27:    '#fda207',
                0.29:    '#feb908',
                0.3:    '#fed809',
                0.31:    '#ffee0a',
                0.32:    '#ffff0c',
                0.35:    '#e8f909',
                0.37:    '#cfef08', 
                0.39:    '#b8e609',
                0.4:    '#a0da08',
                0.41:    '#89d007',
                0.42:    '#76c809',
                0.44:    '#50bf06',
                0.45:    '#209404',
                0.47:    '#1c9f05', 
                0.49:    '#1cae05',
                0.5:    '#21c306',
                0.51:    '#26dc06',
                0.52:    '#29eb07',
                0.54:    '#35ff1b', 
                0.55:    '#44ff33',
                0.57:    '#6cff64',
                0.59:    '#9aff96',
                0.6:    '#cdffff',
                0.61:    '#cdffff',
                0.62:    '#cdffff',
                0.65:    '#cdffff',
                0.67:    '#cdffff',
                0.69:    '#cdffff',
                0.7:    '#cdffff',
                0.71:    '#cdffff',
                0.72:    '#cdffff',
                0.75:    '#cdffff',
                0.77:    '#cdffff',
                0.79:    '#cdffff',
                0.8:    '#cdffff',
                0.81:    '#cdffff',
                0.82:    '#cdffff',
                0.85:    '#cdffff',
                0.87:    '#cdffff',
                0.89:    '#cdffff',
                0.9:    '#cdffff',
                0.91:    '#cdffff',
                0.92:    '#cdffff',
                0.95:    '#cdffff',
                0.97:    '#cdffff',
                0.99:    '#cdffff',
                1:        '#cdffff'                
            },

            max: 50
        }).addTo(map);