混合开发 Cordova+Ionic+Angular 创建 iOS 及安卓项目

公司有项目是使用混合开发 Cordova+Ionic+Angular 模式编写的,因为我们部门接手了这个项目,因此不得不熟悉一下 Cordova+Ionic+Angular 模式。

先简单谈一下混合开发,我最早是在2016年年底接触的混合开发,当时组内考虑使用 RN 进行项目开发,于是我借着闲暇时间看了一些 RN 方面的技术,也尝试着做了一些小项目...混合开发的优势很明显,总所周知的是一份代码多处运行、开发成本低等等,混合开发的弊端主要是用户体验以及性能稍差,但随着技术的更新,相信混合开发在这方面也会逐渐改善。

接下来步入正题,谈谈 Cordova+Ionic+Angular 入门:

环境搭建(Mac 版):

1.安装 npm 、node.js

建议先安装 brew,终端输入 brew -v 查看是否安装了 homebrew,如没安装,可根据 homebrew 官网 说明进行安装;如已安装,执行 brew install npmbrew install node ,接着查看是否安装成功:

2.安装 ionic 和 cordova

输入命令行 npm install -g cordova ionic ,如果安装不了,可以试试国内镜像安装,首先安装 cnpm,执行 npm install -g cnpm --registry=https://registry.npm.taobao.org 命令安装。然后执行命令 cnpm install -g cordova ionic 安装 ionic 和 cordova,接着查看是否安装成功:

创建 Ionic 工程

1. 创建 ionic 项目

ionic start <name> <template> [options]

例子:

// 生成名字为 ionic-test-App 的空项目
ionic start ionic-test-App blank 

// 生成名字为 ionic-test-App 的带有选项卡的项目
ionic start ionic-test-App tabs

// 生成名字为 ionic-test-App 的带有侧边菜单的项目
ionic start ionic-test-App sidemenu
复制代码

终端执行 ionic serve 在浏览器打开该项目:

2. 创建安卓应用

$ cd ionic-test-App
$ ionic cordova platform add android
$ ionic cordova build android
$ ionic cordova emulate android
复制代码

需打开 Android Studio,并打开模拟器,不然最后一步 ionic cordova emulate android 会报错找不到模拟器。最后运行如下:

3. 创建 iOS 应用

$ cd ionic-test-App
$ ionic cordova platform add ios
$ ionic cordova build ios
$ ionic cordova emulate ios
复制代码

如果出现 ios-sim was not found 错误,可以执行命令: npm install -g ios-sim 。最后运行如下:

学习文档: Ionic Framework

原文地址: 混合开发 Cordova+Ionic+Angular 创建 iOS 及安卓项目

更多文章请点击: Articles

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章