文档章节

antd-mobile使用

hezhongjie
 hezhongjie
发布于 2017/08/31 15:42
字数 589
阅读 179
收藏 0

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创建的项目中都有效,应该是他们的配置中都有相关的配置).

© 著作权归作者所有

共有 人打赏支持
hezhongjie
粉丝 4
博文 102
码字总数 51472
作品 0
程序员
私信 提问
搭建我的网站的mobile版的开发环境

image.png 之前我已经搭建过一个开发移动web的react开发环境,在那时我就已经想把我的极客教程弄一个手机上体验好的web app,无奈公司业务太多,整天忙着赶项目,下班回去的时候疲惫不堪,已...

极客教程
2017/10/09
0
0
支付宝技术专家:React前端开发入门与实战

本课程主要讲解React的基础使用技巧及实战案例。 React 是一个用于构建用户界面的 JavaScript 库,主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项...

wd1095864717
2017/06/30
0
0
React-Native antd-mobile-rn组件库集成使用

github地址 https://github.com/ant-design/antd-mobile-samples/tree/master/create-react-native-app 文档地址: https://rn.mobile.ant.design/docs/react/introduce-cn 集成 1. 安装ant......

大灰狼的小绵羊哥哥
09/06
0
0
React Router v4相关

最近在用react router v4,记录一下 基本配置 结合Antd Mobile的 TabBar 主要想法就是TabBar调的页面不用上路由,直接就组件的切换,固定为路由 image.png 各个分页面的里面页面分别搞路由 然...

治电小白菜
03/19
0
0
喜大普奔,Ant Design of Vue 1.0版本发布🎉🎉🎉

vue-antd-ui是一个站在巨人(antd)肩膀上的UI组件库,有着其它组件库没有的优势,几乎继承了antd所有的功能特点,自带antd各种buff。 vue-antd-ui诞生于17年9月份,18年3月份正式开源,800多次...

zeka
07/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

重构系统的套路-面向对象设计原则

前言 一讨论系统重构,很多人不明所以的就开始画各种架构图,写各种高可用,高并发设计方案,其实不知道很多系统的腐朽是从代码失控开始的,所以重构系统之前,架构师需要深谙面向对象设计之...

春哥大魔王的博客
11分钟前
1
0
Private Cloud和On-Premise区别

大家常常听到Private Cloud和On-Premise两个术语,下面通过相关背景介绍区分两者的差别: Private Cloud定义 维基百科云计算 词条中解释了Private Cloud,其含义为“Private cloud is cloud ...

突突突酱
11分钟前
0
0
Linux-ubuntu学习(第一天)

Linux第一天 1.Linux与Windows的区别 Windows是桌面OS。Linux是作为服务器的OS。Linux作为服务器是更安全更稳定的。 2.虚拟机的理解 学习java的时候有个java虚拟机JVM。如果想要在windows上运...

柠檬果过
22分钟前
2
0
以太坊应用开发接口:JSON RPC API

以太坊应用开发接口指的是以太坊节点软件提供的API接口,去中心化应用可以利用这个接口访问以太坊上的智能合约。以太坊应用开发接口采用JSON-PRC标准,通常是通过HTTP或websocket提供给应用程...

汇智网教程
31分钟前
3
0
排序--二分插入排序

二分插入排序是对直接插入排序的一个优化,在排序--直接插入排序中已经分析过直接插入排序的最坏时间复杂度是平方级别的,二分插入排序则是通过二分查找对寻找插入位置进行了优化,在找到插入...

FAT_mt
42分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部