ionic4+angular7+cordova开发入门
前言
ionic是一个垮平台开发框架,可通过web技术开发出多平台的应用。但只建议开发简单应用。复杂的应用需要用到许多cordova插件,而cordova插件的更新或者移动平台的更新很可能导致插件的不可用,维护升级成本较高。
安装
- 安装node.js。https://nodejs.org/en/
- 通过node.j安装ionic
npm install -g ionic - 查看安装情况
sh-3.2# node --version
v10.14.2
sh-3.2# ionic --version
5.0.0
输出了版本好说明安装成功了。
创建项目
- 创建myApp项目
ionic start myApp tabs - 进入myApp目录,运行项目
cd myApp、ionic serve
这时可能会遇到问题
Error: Cannot find module 'node-sass’
安装相应的node-sass模块就可以了。
npm install node-sass --save-dev
没问题后可在浏览器看到项目运行起来了

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

- ios平台运行结果

添加android平台
- 添加步骤同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 - 在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开发入门的更多相关文章
- ionic4+angular7+cordova上传图片
安装插件 安装插件Image Picker $ ionic cordova plugin add cordova-plugin-telerik-imagepicker $ npm install @i ...
- [Cordova] Plugin开发入门
[Cordova] Plugin开发入门 Overview Cordova的设计概念,是在APP上透过Web控件来呈现Web页面,让Web开发人员可以操作熟悉的语言.工具来开发APP.使用Web页面来 ...
- [Android教程] Cordova开发App入门(一)创建android项目
前言 Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的A ...
- Visual Studio 2015 和 Apache Cordova 跨平台开发入门
原文:Visual Studio 2015 和 Apache Cordova 跨平台开发入门(一) 基于 Windows 10 的 Visual Studio 2015 跨平台的应用开发主要分为基于V ...
- (二)cordova+framework7入门——笑笑APP
[前言] framework7确实做的很赞,但是一直各种原因没有做什么app, 这个感觉就像大厨遇到百年难见的好材料,不炒个菜憋的慌, 机缘巧合周一周二两个晚上做了一个简单app,先看下效果: ios ...
- HTML5手机APP开发入门(1)
HTML5手机APP开发入门(1) 开发框架 Ionicframework V2 + Angular 2 具体内容可以参考一下网站 http://ionicframework.net/ http:// ...
- Mac 下Cordova开发
一 Cordova开发环境搭建 1,安装node.js环境 官网: http://nodejs.org/ 下载包安装 2,使用命令行安装 cordova 主要命令: 安装Cordova: sudo ...
- 【Cordova】Cordova开发
引言 微软开启新战略--移动为先,云为先.作为开发者,首先感受到的变化就是VS2015预览版增加了对各种跨平台框架的支持,极大方便了我们的开发.其中号称原生性能的Xamarin要收费,挺贵的,一般人还 ...
- [转帖]H5 手机 App 开发入门:技术篇
H5 手机 App 开发入门:技术篇 http://www.ruanyifeng.com/blog/2019/12/mobile-app-technology-stack.html 阮一峰老师的文 ...
随机推荐
- 函数----Function对象
函数---Function对象 一 . 函数的书写 函数 : 就是将一些语句进行封装,然后通过调用的形式,执行这些语句. 函数的作用 : ● 将大量重复的语句写在函数里,以后需要这些语句的时候,可以 ...
- object-c中的assign,retain,copy,atomic,nonatomic,readonly,readwrite以及strong,weak
assign:指定setter方法用简单的赋值,这是默认操作.你可以对标量类型(如int)使用这个属性.你可以想象一个float,它不是一个对象,所以它不能retain.copy.assign指定se ...
- RTSP(Real Time Streaming Protocol)学习笔记 -- RFC2326
Real Time Streaming Protocol (RTSP) RTSP是用在娱乐或通讯中控制流媒体服务器的网络协议,它可以创建和控制两个端点之间的会话. Client发出一些命令来控制me ...
- 遇到的一个Form表单自动提交问题解决办法
Form 表单中只有一个 input 元素时按回车会默认提交表单.有的时候我们希望按回车可以进行列表查询,但是查询后表单被自动提交了,然后刷新了整个页面.这个时候就需要对这个 Form 表单处理一下以 ...
- Python类的特殊属性
Python中的特殊属性 定义如下类: class Foo(object): """Foo class definition""" 类的特殊 ...
- java中的break与continue
1.两者的作用 break:是跳出当前的循环块或者程序块.循环块有for.do while.while,程序块有switch(){case 1: xxx;break;}在循环体中的作用是跳出正在循环的 ...
- python 快速排序 qsort
def qsort(arr, start, end): if start > end: return def partition(arr, start, end): pivot = arr[st ...
- BZOJ_5416_[Noi2018]冒泡排序_DP+组合数+树状数组
BZOJ_5416_[Noi2018]冒泡排序_DP+组合数+树状数组 Description www.lydsy.com/JudgeOnline/upload/noi2018day1.pdf 好题. ...
- codevs 2102 石子归并2
传送门 2102 石子归并 2 时间限制: 10 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题目描述 Description 在一个园形操场的四周摆放N堆石子,现要将 ...
- node.js版本管理(Win) --- nvm-window
目录 1. 安装 2. 使用 1. 安装 去往Git链接:https://github.com/coreybutler/nvm-windows. 点击下载链接: 选择第一个nvm-noinstall. ...