028-86261949

当前位置:首页 > 技术交流 > Angular框架开发移动商城app

Angular框架开发移动商城app

2019/01/03 09:38 分类: 技术交流 浏览:0

Angular、React、Vue是目前最火爆的WEB前端开发三大框架,本课程将对比三大框架的优势、学习成本、市场流行度及占有率。学习Angular只需要有一定的JS基础,就能快速入门typeScript(开发Angular应用必备的面向对象的脚本语言),然后使用Angular-CLI脚手架工具搭建项目开发环境,利用Angular的组件、服务、指令、模块、路由等核心功能实现移动商城app的开发,最终打包为Android或者IOS系统下的应用程序。



一、Angular、React、Vue三大框架对比

Angular 是一个基于 TypeScript 的 Javascript 框架。 由 Google 开发和维护,它被描述为"超级英雄般的JavaScript MVW 框架"。 Angular(也称为"Angular 2+","Angular 2"或"ng2")是 AngularJS(也称为"Angular.js"或"AngularJS 1.x")的改写,大多为升级了兼容性的继承者。尽管最初般被的 AngularJS 于2010年10月发布,但它仍然在修复bug等问题。新的Angular(sans JS)于2016年9月推出,版本为2.最新的主要版本为版本4, 版本3被跳过。Google,Wix,weather.com,healthcare.gov 和 Forbes 在使用Angular。
Angular团队计划每六个月发布一个主要版本,所以Angular 5在2017年底到来,而Angular 6和Angular 7也分别在2018年6月和2018年12月发布。Angular未来的版本不会像Angular1.x和Angular2.x那样发生重大的变更。所以.x、Angular6.x、Angular7.x和我们现在的开发方式也是一样的。
React 被描述为"用于构建用户界面的 JavaScript 库"。 React 最初于2013年3月发布,由 Facebook 开发并维护,在多个页面上使用 React 组件(不是作为单页应用程序)。根据 Chris Cordle 撰写的这篇文章,React 在 Facebook 上的使用远远多于 Angula r在Google上的使用。 React 也被Airbnb,Uber,Netflix,Twitter,Pinterest,Reddit,Udemy,Wix,Paypal,Imgur,Feedly,Stripe,Tumblr,Walmart 等等。
Vue 是2016年发展最迅速的 JS 框架之一. Vue 将自己描述为"用于构建交互式界面的直观,快速和可组合的 MVVM 框架"。该框架于2014年2月首次由前 Google 员工尤雨溪发布,当时写了一篇关于营销活动和数字的有趣的博客文章。 这是一次非常成功的比赛,尤其是考虑到 Vue 在没有大公司支持的情况下获得如同一个人的表演一样的吸引力。 Vue 目前拥有一批核心开发人员。 2016年,版本2发布。 Vue 被阿里巴巴、百度、Expedia、任天堂和 GitLab 使用,小型项目列表可以在 madewithvuejs.com 上找到。




 

React、Angular 、Vue 都非常好,并且他们中没有一个明显高于其他,怎么选?
  • 如果你在 Google 工作:Angular
  • 如果你喜欢 TypeScript:Angular(或 React)
  • 如果你喜欢面向对象编程(OOP):Angular
  • 如果你需要指导,结构和援助:Angular
  • 如果你在 Facebook 工作:React
  • 如果你喜欢灵活性:React
  • 如果你喜欢在几十个软件包中选择:React
  • 如果你喜欢 JS &"一切都是 Javascript 的方法":React
  • 如果你喜欢真正干净的代码:Vue
  • 如果你想要最简单的学习曲线:Vue
  • 如果你想要最轻量级的框架:Vue
  • 如果你一个人工作或者有一个小团队:Vue(或 React)
  • 如果你的应用程序变得非常大:Angular(或 React)
  • 如果你想用 react-native 构建一个应用程序:React
  • 如果你想有很多跟你一样的开发者:Angular(或 React)
  • 如果你与设计师合作并需要干净的 HTML 文件:Angular (或 Vue)
  • 如果你喜欢 Vue 但是害怕有限的生态系统:React

二、搭建Angular6项目开发环境

  • 前端技术栈
html5、css3、JavaScript、Webpack、TypeScript、Angular6、AJAX(http模块)、ant Design UI组件
  • 后台技术栈
php+mysql / java+mysql / asp.net + sql server
nodejs epress + mongoDB / Nodejs Epress + Mysql
  • 搭建前端开发环境
安装脚手架
npm install -g @angular/cli

 

创建项目,会自动安装依赖
ng new 项目名称 --routing
比如: ng new legouApp --routing
进入项目目录,并安装依赖,不能使用cnpm,原因:webpack打包项目到95%工程会卡死,所以不能使用cnpm
cd loegouApp

npm i 或者 yarn install

运行项目
ng serve --open
http://localhost:4200/
antD环境的搭建

官网 http://ng.ant.design/docs/introduce/zh
执行指令 ng add ng-zorro-antd

帮我们完成 模块安装、模块引入和配置、引入样式,测试antD和angular是否可用,拷贝组件的标签到模板文件中进行测试
三、移动商城功能需求和功能规划


 

"乐购商城"移动端项目是电商B2C的一个典范,倡导"快乐购物、快乐生活、服务满意"的服务理念,主要功能模块参考了京东商场和交易流程,实现了常见的B2C商城的基本的功能,比如:商品分类、商品发布、商品展示、商品查询、会员注册、会员登录、购物车、订单管理、在线支付、交易评价、消息提醒、等功能模块。
四、实现移动商城app部分功能


 

公共组件(复用组件)pubcoms
  • 头部组件 header
  • 页脚组件 footer
  • 底部导航 tabs
  • 分类组件 cate
页面组件(栏目规划) pagecoms
  • 首页 homepage
  • 分类 category
  • 购物车 cart
  • 商品列表 goodslist
  • 商品详情 goodsdetails
  • 我的(会员中心) personal
  • 登录 login
  • 注册 register
依次创建每一个组件
ng g component pubcoms/header
如何处理组件?把公共组件放到根组件app.component.html中,通过路由的链接来切换页面组件
app.component.html
<!-- 页头组件 -->
<app-header></app-header>
<!-- 页面组件内容 -->
<router-outlet></router-outlet>
<!-- 页脚组件 -->
<app-footer></app-footer>
<!-- 底部导航组件 -->
<app-tabs></app-tabs>
配置路由
const routes: Routes = [
{ path:"homepage", component: HomepageComponent },
{ path:"", component: HomepageComponent }, //默认为空值加载首页
{ path:"category", component: CategoryComponent },
{ path:"cart", component: CartComponent },
{ path:"personal", component: PersonalComponent }
];
路由的导航链接
<ul>
<li><a routerLink="/homepage">首页</a></li>
<li><a routerLink="/category">分类</a></li>
<li><a routerLink="/cart">购物车</a></li>
<li><a routerLink="/personal">会员中心</a></li>
</ul>
轮播组件的数据模型banner.component.ts
编号 id 图片地址 imgUrl 图片描述 imgTitle 链接网址 linkUrl
export class BannerComponent implements OnInit {bannerList=[]; //轮播的数据源
constructor() { }ngOnInit() {
for (let index = 1; index <= 4; index++) {
let bannerObj = {
id:index,
imgUrl:`assets/images/banner${index}.jpg`,
imgTitle:'轮播图的标题'+index,
linkUrl:'http://'
};
this.bannerList.push(bannerObj); //循环向数组中追加每条轮播的数据
} }
五、Android环境文件打包、安装、测试
发布angular程序,目的是让应用程序脱离angular环境可以工作,发布就是制作静态资源html,css,js,ng build 指令后生成dist目录,部署静态资源的网页到服务器,拷贝发布后的静态文件到nodejs的public目录,打包网站为安卓或者苹果的安装文件
https://www.apicloud.com/ 安装包云编译平台


 

创建app的流程
  • 注册
  • 登录
  • 创建一个项目,webAPP
  • 名称 legouShop 乐购商城 说明 商城移动端项目
执行打包服务
云端设置 》 上传Icon(手机上显示的app的图标)》Android证书+iso证书》
  • Android证书流程
https://docs.apicloud.com/Dev-Guide/Android-License-Application-Guidance
  • iso证书流程
https://docs.apicloud.com/Dev-Guide/iOS-License-Application-Guidance
云编译,生成二维码,手机扫描就可以下载安装包apk文件
#标签:前端,web