混合开发Ionic+angular快速开发App

本文介绍了混合应用程序(Hybrid App)的优势,并详细讲述了如何使用Ionic+Angular进行移动应用开发,包括概念介绍、开发环境搭建、项目文件目录结构、Ionic组件的使用以及storage本地缓存的设置。通过本教程,新手可以学习到如何快速开发混合应用App。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

对于新入门的移动开发者而言,摆在面前的移动应用开发有三种口味

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)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值