Umi相关笔记

***

### umi生成新页面, 使用oni-cli插件, 可以一键生成(models, services, components, index.js, index.less)

> $ npm i -g oni-cli

> $ oni g page 页面名字

***

### umi设置 alias(自定义目录的变量代替)

```js
import { resolve } from "path";
chainWebpack(config) {
    config.resolve.alias.set('@',resolve(__dirname,'./src'));
}
```

***

### umi的this.props.loading里的状态注意: 
1. `yield put(routerRedux.push(home.router));`//不要使用yield put来跳转路由, 会导致loading一直是false
  `routerRedux.push(home.router)//这是正确的`

***

### (vscode)为了能使用`跳转到定义`和 `es7的装饰器`和偷看, 在项目根目录 tsconfig.json 或者 jsconfig.json 文件里写入
```js
{
    "compilerOptions": {
        // 编辑器在自定义类哪里报了个红线的warning
        "experimentalDecorators": true,
        "allowJs": true,
        "baseUrl": ".",
        "paths": {
            // 支持跳到定义@符号的path
            "@/*": ["src/*"],
        },
        "target": "es2017",
        "module": "commonjs",
        //允许从没有设置默认导出的模块中默认导入。这并不影响代码的显示，仅为了类型检查。
        "allowSyntheticDefaultImports": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
}
```
***

### Umi使用动态路由($文件名)后, 如果要共用其它组件的话, 
- 需新建一个index.js 
```
   import CirculationRecord from "@/pages/circulationRecord/index"
   export default ({ match }) => 
```

- model.js 
```
   import circulationRecord from "@/pages/circulationRecord/models/circulationRecord.js"
   export default circulationRecord
```

### **插件使用自定义路径js文件运行报错**

- 报错: `can't be resolved`

- 原因: 配置写在 `config/config.js` 里时插件也是相对于项目根目录的, 如果是在config里面 要写`['./config/mapPlugin.js']`

- 解决: 使用 `[require.resolve('./mapPlugin.js')]`

- 引入地图栗子:
    mapPlugin.js
    ```
    export default (api, opts) => {
        api.addHTMLHeadScript({
            type: "text/javascript",
            src: `http://webapi.amap.com/maps?v=1.4.11&key=6b60d49623eb68b32080579d10f626d5&callback=${"Map" + Math.random() + Date.now()}&plugin=AMap.Riding,AMap.GraspRoad,AMap.Autocomplete`,
            async: "async"
        })
    }
    ```

项目根目录/config/config.js
    ```
    const plugins = [
        [ ... ],
        [require.resolve('./mapPlugin.js')]
    ]
    export default {
        // add for transfer to umi
        base: '',
        publicPath: '',
        define: {
            APP_TYPE: process.env.APP_TYPE || ''
        },
        // history: 'hash', // 默认是 browser
        plugins,
        ...
    }
    ```
    
    然后就可以在page中轻松加愉快的使用高德地图了
    ```
    //界面构造完之后
    var map = new window.AMap.Map('map')//高德地图
    let that=this;
    this.map.plugin('AMap.Geolocation', function() {
      var geolocation = new window.AMap.Geolocation({
        // 是否使用高精度定位，默认：true
        enableHighAccuracy: false,
        // 设置定位超时时间，默认：无穷大
        timeout: 1000,
        // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
        buttonOffset: new window.AMap.Pixel(10, 20),
        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        zoomToAccuracy: true,
        //  定位按钮的排放位置,  RB表示右下
        buttonPosition: 'RB'
      })
    
      geolocation.getCurrentPosition()
      window.AMap.event.addListener(geolocation, 'complete', onComplete)
      window.AMap.event.addListener(geolocation, 'error', onError)
      function onComplete (data) {
        // data是具体的定位信息
        const { callback } = that.props.location.query
        callback({
          addressName: data.formattedAddress,
          location: data.position.lng+','+data.position.lat
        })
        router.goBack();
      }
    
      function onError (data) {
        console.log(data)
    
        // 定位出错
      }
    })
    
    // html
    <div id="map"></div>
    ```

Leanote's Blog

Navigation

Recent Posts

Friend Links