tonge 2017-08-19 696浏览量
嘿 好久不见!IONIC3终于趋于稳定,这次的教程选的是一个简单商城案例,主要包含商品分类,和商品列表,商品详情、个人中心。同样,功能很简单,但基本涵盖了实战开发中所用到的内容,包括一些封装思想、网络请求、数据绑定、组建通信、模块懒加载、自定义组件等等。
另外,在这个项目实战系列教程中,你可以了解到一个完整项目的开发流程和思路是怎样的,包括一些封装思想,为什么要这样封装,怎样去减少耦合,怎样减少项目后期维护的工作量。
很抱歉,让大家久等了,废话不多说,直接开始。
在项目开始前,请确保你对以下知识有所了解:
npm install -g ionic@latest
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
此项目主要用到三个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>
ionic serve
下一讲将讲解如何在ionic3中配置懒加载。
完!
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
集结各类场景实战经验,助你开发运维畅行无忧