pengdongliang 的个人博客

记录精彩的程序人生

Open Source, Open Mind,
Open Sight, Open Future!
  menu

Umi相关笔记


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

$ npm i -g oni-cli

$ oni g page 页面名字


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

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 文件里写入

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "allowJs": true,
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"],
        }
    }
}

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>
    

标题:Umi相关笔记
作者:pengdongliang
地址:https://www.p0d0.com/articles/2019/06/03/1573740583559.html