本次使用的是Ionic3,之前本想用最新的ionic5 使用ionic build后发现,我使用的X5内核不能正常浏览,使用ionic3没有任何问题。本次我不使用cordova来打包,这次我将要完成的任务是:
本文是Ionic3系列的第一排你文章,主要介绍开发环境的搭建过程,之后的文章将依赖此应用,不再涉及到环境搭建方面的内容(除非是添加特性),Ionic官方文档: ionic官网 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 文件夹,并在控制台进入此文件夹
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
比如我们通过命令行创建一个页面。 ionic g page myPage 之后就会生成如下三个文件:
本文介绍了如何搭建Cordova开发环境,并重点介绍了Ionic框架的概念以及如何使用Cordova和Ionic创建移动应用。
ionic主要使用网页的开发方式,一般的web开发的IDE就可以了,有大型的也有轻量级的供考虑,每个开发人员都有自身喜爱和倾向的IDE,在此不一一列举了,个人推荐VS code,比较轻量型的,下载不用翻墙,重要是开源免费!省却经常寻找激活码的烦恼,此外,官方维护频繁,功能齐全强大,插件丰富,同时开源社区活跃,不仅IDE本身,包含插件的更新得到很好保障。
创建一个新项目,有blank、tabs、sidemenu3种样式可选,tutorial、super、conference为官方Demo,aws为AWS Mobile Hub Demo
安装ionic相关依赖(其中@ionic/core是组件部分,@ionic/vue是封装成Vue方式调用的接口部分):
系列文章 实战使用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) – 迈向后端
前言 Hybrid技术流行已经有一段日子了,楼主的关注点也一直围绕着移动端围绕着Hybrid相关展开,Hybrid已经是大大提升开发效率的开发方式了,但是仍然需要至少一个IOS与Andriod,那么可不可以只使用H5相关的知识就能做一个APP出来呢?答案是可以的。 什么是cordova? cordova为一移动开发框架,他让我们可以仅仅专注前端代码,然后通过一个开发框架编译形成一个可安装的APP,因为前端代码的特性,所以这种APP是跨平台的,可以最大程度的提升开发效率,因为只需要前端人员,其成本节约也是不可
ionic可以很方便的安装cordova插件,最新ionic-cli要求cordova插件里面有package.json和plugin.xml才能安装成功,如果缺失,请自行补上,而原来旧的cli不要求package.json文件(插件目录里的,不是ionic项目里的)。
好多人说ionic好用,一直要推荐我用,我就不信了,来安装玩一下试试效果。实践出真知!安装过程各种坑,工具太多了,太麻烦了,差点放弃(还好坚持下来呢)。
环境安装 先安装Node.js,网址 www.nodejs.org 下载地址是:https://nodejs.org/en/download/current/, 如果不是请自行在官网上查找。安装一路
Ionic 是一款基于 Cordova 及 Angular 开发 Hybrid/Web APP 的前端框架,类似的其他框架有:Intel XDK等。
前端开发框架ionic,以假乱真的页面和流畅的运行速度直逼原生应用,让你情不自禁的爱上了她,下面来简单介绍下ionic。
简单介绍自己使用Ionic3开发的过程,涉及到的知识点如下: Angular Ionic Cordova ES6 TypeScript Scss 环境搭建 引用插件 调试 Android打包 Android签名 IOS打包
前端一般会听过阿里的Ant Design,而对于angular使用者,大多也听过ng-zorro(Ant Design for Angular的PC版),最近一次ng-zorro的更新,带来了新的开源迷弟:ng-zorro-mobile(Ant Design Mobile for Angular)。
提到跨终端应用开发,很容易想到最近很火的React Native。使用React Native开发出的APP本质上是Native APP。在跨端应用开发这一领域内还有另一块:Hybrid APP。本文研究的inoic framework就是一种hybrid app的开发框架。
目前市场上有多个专业做跨平台开发的框架,那么对开发者来说究竟哪一个框架更符合自己的需求呢?笔者特地总结对比了一下不同框架的特性。
使用 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
地址:https://services.gradle.org/distributions/
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是最近一个很流行的Hybird移动开发解决方案,个人兴趣研究了一下,还是不错的 https://github.com/driftyco/ionic
安装结束后你可以直接使用 weex 命令验证是否安装成功,它会显示 weex 命令行工具各参数:
最开始用npm安装ionic,记得把npm升级一下到最新版本。npm install –g ionic 记得要全局安装。
第一次安装的时候碰到各种麻烦 后来联系安装几台电脑就觉得不是那么麻烦 主要是需要安装的东西太多,另外网速一定要好,
http://jingyan.baidu.com/article/49ad8bce54b1535834d8fa86.html SDK环境变量配置
文件上传,我们一般需要和本地文件打交道,先安装file插件(全称cordova-plugin-file),
我的Cordova升级到8已经很久了,而且在此环境下原有的项目跑得好好的,所以别人说有问题需要把Corodva降级到7.1或者7.0时,我不置可否。
Ionic 2 实例开发 今日更新新增章节——Ionic 2 中添加图表: Chart.js是一个在HTML5的<canvas>元素中绘制图标的JavaScript库,非常适合于HTML5的移动应用
本教程中,我们用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
上一次我们使用Spring Boot开发了一个简单的REST服务应用,那么传统网页应用怎么做呢? 渲染HTML是Spring Boot可以完美胜任的,并且提供了多种模板引擎的默认配置支持,所以在模板引擎的支持下,我们可以很快的上手开发动态网站。 Spring Boot提供了默认配置的模板引擎主要有以下几种: Thymeleaf FreeMarker Velocity Groovy Mustache Spring Boot建议使用这些模板引擎,避免使用JSP,但JSP有天然的血缘关系,我们教程也是从最简便的
使用phonegap开发APP的优劣在此不必细说,快速,简单,跨平台,以及随着iOS,Android本身对webview优化所带来的不错的性能,便是其独有的优势。而且私以为在目前激烈而又变化快速的移动APP市场环境下,用phonegap来开发APP未尝不是一种低成本mvp的方案,快速发布,成王败寇^-^
Storage可以很容易的存储键值对和JSON对象。Storage在底层使用多种存储引擎,根据运行平台选择最佳的存储方式。 当运行在Native模式时,Storage将优先使用SQLite。 当运行在Web中或作为PWA应用时,Storage将根据你确定的优先级使用IndexedDB、WebSQL或localstorage。
今天,我们使用REST API实现用户名密码认证,服务端端点如下: Endpoint 请求 响应 /login { username: '',password: '' } auth_token /logout add a token to headers /register { username: '', password: '' } 1、创建Ionic 2 APP 反复练习,应该是很熟悉了: ionic start Ionic2RestAuth --v2 我习惯上会先启动看看,确保项目创建成功: c
所谓的Anrdoid打包,就是将ionic项目打包成一个可以安装在Android系统上的apk文件,打包的时候,使用的是cordova工具,不过在此之前,需要一些准备工作:配置JDK、Android SDk还有各个android版本包的下载,最重要的是需要成功的创建了一个Ionic项目,有关ionic项目创建的详细教程,请参考以下文章: Ionic3 Start
Web前端的同学是否想过学习app开发,以弥补自己移动端能力的不足?但在面对一众的选择时很多同学略感迷茫,是学习ios还是android开发?是学习原生开发、混合开发(比如:Ionic),还是使用react native或者flutter这样的跨平台框架?而app开发的学习周期长、学习成本高也让一部分人望而却步。得益于前端技术的飞速发展、浏览器性能的不断提高,使用网页技术开发出接近原生体验的应用得以变为现实,PWA就在这样的背景下应运而生。可以用自己熟悉的HTML、CSS、Javascript开发出媲美原生app的网站,不仅拥有接近原生app的流畅程度,并且具备一些原生app才有的特性,比如:a. 可以在主屏上安装应用图标,b. 离线状态下访问,c. 获取消息通知,等等。。PWA的出现让大家看到了希望!
Ionic 通过整合各种技术和功能使构建Hybrid 应用更加快速、容易和美观。Ionic 的生态系统基于Angular 和Cordova,前者是Web 应用框架,后者是构建和打包原生应用的工具。
今天在用ionic2 的ionic resources生成新的icon和splash,生成后安装,应用图标和启动画面依然没变化。。。 不知道大家有没有被坑过,今天被坑了一下午,终于找到了办法: 解决方法 第一次使用ionic resources后根文件夹下会生成一个res文件夹,比如你的项目文件夹名是demo,那么就是demo/res文件夹。 将res中的所有文件夹复制到demo\platforms\android\res下,res里面的同名文件夹覆盖(注意:保留该文件夹下原本的values文件夹和xml文
在上一篇文章中(使用Ionic3创建原生app系统入门)介绍了如何使用ionic构建一个Android app 项目,并生成apk安装包。
对比目前其它流行的js框架,个人觉得其分工明确、清晰好理解,我觉得就算一开始头脑一遍空白的新手,对他讲解过一次后都能有个大致印象。
极光推送 官网:https://www.jiguang.cn/push 注册账号,创建应用,记录AppKey, 应用包名与ioinic 包名一致(config.xml 下 widget 的id)
首先 ionic start,问是否集成 Cordova,选择 N,至此创建了一个 Ionic 项目,然后 cd 到该工程目录下。
打开android studio -> Configure->SDK Manager
领取专属 10元无门槛券
手把手带您无忧上云