拥有Ionic实战标签的文章

ionic3 实战(九)应用内主题浏览器ThemeableBrowser的使用

  这一讲主要实现商品的"抢购"功能1.安装ThemeableBrowser插件;2.使用ThemeableBrowser插件;1.安装插件分别执行以下命令: ionic cordova plugin add cordova-plugin-themeablebrowser  npm install -
阅读全文

ionic3 实战(八)商品详情页的实现

  这一讲主要包含以下几个部分:1.创建商品详情页2.获取商品详情页的数据3.展示商品详情页的数据1.创建商品详情页执行 ionic g page product-details  8-1.png实现点击商品列表项时跳转到商品详情页:在ion-products.html中增加(click)="goDetails(p)"事件,实现跳转:在ion-products.ts增加g
阅读全文

ionic3 实战(七)商品列表页的实现

  这一讲主要包含以下几个部分:1.创建商品详情页2.获取商品详情页的数据3.展示商品详情页的数据1.创建商品详情页执行 ionic g page product-details 实现点击商品列表项时跳转到商品详情页:在ion-products.html中增加(click)="goDetails(p)"事件,实现跳转:在ion-products.ts增加g
阅读全文

ionic3 实战(六)component 组建封装

  这一讲主要包含以下几个部分:1.创建ionic component2.使用ionic component1.创建ionic3组建1.1 组建的创建执行 ionic g component ion-products ,等待30s左右,成功之后可以看到目录会发生变化:6-1.png1.2 组建的数据交互通过@Input()来实现数据交互,ion-products.ts完整代码如下:ion-produc
阅读全文

ionic3 实战(五)商城首页透明导航栏设计

   这一讲主要包含以下几个部分1.配置APP主色调;2.设置ion-content组建的fullscreen属性;3.设计透明导航栏配置APP主色调;找到src/theme/variables.scss,修改$colors的primary颜色值:variables.scss$colors: (  primary:    
阅读全文

ionic3 实战(四)商城首页设计(幻灯片+图标分类)

  商城首页主要包含以下几个部分1.使用ion-slide实现首页幻灯片;2.使用ion-grid实现商品分类;3.使用ion-list实现商品列表;说一下实现思路1.先获取网络请求的数据,查看数据结构;2.根据数据结构来判断需要展示的数据,编写html;3.调整界面样式,编写scss;准备工作开始之前请到阿里开源图标库准备首页需要的小图标,不想自己找的同学,在文章最后的交流群的群文件里有导出好的资源
阅读全文

ionic3 实战(三)封装全局网络请求服务app.service

  这一讲主要包含以下几个部分配置全局的接口地址;封装http get请求参数编码;封装特定http get请求;封装特定http post请求;封装全局的alert和toast;封装全局获取/移除缓存数据的函数在app.module的providers注入全局服务类;新建一个类,命名为app.service.ts,位于src/app/目录下,具体代码如下:app.service.tsimport {
阅读全文

ionic3 实战(二) ionic3懒加载配置

  配置懒加载需要以下几个步骤:1.给需要懒加载的页面配置module.ts;2.在对应页面的.ts文件里增加@IonicPage()特性;3.在app.module.ts移除页面引用;4.使用懒加载;5.懒加载运行效果图;1.配置module.ts依次配置about.module.ts、contact.module.ts、home.module.ts、tabs.module.tsabout.modu
阅读全文

ionic3 实战(一)环境安装、项目搭建

  嘿 好久不见!IONIC3终于趋于稳定,这次的教程选的是一个简单商城案例,主要包含商品分类,和商品列表,商品详情、个人中心。同样,功能很简单,但基本涵盖了实战开发中所用到的内容,包括一些封装思想、网络请求、数据绑定、组建通信、模块懒加载、自定义组件等等。另外,在这个项目实战系列教程中,你可以了解到一个完整项目的开发流程和思路是怎样的,包括一些封装思想,为什么要这样封装,怎样去减少耦合,怎样减少项目
阅读全文
首页 1 末页 共 9 条记录