前言

ionic是一个垮平台开发框架,可通过web技术开发出多平台的应用。但只建议开发简单应用。复杂的应用需要用到许多cordova插件,而cordova插件的更新或者移动平台的更新很可能导致插件的不可用,维护升级成本较高。

安装

  1. 安装node.js。https://nodejs.org/en/
  2. 通过node.j安装ionic

    npm install -g ionic
  3. 查看安装情况
sh-3.2# node --version
v10.14.2
sh-3.2# ionic --version
5.0.0

输出了版本好说明安装成功了。

创建项目

  1. 创建myApp项目 ionic start myApp tabs
  2. 进入myApp目录,运行项目 cd myAppionic serve

    这时可能会遇到问题

    Error: Cannot find module 'node-sass’

    安装相应的node-sass模块就可以了。

    npm install node-sass --save-dev

    没问题后可在浏览器看到项目运行起来了

添加ios平台

  1. 添加cordova插件 npm i -g cordova
  2. 添加ios平台 ionic cordova platform add ios
  3. 准备ios代码 ionic cordova prepare ios,以后都只需要这一步就可以在xcode上运行。
  4. 将生成的代码在xcode上运行

  5. ios平台运行结果

添加android平台

  1. 添加步骤同ios ionic cordova platform add android

    如遇到 404 Not Found: amdroid@latest

    先更新版本在尝试

    ionic cordova platform rm android

    ionic cordova platform update android

    ionic cordova platform add android
  2. 在androidStudio运行android

    可能会遇到构建异常
The minSdk version should not be declared in the android manifest file. You can move the version from the manifest to the defaultConfig in the build.gradle file.

在manifest把minSdkVersion删掉即可,目录是:

CordovaLib->AndroidManifest.xml

app->src->main->AndroidManifest.xml

<uses-sdk android:minsdkversion="19">

3. android平台也运行起来了

作者:垚淼

出处:www.ljmin.com

ionic4+angular7+cordova开发入门的更多相关文章

  1. ionic4+angular7+cordova上传图片

    安装插件 安装插件Image Picker $ ionic cordova plugin add cordova-plugin-telerik-imagepicker $ npm install @i ...

  2. [Cordova] Plugin开发入门

    [Cordova] Plugin开发入门 Overview Cordova的设计概念,是在APP上透过Web控件来呈现Web页面,让Web开发人员可以操作熟悉的语言.工具来开发APP.使用Web页面来 ...

  3. [Android教程] Cordova开发App入门(一)创建android项目

    前言 Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的A ...

  4. Visual Studio 2015 和 Apache Cordova 跨平台开发入门

    原文:Visual Studio 2015 和 Apache Cordova 跨平台开发入门(一) 基于 Windows 10 的 Visual Studio 2015 跨平台的应用开发主要分为基于V ...

  5. (二)cordova+framework7入门——笑笑APP

    [前言] framework7确实做的很赞,但是一直各种原因没有做什么app, 这个感觉就像大厨遇到百年难见的好材料,不炒个菜憋的慌, 机缘巧合周一周二两个晚上做了一个简单app,先看下效果: ios ...

  6. HTML5手机APP开发入门(1)

    HTML5手机APP开发入门(1) 开发框架 Ionicframework V2 + Angular 2 具体内容可以参考一下网站 http://ionicframework.net/ http:// ...

  7. Mac 下Cordova开发

    一 Cordova开发环境搭建 1,安装node.js环境 官网: http://nodejs.org/  下载包安装 2,使用命令行安装 cordova 主要命令: 安装Cordova: sudo ...

  8. 【Cordova】Cordova开发

    引言 微软开启新战略--移动为先,云为先.作为开发者,首先感受到的变化就是VS2015预览版增加了对各种跨平台框架的支持,极大方便了我们的开发.其中号称原生性能的Xamarin要收费,挺贵的,一般人还 ...

  9. [转帖]H5 手机 App 开发入门:技术篇

    H5 手机 App 开发入门:技术篇   http://www.ruanyifeng.com/blog/2019/12/mobile-app-technology-stack.html 阮一峰老师的文 ...

随机推荐

  1. EasyDarwin实现RTSP播放动态认证的两种方式:Basic/Digest & Token

    问题描述 目前为了能够方便开发者,我们将EasyDarwin中的RTSP认证过程直接忽略过了,如果要开启认证的方式,我们可以在代码中打开: case kRoutingRequest: { // Inv ...

  2. 九度OJ 1123:采药 (01背包、DP、DFS)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2705 解决:1311 题目描述: 辰辰是个很有潜能.天资聪颖的孩子,他的梦想是称为世界上最伟大的医师. 为此,他想拜附近最有威望的医师为师 ...

  3. Ahead-of-time compilation

    https://en.wikipedia.org/wiki/Ahead-of-time_compilation

  4. 阿里云Redis开发规范(转)

    一.键值设计 1. key名设计 (1)[建议]: 可读性和可管理性 以业务名(或数据库名)为前缀(防止key冲突),用冒号分隔,比如业务名:表名:id ugc:video: (2)[建议]:简洁性 ...

  5. HttpURLConnection 接收网络数据出现乱码问题

    由于接收的数据经过gZip处理过,所以在接受的时候也要处理,并且加上编码格式(没有会出现部分数据乱码): 具体代码实现如下: URL ul = new URL(url); HttpURLConnect ...

  6. MVC设计模式应用

    MVC登录程序清单 1 User JAVABean 用户登录操作类,跟数据库中表的信息对应 2 DatabaseConnection JavaBean 负责数据库的连接和关闭操作 3 IUserDAO ...

  7. 不懂不能装懂--邮箱后缀“inc”的含义

    之前实习的公司,邮箱域名是XXX@XXX-inc.com 再之前,投递简历了或者关注某个公司的一些信息或者和这些公司的人邮件联系是也发现有这个inc的后缀,一直不明白,今天觉得自己找到答案了,不怕丢人 ...

  8. Sqoop hive导出到mysql[转]

    通过Sqoop将Hive表数据导入到MySQL通常有两种情况. 第一种是将hive上某张表的全部数据导入到mysql对应的表中. 第二种是将hive上某张表中的部分数据导入到mysql对应的表中. 两 ...

  9. android——array中设置选项

    Android中,R.array是提取XML资源文件中String数组的方法.具体定义和提取的方法如下: 1)在R.array中定义字符数组 <?xml version="1.0&qu ...

  10. Gym - 100283K K. Cubes Shuffling —— 贪心

    题目链接:http://codeforces.com/gym/100283/problem/K 题解: 要使其相邻两项的差值之和最小,那么越靠中间,其数值越小. 那么剩下的问题就是如何放数字了.一开始 ...