有较长时间没有用Ionic了,见新的公众号需求比较简单,便决定使用Ionic4来实现。
创建一个新项目,有blank、tabs、sidemenu3种样式可选,tutorial、super、conference为官方Demo,aws为AWS Mobile Hub Demo
原来ionic-cli执行ionic start 时,获取github上的项目模版到本地,再执行npm install,但随着ionic3已经稳定了,为不占用ionic4的资源,也便于较快下载模版,模版压缩成tar.gz存放到别处——当前是放在https://d2ql0qc7j8u4b2.cloudfront.net上,所以如果下载不了,先看看能不能访问该网站。
本文是Ionic3系列的第一排你文章,主要介绍开发环境的搭建过程,之后的文章将依赖此应用,不再涉及到环境搭建方面的内容(除非是添加特性),Ionic官方文档: ionic官网 ionic官方文档
首先 ionic start,问是否集成 Cordova,选择 N,至此创建了一个 Ionic 项目,然后 cd 到该工程目录下。
第一次安装的时候碰到各种麻烦 后来联系安装几台电脑就觉得不是那么麻烦 主要是需要安装的东西太多,另外网速一定要好,
前言 Hybrid技术流行已经有一段日子了,楼主的关注点也一直围绕着移动端围绕着Hybrid相关展开,Hybrid已经是大大提升开发效率的开发方式了,但是仍然需要至少一个IOS与Andriod,那么可不可以只使用H5相关的知识就能做一个APP出来呢?答案是可以的。 什么是cordova? cordova为一移动开发框架,他让我们可以仅仅专注前端代码,然后通过一个开发框架编译形成一个可安装的APP,因为前端代码的特性,所以这种APP是跨平台的,可以最大程度的提升开发效率,因为只需要前端人员,其成本节约也是不可
最开始用npm安装ionic,记得把npm升级一下到最新版本。npm install –g ionic 记得要全局安装。
如果第一次安装的时候失败,没关系 删掉已经生成的ioinc4Learn文件包,重新运行命令
比如我们通过命令行创建一个页面。 ionic g page myPage 之后就会生成如下三个文件:
在新版本下,ionic得到的健硕性的更新,angular却减少了自己的体积,正所谓:“ionic吃好了,angular减肥了”于是我们也可以抛弃以前的一些坑,直接进入流畅性的操作了。
ionic5是和Vue3搭配的,这里需要提前学习Vue3的语法 项目文件名是为Ts,目前只会Js.我们把项目改为JS语法 用Js来写 文档更改方法
本教程中,我们用Wijmo 5 和 Ionic Framework实现一个Mobile的工程:Hello World。 Ionic是什么? Ionic是一个HTML5框架、免费、开源,用于帮助生成hybird mobile Apps (混合移动应用)。 Ionic包含3部分: CSS 样式:用于渲染Web页面,使得页面更接近原生移动应用 (Native App)。 AngularJS:Ionic使用AngularJs的扩展指令作为核心框架库,同时AngularJs也加快了开发过程。 Apache Cordo
HTML5手机APP开发入门(1) 开发框架 Ionicframework V2 + Angular 2 具体内容可以参考一下网站 http://ionicframework.net/ http://ionicframework.com/ https://angularjs.org/ 开发环境配置 Node.js 安装Node.js 下载最新版本推荐安装 V4.X https://nodejs.org/en/ 还要需要安装Python开发包,推荐安装 V2.xx https://www.python.or
使用 Okta 和 OpenID Connect (OIDC),可以很轻松的在 Ionic 应用中添加身份认证,完全不需要自己实现。 OIDC 允许你直接使用 Okta Platform API 进行认证,本文的目的就是告诉你如何在一个 Ionic 应用中使用这些 API。我将演示如何使用 OIDC 重定向、Okta 的 Auth SDK 以及基于 Cordova 内嵌浏览器的 OAuth 进行登录; 由于功能还在开发中,所以省略了用户注册。
序言:本文主要介绍了使用 Ionic 和 Cordova 开发混合应用时如何添加用户身份认证。教程简易,对于 Ionic 入门学习有一定帮助。因为文章是去年发表,所以教程内关于 Okta 的一些使用步骤不太准确,但是通过 Okta 的官网也可以找到对应的内容。另外,使用 npm 安装 Ionic starter 模板可能会有安装失败的情况,建议不要在这方面浪费太多时间,可以直接在 Ionic 的 GitHub 仓库 中下载 starter 模板。 原文:How to Sprinkle ReactJS i
目前市场上有多个专业做跨平台开发的框架,那么对开发者来说究竟哪一个框架更符合自己的需求呢?笔者特地总结对比了一下不同框架的特性。
好多人说ionic好用,一直要推荐我用,我就不信了,来安装玩一下试试效果。实践出真知!安装过程各种坑,工具太多了,太麻烦了,差点放弃(还好坚持下来呢)。
(1)首先安装nodejs node 下载地址:https://nodejs.org/dist/latest-v5.x/ 下载里面的node-v5.12.0-x64.msi 或者node-v5.12.0-x86.msi 区别是32位机器和64位机器。 下载后点击下一步一步步安装,安装完nodejs npm也同时安装完成 (2)新建ionic 文件夹,并在控制台进入此文件夹
1.安装ionic cli //Windows npm install -g ionic@latest //mac sudo npm install -g ionic@latest 2.创建项目 创建ionic2的项目 默认是创建ionic2项目(--type=ionic-angular )可以不写类型 ionic start myNewProject 创建ionic1的项目 ionic start myApp --type=ionic1 3.自动生成器 ionic generator使我们
Ionic 是一款基于 Cordova 及 Angular 开发 Hybrid/Web APP 的前端框架,类似的其他框架有:Intel XDK等。
本文介绍了如何搭建Cordova开发环境,并重点介绍了Ionic框架的概念以及如何使用Cordova和Ionic创建移动应用。
本次使用的是Ionic3,之前本想用最新的ionic5 使用ionic build后发现,我使用的X5内核不能正常浏览,使用ionic3没有任何问题。本次我不使用cordova来打包,这次我将要完成的任务是:
Web前端的同学是否想过学习app开发,以弥补自己移动端能力的不足?但在面对一众的选择时很多同学略感迷茫,是学习ios还是android开发?是学习原生开发、混合开发(比如:Ionic),还是使用react native或者flutter这样的跨平台框架?而app开发的学习周期长、学习成本高也让一部分人望而却步。得益于前端技术的飞速发展、浏览器性能的不断提高,使用网页技术开发出接近原生体验的应用得以变为现实,PWA就在这样的背景下应运而生。可以用自己熟悉的HTML、CSS、Javascript开发出媲美原生app的网站,不仅拥有接近原生app的流畅程度,并且具备一些原生app才有的特性,比如:a. 可以在主屏上安装应用图标,b. 离线状态下访问,c. 获取消息通知,等等。。PWA的出现让大家看到了希望!
Ionic这几个网站是需要经常看的,应该了解过才执行后面步骤,其中强烈要求至少先撸一遍官网的组件和API文档。
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI 实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能 实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端
环境安装 先安装Node.js,网址 www.nodejs.org 下载地址是:https://nodejs.org/en/download/current/, 如果不是请自行在官网上查找。安装一路
在ionic CLI v4.8.0版本创建项目时,会询问是创建ionic3还是ionic4项目,然而更新到 ionic CLI v4.10.2(latest)时,这个询问提示消失了,直接默认创建ionic3项目,而且看参数是没有创建ionic3项目支持的,于是,我上Github发了个issue: How to create ionic3 project by ionic CLI v4.10.2(latest)
写在前面的话: 最近把玩了微信小程序过后,由于对它专属的IDE使用不当,导致在退出关闭计算机的时候没有及时清理缓存,造成缓存碎片留藏在硬盘的分页文件内,导致硬盘无法reboot,最终开不了机器,一直蓝屏,所以很是郁闷的重装了系统,从新搭建了环境进行配置ionic,于是又发现了些许坑。【注:博主这次使用的是国内镜像】 1、ionic2创建项目的坑: 这是在使用ionic start xxx --v2 的时候下载好对应的目录的同时,在项目建成的最后,会显示如下的错误提示:
安装ionic相关依赖(其中@ionic/core是组件部分,@ionic/vue是封装成Vue方式调用的接口部分):
这篇没什么东西可扯,基本是 Q&A 形式。不定时更新,不用 Ionic 了就不更新。。。
前端一般会听过阿里的Ant Design,而对于angular使用者,大多也听过ng-zorro(Ant Design for Angular的PC版),最近一次ng-zorro的更新,带来了新的开源迷弟:ng-zorro-mobile(Ant Design Mobile for Angular)。
地址:https://services.gradle.org/distributions/
ionic cordova resources是用于一键打包生成各分辨率icon和splash的命令,在使用过程中可能会遇到以下问题:
前端开发框架ionic,以假乱真的页面和流畅的运行速度直逼原生应用,让你情不自禁的爱上了她,下面来简单介绍下ionic。
ionic是最近一个很流行的Hybird移动开发解决方案,个人兴趣研究了一下,还是不错的 https://github.com/driftyco/ionic
写到最后总结得差不多了,后续如果我想起还有哪些框架平台遗漏的,会继续在这篇文章上补全,同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔,喜欢的点个赞或收个藏,保证你在开发时用得上。
先前写过一篇文章:【组件篇】ionic3图像手指缩放滑动预览,是原来封装的一个组件的原型,后来用ionic4后,这个组件不兼容,需要改,那时我开始考虑组件的封装不依赖于ionic自身的组件,所以重写了一个。
工欲善其事,必先利其器,搭好环境是开发的前提,有时环境没弄好,不时报错往往很扎心。
Could not find an installed version of Gradle either in Android Studio, or on your system to install the gradle wrapper. Please include gradle in your path, or install Android Studio
简单介绍自己使用Ionic3开发的过程,涉及到的知识点如下: Angular Ionic Cordova ES6 TypeScript Scss 环境搭建 引用插件 调试 Android打包 Android签名 IOS打包
有些时候,我们希望在 Angular 应用程序启动的时候,执行一些初始化操作。针对这种场景,我们可以利用 APP_INITIALIZER 这个内置的 Token 来定义 multi provider,从而实现自定义系统初始化的逻辑。不过在介绍 APP_INITIALIZER 之前,我们先来介绍一下 multi provider 的相关知识。
Click File--Sync Project With Gradle Files
“明知山有虎,偏向虎中行”。这里说的虎,主要有两点: @ionic/vue还属于beta版,在npm上是v0.0.4,实际在Github上源码已更新到v0.0.8,但这离正式版发布有很大的距离,使用它开发有一定的风险。 网上资料较少,官方文档待完善。 实际上,@ionic/vue最初来自一个社区团队Modus的项目ionic-vue,后来该团队发送了一个pull请求,被ionic吸收,使包装器成为核心存储库的一部分。 Modus团队为了证明不只是在展现层上工作,而且集成运行良好,Modus团队还使
Ionic Native - Camera GitHub - cordova-plugin-camera Ionic Native - Image Picker GitHub - ImagePicker
ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android、iOS,计划支持:Windows Phone、Firefox OS) 的原生App应用:
选择合适的平台是开发人员在创建移动应用程序时面临的主要问题之一。据统计,iOS 和 Android 两大巨头已经有超过了十年的竞争。为了从软件开发的预算效益和时间效益的角度来寻求两个平台之间的妥协,引入了混合和跨平台的框架。 讨论这个主题时,首先想到的两个框架是Ionic和React Native,他们提供了一个解决问题的先进方案,还提供了易于获取的技术支持。 简要介绍框架 在开始分析和比较这两个框架的关键特性之前,让我们分别看一下每个框架。 Ionic:Ionic Framework 早在 2015 年就
ionic可以很方便的安装cordova插件,最新ionic-cli要求cordova插件里面有package.json和plugin.xml才能安装成功,如果缺失,请自行补上,而原来旧的cli不要求package.json文件(插件目录里的,不是ionic项目里的)。
领取专属 10元无门槛券
手把手带您无忧上云