【Appetite】ionic3实录（二）UI分析及总体配置
【Appetite】ionic3实录（二）UI分析及总体配置
UI分析，自然是提取UI上的有用信息。事先声明我不是美工，样式书写等可能会有不规范的地方。
首先，如果你是初学者，我强力建议你先看完我这篇文章：
然后，请在浏览器新开一个窗口打开这个网页，便于观察参照：
http://www.zcool.com.cn/work/ZMjAyMjk5NDQ=.html
一、确定模版并创建应用
首先我们观察到应用的底部是这样的选项卡：
UI选项卡
所以我们在cli命令行创建一个基于选项卡模版的应用：
ionic start appetite tabs等项目创建成功后，我们执行下面的命令：
cd appetite && ionic serve便会在浏览器看到运行起来的页面：
image.png
注：命令行可以使用
Ctrl+C终止当前命令来执行其它操作
二、项目配置
项目配置.png
注：主要修改ID。作为应用的唯一识别身份，避免和现有的应用ID重复，如在ios打包发布，若发现有相同ID，则无法打包成功。
三、应用配置
上图所示，浏览器默认使用android的样式，而UI设计图采用ios的样式，所以，为了统一也为了方便维护，我们各平台统一使用ios样式，在app.module.ts 中修改配置为：
IonicModule.forRoot(MyApp, {mode: "ios"})四、补全基本页面
UI设计图有4个选项卡（图方便，我强制认为模版创建的三个页面就是UI的前3个选项卡的页面），同时最后一个选项卡是关于个人信息的，所以我们创建一个叫person的页面，页面最终会生成在src/pages这个目录下面。为了入手简单点，先不使用懒加载，于是使用命令行创建页面时加上--no-module参数：
ionic g page person --no-module页面生成后在app.module.ts里添加配置：
import { PersonPage } from '../pages/person/person';
@NgModule({
declarations: [
PersonPage
],
entryComponents: [
PersonPage
]
})接着把新建的person页面关联到tabs上，同时把选项卡图标的文字去掉，tabs.html文件添加：
<ion-tab [root]="tab4Root" tabIcon="person"></ion-tab>tabs.ts文件添加
tab4Root = PersonPage;有人或许会说，ionic3了，都不使用懒加载？其实不是不用，只是先不用，作为入门，未学会走路就学跑，只会让自己更混乱。
五、定制应用主题样式
修改
src/theme/variables.scss文件。
1. 留意到UI上有这样一段文字：
字体
所以我们在variables.scss文件添加字体的配置：
$font-family-base: "HelveticaNeue-Light",
"Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;注：font-family用来定义页面字体，一般定义3-4个。第一个优先级最高。这样如果访问你网页的电脑没有安装你定义的第一个字体，它会用第二个，以此类推。如果都找不到，就用浏览器的默认字体显示你的网页
2. 留意到UI上有这样的颜色说明：
颜色说明
所以我们添加颜色的配置：
//上面4个为UI给定的，下面的为观察后认为需要的
$colors: (
primary: #FC4D6E,
secondary: #FD6F89,
dark: #655A5B,
gray: #B3A3A3,
light-gray: #d9d9d9,
light: #FFFAFA
);3. 留意到UI上标题栏的颜色为浅白色：
便在文件上添加配置：
$toolbar-ios-background: color($colors, light);4. 留意到UI上列表分割线为细线条及淡灰色：
分割线
添加下面配置：
$hairlines-width: 1px;
$list-border-color: color($colors, light-gray);六、全局样式配置
留意到有背景色需求：
image.png
在app.scss文件添加全局样式：
/*********** 背景色 start **********/
.primary-bg {
background-color: color($colors, primary)!important;
.toolbar {
.toolbar-background {
background-color: color($colors, primary)!important;
}
.toolbar-title{
color: color($colors, light)!important;
}
}
}
/*********** 背景色 end **********/普通的元素直接修改背景色，而头部的
ion-navbar其实是toolbar的一种，样式class为toolbar，通过覆写子元素的样式来修改背景色。
最后我们在home.html和about.html的最上面的<ion-header>标签添加该class，同时加上no-border的指令去掉底下的border线：
<ion-header class="primary-bg" no-border>再次查看浏览器运行界面：
修改后的主界面
感觉像是一回事了吧？
为了更接近UI效果图，我们还需要添加自定义字体图标，自定义组件等，篇幅有点长了，我们把内容留到了下一章。