刘贵学博客

Ant Design Mobile 渐进系列教程 1:入门

1. 前言

Ant Design Mobile 是阿里蚂蚁金服团队维护的高质量移动应用的前端框架,除了40多个通用组件,更有意义的提出一套类似Ant Design的设计指南和场景模式。 框架的体验确如其slogin一样:微小·确定·幸福。

Ant Design Mobile框架是基于 react native,扩展支持Web组件,不仅可以编译成native的 iOS 与 android App,而且还提供了高性能的HTML5支持(微网站、微信公众号等)。

用框架解决移动应用跨端问题:

为了描述方便,下文将 Ant Design Mobile 简称为 ADM

2. 环境

目前 Ant Design Mobile 还没发布 1.0版本,入门(类似Getting Start)的文档暂时还没有。 但是,开发团队在 问题#56 中给出了一个简单的入门实例:

git clone https://github.com/ant-design/antd-init.git
cd boilerplates/MobileDemo

也可以从 coding.net上下载:

git clone git@git.coding.net:guixue/antdm-demo.git
cd antdm-demo
git checkout demo4

参考 Readme 文档中的安装命令:

npm install npm@3 -g
npm install react-native-cli -g
npm install

3. 第一个例子

环境安装成功后,无需修改一行代码:

npm start

在浏览器中 localhost:8989 可以看到效果:

好了,对于Ant desgin mobile 框架,我们已经算入门了,接下来我们将继续开启【微小·确定·幸福】的Ant desgin mobile之旅…

注: 本文所有代码可以下载:

git clone git@git.coding.net:guixue/antdm-demo.git
cd antdm-demo
git checkout demo1

为了长期交流,antdm-demo 仓库被为私有,注册 coding.net 后, 加 guixue 为好友后,会添加进来。