ionic3 php 电商视频,使用ionic3/ag4编写模仿京东商城的demo – ion...

本文记录了一位开发者在自学Angular4和Ionic3过程中遇到的问题及解决方法,包括scss图片路径、懒加载、网络请求、全局常量的设置。在项目开发中使用了ionic的cards和toolbar组件,优化了加载速度,解决了CSS兼容性问题。作者还分享了登录界面和部分界面的实现进展,并提到了使用第三方库如swiper和ng-lazyload-image。
摘要由CSDN通过智能技术生成

ionic3_angular4_JD

使用

1.cnpm install或者使用npm install

2.ionic serve

3有需要使用android/ios平台

ionic platform add ios/android

4运行android/ios平台####

ionic run adroid/ios

5.预览界面

iYJRzu.gif

再次记录从NG1-4一下坑吧

1.scss的图片地址应该怎么写

background-image:url('../assets/img/sprites.png');

2.懒加载

懒加载问题,我看到ionic有组件支持,但是不是很完善,可以使用下面的库

3.请求网络

这个是最纠结的,第一个ES6,rxjs不熟悉,看到了很多例子,都不是很懂,其中使用箭头函数还遇到一些坑 有一个简单的例子 点击打开

当然我在项目中用到了代码: GoodsService.ts 使用: good-lists-page.ts

4.全局常量

全局常量的编写是有意义的比如图片地址,URL等

export const APP_SERVE_URL = 'http://88.128.18.193:8080/';

export const FILE_SERVE_URL = ‘ http://88.128.18.144:3333/ ‘;

export const APP_SERVE_URL = ‘ http://localhost:8100 ‘;

更多详细的看下面的思维导图吧,是自己做的笔记 更详细内容在gif文件中的思维导图

nAnuIn.png

结语:

1.耗时两周自学angular4和ionic3,其实很多东西不一样了,还好有SS,自从学了前端,一直在墙外看资料,看了很多人记录的帖子,觉得应该回报一下开源了。

第三方js: 使用typings 添加 swipe r(幻灯片), ng-lazyload-image (懒加载), jquery (快捷开发)

最后,如果这个项目能帮到你,动动你的鼠标点一下start呗

更新日志:

5/8/2017 12:24:10 AM

完成登录界面

5/9/2017 2:24:55 PM

完成发现界面

顶部导航栏没有发现好的实现方式,目前只是可以滑动,点击后的效果不明显

5/9/2017 5:25:19 PM

修改发现界面,模范辣品的分类界面

qQZJvi.png

5/10/2017 12:21:58 PM

1.使用官方组件,cards,toobar,完成购物车界面,高仿京东

小结:总体全部使用ios样式,变化挺大的,估计下一步就考虑适配,和性能问题了,一次编译时间事件挺久的

nY7ZZz.png

5/11/2017 12:24:00 PM

1.分模块加载页面,使用–prod,检测代码,优化以后代码

2.优化后的apk可直接秒进入,不需要等待白屏

3.微调我界面的ui

4.添加key 可以直接打prod模式的release

ionic build android --release --prod

5/15/2017 5:18:38 PM

1.重新使用ionic的grid布局,解决css样式兼容性问题,意外的发现兼容性存在很大的问题

如对于flex布局

android:UC的内核就不兼容

ios:9.3系统+

同时找到一个第三方css,可在不同内核实现flex布局

待以后尝试一下了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值