SNS项目笔记<一>--项目启动

摘要：全新SNS项目启动，现ionic更新到了3.0版本，angular更新到了4.0版本，博主随着这项目，带着大家领略一番ionic的相关技术细节上的问题

1、全新项目下载操作：

在新版本下，ionic得到的健硕性的更新，angular却减少了自己的体积，正所谓：“ionic吃好了，angular减肥了”于是我们也可以抛弃以前的一些坑，直接进入流畅性的操作了。

1.1、重新构建项目：

在https://nodejs.org/en/ 【官方网址】下载最新版本的nodeJS，保证使用的sass为4.5以上，这样在win7,8,10的环境下可以满足编译环境，无需再做任何关于环境配置的操作，即使在mac上也是如此。统一化环境后即可开始我们的项目构建。

1.1.1、创建项目

npm install -g ionic cordova 下载必要的ionic 组件与cordova打包依赖 ionic start demo --v3 创建3版本的ionic项目

效果图.png

这里ionic 很人性化的给了几个选项进行筛选其各类项目分别是：1、tabs-->带底部导航栏项目；2、blank-->空项目；3、sidemenu-->默认主页面有侧滑栏的项目；4、super-->从预建页面到打包完成最适合练习上手的项目；5、conference-->图像展示的项目；6、tutorial-->包含有教程的项目，其中项目里还含有ionic文档；7、aws-->集成了亚马逊SDK的项目。这些项目的归纳很好的让我们开发人员深入研究与学习进去。作为实际交付项目的需要，以及对需求的适合度，我选择了tabs项目。点击回车，进行项目下载并下载依赖，这得等一段时间来完成。

1.1.2、演示项目

ionic serve 老配方，熟悉的味道，这里不需要过多解释，直接等待几许过后便在浏览器中打开项目演示，这里要注意的是，一定要选择带有chrome内核的浏览器，这样可以方便自己按F12进行真机模拟查看，并且默认为极速模式【特别注意，千万不要将自己的浏览器设置为IE兼容，不然看不出效果】

1.1.3、build与打包

ionic cordova platform add android / ios 这里老玩家得注意了，与原命令相比较ionic platform add android / ios新添加了带有cordova命令，这加完依赖后如果是Android可以直接进行build ionic cordova build android了。而IOS还有新的坑，即在这里会报错需要用到root 权限：sudo ionic platform build ios，这里处理IOS权限问题，可以看看 “军神” 的文章：http://www.jianshu.com/p/f60d28adb468 我就不必赘述了。IOS打包其实在build后就可以用xcode打开文件目录：demo/platforms/ios/这样便可以直接使用Xcode进行熟练的打包操作了。

2、新增一个导航界面

在项目进行中要进行对底部导航栏目的修改，在项目中默认为三个导航，可是项目需求需要四个，我们需要ionic g page newPage//这里的newPage为我们开发人员自定义的名称自动生成页面。在这里我生成的名称是"my"：

生成项目目录的变化

这里我们还需要对此页面进行注册：

注册我的页面.png

我们再将此页面添加到tab上去：

添加my页面步骤1

添加my页面步骤2.png

于是有了以下页面：

修改后结果.png

3、更改底部导航的颜色

由于项目使用橙色为主题色，最开始我不知道在哪里修改底部导航栏的颜色，于是去官网上寻找答案：http://ionicframework.com/docs/api/components/tabs/Tabs/ 这里它明确指出sass variables里面有八大属性：

//ios variables
$tabs-ios-tab-icon-color: #000000;// 图标未按下显示的颜色
$tabs-ios-tab-icon-color-active: #FFFFFF; // 图标按下显示的颜色
$tabs-ios-tab-text-color:#000000; // 文字未按下显示的颜色
$tabs-ios-tab-text-color-active: #FFFFFF;// 文字按下显示的颜色

//android variables
$tabs-md-tab-icon-color: #000000;// 图标未按下显示的颜色
$tabs-md-tab-icon-color-active: #FFFFFF; // 图标按下显示的颜色
$tabs-md-tab-text-color:#000000; // 文字未按下显示的颜色
$tabs-md-tab-text-color-active: #FFFFFF;// 文字按下显示的颜色

于是我在这里寻找答案的突破。这些属性出现肯定是在scss里面进行设置的，很多情况下会误认为在：项目名/src/app/app.scss 里面，其实不然，经过一番的苦苦寻找最终在： 项目名/theme/variables.scss 里寻找了答案：

修改variables.png

最终项目显示的效果:

改变点击色.png

4、结尾的话

作为公司项目此项目不应开源，但是我会在项目进行中将比比较精华的部分分享给大家，希望同路人喜欢上这样的UI框架，也希望ionic 在今后能改变我们大部分的工作方式！