对于新入门的移动开发者而言,摆在面前的移动应用开发有三种口味
Native App: 本地应用程序(原生App)
Web App:网页应用程序(移动web)
Hybrid App:混合应用程序(混合App)
Hybrid App兼具了Native App良好用户体验的优势,也兼具了Web App使用HTML5跨平台开发低成本的优势。目前已经有众多Hybrid App开发成功应用,比如美团、爱奇艺、微信等知名移动应用,都是采用Hybrid App开发模式,今天实训邦带你学习利用Ionic+angular如何快速开发混合应用App。
分享目录
概念介绍
开发环境及搭建
项目文件目录结构
技术模型及动态数据请求流程图
Ionic组件及storage本地缓存
一、 概念介绍
1.1 Ionic介绍
2013年第一个版本,目前已经发布到了4.0 Beta 也是发展比较快的一个
开发框架。Ionic以AngularJS和ApacheCordova为基础,使用Node.js进行模块管理,使用Html5、Css(SASS)和Javascript技术进行APP开发。
1.2 Node.js与npm简单介绍
Node.js(http://nodejs.cn/download/)是基于Chrome’sV8 Javascript engine 构建的一个Javascript runtime(Javascript运行时),特点是事件驱动、非阻塞等。
npm(https://www.npmjs.com/)是Node.js中的Javascript包管理。
1.3 相关资料
Ionic文档:https://ionicframework.com/docs/v3/
Ionic Github: https://github.com/ionic-team/ionic
Ionic Cli:https://github.com/ionic-team/ionic-cli
Ionic Icons: https://ionicframework.com/docs/v3/ionicons/
Ionic 开发博客: https://www.joshmorony.com/
二、 开发环境搭建
2.1 开发环境
2.1.1、Node.js不管是Window|Mac系统,都需要Node.js
2.1.2、代码编辑器,如VsCode、Sublime等
2.1.3、开发IOS需要Mac系统,安装Xcode即可,上架需开发者证书
2.1.4、 开发Android,推荐Android Studio
2.2 Node.js搭建
2.2.1、安装Node.js(Windows下安装)
2.2.2、下载地址:https://nodejs.org/en/download/
2.2.3、安装后命令行下执行:node --version出现版本号表示安装成功
2.3npm安装
2.3.1、执行:npminstall npm -g 命令
2.4 Cordova、Ionic 安装
2.4.1、资源包下载地址:http://ionicframework.com/docs/overview/#download
2.4.2、命令行下执行:npminstall -g cordova ionic 命令进行安装
2.4.3、 设置npm 淘宝镜像(GFW,导致很多插件下载失败) :npm install -g cnpm --registry=https://registry.npm.taobao.org 命令进行设置
2.4.4、创建应用实例:ionicstart 应用名称 初始类型, 有 blank、tabs、sidemenu3 种类型可选(例如:ionic start myApp tabs)