antd-mobile使用
antd-mobile使用
hezhongjie 发表于8个月前
antd-mobile使用
  • 发表于 8个月前
  • 阅读 106
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

antd-moblie的使用和antd的使用大体相同,相关配置文档和详细.

一下是使用中遇到的问题,且官网中并未明确说明.

1.在webpack.config中引入andt-mobile组件库:

['import', { libraryName: 'antd-mobile', style: true }]             

若组件的样式没有引入或引入错误,请尝试将其修改为 

['import', { libraryName: 'antd-mobile', style: 'css'}]

 

2.自定义svg图片已不再支持(https://github.com/ant-design/ant-design-mobile/pull/1740):因此配置中不必再设置svg-sprite-loader了,svg引用方式改为:<img src={svg的url}/>

注:实际使用中发现即使是组件库中内置的Icon也有可能无法显示,下面是我的测试结果:

dva-cli创建的项目:
   1. svg显示结果:
       -----------------------------------------------------------------------------------
       roadhog配置      不配置      配置svgSpriteLoaderDirs项        svgSpriteLoaderDirs
                                   (只处理antd-mobile中的svg)       (处理antd-mobile和自定义的Icon)
       --------------------------------------------------------------------------------------
       Icon(内置)        不显示         正常                                    正常
       ----------------------------------------------------------------------------------------
       Icon(自定义svg)      不显示         不显示                                  不显示
        --------------------------------------------------------------------------------------
        img标签使用svg         正常           正常                                    不显示
       ----------------------------------------------------------------------------------------
    暂时认为:在dva-cli中为了更好的使用svg,设置svgSpriteLoaderDirs(只处理antd-mobile);自定义svg全部使用img中;
   2.页面js稍大,
   3.官方似乎更推荐使用 create-react(-native)-app进行创建项目

   create-react-app :
    -----------------------------------------------------------------------------------
      无                无         (只处理antd-mobile中的svg)    (处理antd-mobile和自定义的Icon)
     ---------------------------------------------------------------------------------------
     Icon(内置)        不显示        不显示                                 不显示
     ----------------------------------------------------------------------------------------
     Icon(自定义svg)   不显示         不显示                                不显示
     --------------------------------------------------------------------------------------
     img标签使用svg     正常          正常                                   正常
     ----------------------------------------------------------------------------------
    create-react-app中:svg只能自己下载,使用本地的了.

3.全局状态管理:

    1.使用dva-cli创建的项目会有module层,用来统一管理state;

    2.使用create-react-app创建的项目没有默认的module层,因此若想保留一些全局的state和操作全局state的方法,需要在rootRouter中把全局state和操作方法作为参数统一传入childrenRouter中,

4.缩小打包体积:

    在开发单页面应用时,当多个"页面"引用了相同的组件时,会在每个页面中都打包一次,造成文件的体积变大; 但是当这个组件也在rootRouter中引用时,则只会打包进bundle.js中,其他页面中将不会重复打包,将明显减小每个页面的体积(此方法在dva-cil和create-react-app创建的项目中都有效,应该是他们的配置中都有相关的配置).

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 2
博文 28
码字总数 41211
×
hezhongjie
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: