手摸手带你入门ionic3(一):ionic介绍-程序员宅基地

技术标签: ViewUI  ui  前端  javascript  

移动开发已经成为一股潮流,web开发者假如也想在此浪潮中冲浪的话,我推荐 ionic 这个跨平台的移动应用开发框架。它的口号是 Build amazing apps in one codebase, for any platform, with the web, 可以做到 write once, run anywhere

ionic1 基于 angularjs,已经成为历史。前不久发布了ionic4,做了很大的改动,最重要的一点就是使用了 Stencil 这个可以将自定义组件转化为web Components的编译器,鉴于这个版本暂时还是beta版本,不建议使用。

本系列的文章全部基于ionic3,底层的Angular使用5.x版本,以后都简称ionicionic3之前基于Angular 4.x版本,现在已经全面切换到Angular5.x了,大家开发的过程中注意甄别,因为 5.x和4.x之间还是有很多改动的。

ionic 的成功少不了AngularCordova 的功劳。

AngularGoogle 推出的前端开发框架,使用 TypeScipt 语言进行开发,适合规模大,多人配合的项目。

Cordova 脱胎于 AdobePhoneGap,后来其核心源码被捐给Apache ,改名为 Cordova ,是一个使用web技术的跨平台移动应用开发框架。

ionicAngular 的一些核心开发者,将 AngularCordova 结合起来,并针对移动应用的特点进行改造,提供了丰富的UI组件的跨平台移动应用开发框架。同时,ionic也提供了命令行工具 ionic-cli ,功能强大,简单好用。

上图可以看出 AngularCordovaionic 之前的关系。

个人认为 ionic 可以简单解释为成 Angular+Cordova 基础上的UI框架,它使用 Angular 开发,提供了精美的UI组件,通过Cordova plugin 与原生功能进行交互,最后借助 Cordova 命令打包成可以运行在不同平台上的App,当然也可以只使用 www 文件夹下的内容当做可以通过浏览器访问的 webApp

打包出来的Android App其实就是一个 WebView ,加载本地的www 文件夹中的网页。网页中可以调用 Native 功能就是通过 Cordova 这个桥梁。iOS同理。

ionic 不是简单的把 AngularCordova 结合在一起,也做了一些改造,使之更适合移动开发。首先,ionic 抛弃了 Angular 中的路由框架,而是实现了自己的堆栈式页面导航功能,通过简单的 pushpop方法,实现页面的跳转和返回,更符合移动开发习惯。其次,ionic 也针对 cordova native plugin写了配套的JS依赖包,使web开发者可以很快上手原生插件的使用。最后,ionic 提供了丰富的适合移动应用开发的UI控件,比如,DateTimeToobar等常用的组件。

ionic 的缺点也是显而易见的,首先,性能,还是性能,安卓低端机上卡顿明显,用户体验很差。其次,虽然 ionic 提供了大部分常见的与原生进行交互的插件,但是假如你的需求很冷门,只能自己写一个,比如说支付。最后,使用 Angular 这个框架,学习曲线比较陡峭。

下图展示了应用打开的过程及以打开相机为例调用原生功能的流程,内容简单,不过多解释。

后记

本人在写一个ionic入门的教学手册 ionic3-handbook,还有一个基于真实项目的ionic项目HW-basic,感兴趣的可以看一下。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_33735077/article/details/87987072

智能推荐

ros引用头文件_cmakefiles/legged_unitree_hw.dir/src/unitreehw.cpp-程序员宅基地

文章浏览阅读583次。项目场景:提示:这里简述项目相关背景:例如:ros引用头文件问题描述:提示:这里描述项目中遇到的问题:记录一些让自己陷入误区的时刻:提个醒下面链接收集其他人的ros引用头文件优秀解决方案,基本解决所有问题(优先打开):[ 98%] Linking CXX executable /home/nuc/catkin_ws/devel/lib/unitree_motor_ctrl/Cbody_serverCMakeFiles/Cbody_server.dir/src/cbody_server.c_cmakefiles/legged_unitree_hw.dir/src/unitreehw.cpp.o:在函数‘legged::unitree

牛客网-2018 美团 CodeM 编程大赛-初赛 B 轮-3-低位值_美团编程大赛决赛牛客网-程序员宅基地

文章浏览阅读326次。ACM模版描述题解一个规律题。默认,lll 取 000,考虑取 rrr,首先,如果有非最高位 111 存在 xxx 个,有第二个部分公式得答案加上 xxx,然后根据第三个公式得答案加 111 并且获取一个新的二进制串 r′r′r'(全是 111),以此类推,直到 r=0r=0r = 0。对于 rrr 我们需要考虑两种情况,因为上述循环的第一次取的 rrr 不一定全是 111..._美团编程大赛决赛牛客网

数据集:Udacity Self-Driving 目标检测数据集_udacity 自动驾驶汽车数据集-程序员宅基地

文章浏览阅读1.9k次。转载自:http://blog.csdn.net/jesse_mx/article/details/72599220前言之前,博主为了得到更好的车载视频目标检测效果(偏工程实际,非刷榜),使用SSD框架训练过KITTI数据集,几次训练下来,结果不太理想。自己分析,原因较多,其中很重要的一条就是KITTI数据集不够大(标注图片仅7000多张),而且还是fine-tune from reduc..._udacity 自动驾驶汽车数据集

LSTM Siamese neural network-程序员宅基地

文章浏览阅读879次,点赞19次,收藏27次。本文中的代码在或中可找到。Hi, 你好。我是茶桁。大家是否还记得,在「核心基础」课程中,我们讲过CNN以及LSTM。卷积神经网络(CNN)已经在计算机视觉处理中得到广泛应用,不过,2017年开创性的Transformer神经网络的开创性使其称为一种可行的替代方案,Transformer是目前流行的ChatGPT的基础。它的主要缺点是需要大型数据集才能超越CNN同类产品。否则,在数据集有限的情况下,Transformer的性能回避CNN模型差。_siamese neural network

index_04_01底部-程序员宅基地

文章浏览阅读1.1k次。乳腺纤维瘤的治疗方法_上海乳腺纤维瘤医院_上海宏康医院乳腺科.danwei ul, .danwei ul li{ padding:0px; margin:0px;}.dwdaohang a:hover{text-decoration:underline;}.dwdaohang a{color:#595959; text-decoration:none;}.danwei ul{list

1-9九个数字组合成三个分数_使用全部 9 个数字一次 - 1,2,3,4,5,6,7,8,9 作为分子和分母,创建一个等于 1/-程序员宅基地

文章浏览阅读3.2k次。1-9九个数字组合成三个分数,要求前两个分数之和等于第三个分数。先放代码,目前没有去重,等有时间再弄。#include<stdio.h>#include<iostream>usingnamespace std;structmyarr{ inta[9]; structmyarr *next;}mya,myall;staticvoid showArr(int arr[], in..._使用全部 9 个数字一次 - 1,2,3,4,5,6,7,8,9 作为分子和分母,创建一个等于 1/3(三

随便推点

Hadoop3.x 之 Yarn资源调度器 (第十一章)_hadoop 3.x默认的资源-程序员宅基地

文章浏览阅读1k次,点赞4次,收藏8次。我孤零零的写代码,成为了除了CRUD啥都不会,为了过上好生活拿我一月的饭钱买个服务器、想让别人成为我这样的CRUD的大老、微服务、架构、容器、资源、不在发愁如何学习了、网站:https://www.e404e.cn_hadoop 3.x默认的资源

用VS Code写C#-程序员宅基地

文章浏览阅读8k次。目录 前言 下载SDK 安装C#支持 快速创建C#控制台 格式化代码 前言Visual Studio被我卸载了,又懒得下,所以先使用VS Code写C#试试下载SDK首先要下载一个.net Core的SDK,点我下载,微软的,一路下一步就行安装..._c#用vs还是vs code

matlab pinv 实现_pinv(matlab 伪逆)-程序员宅基地

文章浏览阅读1.2w次,点赞2次,收藏11次。老师给了一个程序,看到pinv的时候有点糊涂,“伪”逆矩阵到底什么意思啊。pinv(B)求的是矩阵B的Moore-Penrose逆,是B的一种广义逆,也就是你说的伪逆,该广义逆满足四个条件:A*B*A = A B*A*B = B A*B 是海森矩阵 B*A是海森矩阵。这个在.打开Pinv函数,发现里面分情况讨论:若N>M;则共轭转置后再求解,否则使。就是“伪”逆阵。求逆阵要求方阵嘛,这个可以..._pinv

#define后接{}的用法_#define 变量后加大括号-程序员宅基地

文章浏览阅读3.2k次,点赞2次,收藏7次。在学校做比赛,查找寻迹小车的资料,看到了一篇51开发的小车文章,那个博主的程序中写到#defineleft_go{Left_Motor_P1=1;Left_Motor_P2=0;}#defineleft_back{Left_Motor_P1=0;Left_Motor_P2=1;}#defineleft_stop{Left_Motor_P1=1;Left_Mo..._#define 变量后加大括号

简单扫雷游戏代码_传统扫雷游戏java源代码,要求要有初级9*9,中级16*16,高级16*30难度-程序员宅基地

文章浏览阅读165次,点赞10次,收藏2次。c语言实现简单扫雷游戏_传统扫雷游戏java源代码,要求要有初级9*9,中级16*16,高级16*30难度

推荐文章

热门文章

相关标签