ionic3项目实战教程 - 第1讲 ionic3环境安装 项目搭建

简介: 嘿 好久不见!IONIC3终于趋于稳定,这次的教程选的是一个简单商城案例,主要包含商品分类,和商品列表,商品详情、个人中心。同样,功能很简单,但基本涵盖了实战开发中所用到的内容,包括一些封装思想、网络请求、数据绑定、组建通信、模块懒加载、自定义组件等等。

嘿 好久不见!IONIC3终于趋于稳定,这次的教程选的是一个简单商城案例,主要包含商品分类,和商品列表,商品详情、个人中心。同样,功能很简单,但基本涵盖了实战开发中所用到的内容,包括一些封装思想、网络请求、数据绑定、组建通信、模块懒加载、自定义组件等等。

另外,在这个项目实战系列教程中,你可以了解到一个完整项目的开发流程和思路是怎样的,包括一些封装思想,为什么要这样封装,怎样去减少耦合,怎样减少项目后期维护的工作量。

很抱歉,让大家久等了,废话不多说,直接开始。

关于ionic3项目实战教程

img_c54c81b512dc0183039a5e4c78b8226c.png
1-1.png

这一讲主要包含以下几个部分:

  • 1.技术储备;
  • 2.安装环境;
  • 3.新建项目;
  • 4.搭建基础框架;
  • 5.运行效果图;

1.技术储备

在项目开始前,请确保你对以下知识有所了解:

  • 会使用npm基础命令;
  • 熟悉HTML+CSS;
  • 熟悉TypeScript2+;
  • 了解Angular2/4框架;
  • 了解corodva插件的使用;
  • 了解MVC或者MVVM设计模式;
  • 会使用一款IDE,本教程使用的是visual studio code;

2.安装环境

npm install -g ionic@latest

3.新建项目

ionic start ionic3-dress tabs

如果在npm install需要等待�很久,可以直接结束使用cnpm install来安装依赖包。
我的环境如下:

cli packages: (/Users/ionic3-dress/node_modules)

@ionic/cli-utils  : 1.8.1
ionic (Ionic CLI) : 3.8.1

local packages:

@ionic/app-scripts : 2.1.3
Ionic Framework    : ionic-angular 3.6.0

System:

Node : v6.10.3
npm  : 3.10.10 
OS   : macOS Sierra

4.搭建基础框架

此项目主要用到三个tab:首页推荐、优惠精选、个人中心;对应的更改tabs.html代码:

 <ion-tabs>
        <ion-tab [root]="tab1Root" tabsHideOnSubPages="true" tabTitle="首页推荐" tabIcon="home"></ion-tab>
        <ion-tab [root]="tab2Root" tabsHideOnSubPages="true" tabTitle="优惠精选" tabIcon="megaphone"></ion-tab>
        <ion-tab [root]="tab3Root" tabsHideOnSubPages="true" tabTitle="个人中心" tabIcon="person"></ion-tab>
    </ion-tabs>

5.运行效果图

ionic serve
img_cdd886bdd44ed3ba86da2318c1ec6a72.png
1.png

下一讲将讲解如何在ionic3中配置懒加载。

完!

目录
相关文章
|
Android开发
ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享)
ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享) 图片发自简书App 这一讲主要包含以下几个部分: 1.在微信开放平台创建应用获得wechatappid; 2.
1412 0
|
Android开发 iOS开发
ionic3项目实战教程 - 第12讲 ionic3制作icon和splash
这一讲主要包含以下几个部分: 1.设计icon; 2.设计splash; 3.生成各个平台各个尺寸的icon和splash; 1.设计icon 来,打开你的PS,新建-文件,像素为1024*1024,背景透明,确定; .
1175 0
|
Web App开发
ionic3项目实战教程 - 第11讲 ionic3个人中心界面设计
ionic3项目实战教程 - 第11讲 ionic3个人中心界面设计 这一讲主要包含一下几个部分: 1.个人中心ts具体代码展示; 2.个人中心html具体代码展示; 3.
1370 0
ionic3项目实战教程 - 第10讲 ionic3分类菜单设计(类似外卖)
注意,干货来了,相比前面几讲这一讲就要难以消化多了,请做好心理准备。 因为在这之前,经常看到有群友在求这种分类菜单的组建,今天我就为大家再造一个轮子 [微笑脸]。
1092 0
|
Web App开发
ionic3项目实战教程 - 第8讲 ionic3商品详情页的实现
这一讲主要包含以下几个部分: 1.创建商品详情页 2.获取商品详情页的数据 3.展示商品详情页的数据 1.创建商品详情页 执行 ionic g page product-details 8-1.
1067 0
|
Web App开发
ionic3项目实战教程 - 第9讲 ionic3应用内主题浏览器ThemeableBrowser的使用
这一讲主要实现商品的"抢购"功能 1.安装ThemeableBrowser插件; 2.使用ThemeableBrowser插件; 1.安装插件 分别执行以下命令: ionic cordova plugin add cordova-plugin-t...
1448 0
ionic3项目实战教程 - 第7讲 ionic3商品列表页的实现
这一讲主要包含以下几个部分: 1.创建商品列表页 2.根据分类获取商品列表 2.展示商品列表 1.创建商品列表页 执行 ionic g page product-list 7-1.
874 0
ionic3项目实战教程 - 第5讲 ionic3商城首页透明导航栏设计
这一讲主要包含以下几个部分 1.配置APP主色调; 2.设置ion-content组建的fullscreen属性; 3.设计透明导航栏 配置APP主色调; 找到src/theme/variables.
1335 0
|
Go
ionic3项目实战教程 - 第4讲 ionic3商城首页设计(幻灯片+图标分类)
商城首页主要包含以下几个部分 1.使用ion-slide实现首页幻灯片; 2.使用ion-grid实现商品分类; 3.使用ion-list实现商品列表; 说一下实现思路 1.先获取网络请求的数据,查看数据结构; 2.根据数据结构来判断需要展示的数据,编写html; 3.调整界面样式,编写scss; 准备工作 开始之前请到阿里开源图标库准备首页需要的小图标,不想自己找的同学,在文章最后的交流群的群文件里有导出好的资源小图标,下载后直接放到项目的src/assets/icon/目录中即可。
1141 0
|
前端开发
ionic3项目实战教程 - 第2讲 ionic3懒加载配置
配置懒加载需要以下几个步骤: 1.给需要懒加载的页面配置module.ts; 2.在对应页面的.ts文件里增加@IonicPage()特性; 3.在app.
1031 0