好多人说ionic好用,一直要推荐我用,我就不信了,来安装玩一下试试效果。实践出真知!安装过程各种坑,工具太多了,太麻烦了,差点放弃(还好坚持下来呢)。...1.安装node 许多前端工具的安装都依赖于node的包管理器npm,Node官网: https://nodejs.org/ 安装完成后在cmd中输入 npm -v 回车。...3.安装安卓的SDK 打开Android Studio,File --> Settings --> 搜索sdk,找到对应的sdk进行安装即可。 需要在Path环境变量中添加两个值。...(y/N) 意思是是否要把 iOS 和Android集成到刚刚用Cordova 创建的app中 ,我这里选择y 表示确定。然后就会自动安装缺失的或者更新某些工具版本。 然后就会看到一个提示?...后面还有步骤,太麻烦了,我这里就不列举了,我已经放弃使用ionic创建安卓项目了,可以直接看下文。 6.
最近几年,针对我的社交项目,我尝试使用Hybrid框架和AngularJS以及Ionic,Cordova一起构建一个示例……但一切并不像我想象得那样容易。...Xamarin使得你可以使用C#创建原生的应用。 在文章的另一部分,我将从定义硬件和软件需求开始入手,即便是你没有任何的移动端开发经验,也能够开始了解如何开始构建一个移动应用。...如果你希望构建一个Android应用,在Windows上进行开发的话你需要Visual Studio 2017或者在Mac上进行开发的话你需要 Visual Studio for Mac版本。.../requirements/ 针对全部这两个平台的设置,我们都需要安装Visual Studio的最新版本,直至我写下这篇博文,我们能够使用的最新版本是Visual Stuido 2017(Windows...更多信息请参见: https://www.visualstudio.com/pt-br/vs/visual-studio-mac/ 使用Android的先决条件 Android版本开发的基本需求是以下组件
所谓的Anrdoid打包,就是将ionic项目打包成一个可以安装在Android系统上的apk文件,打包的时候,使用的是cordova工具,不过在此之前,需要一些准备工作:配置JDK、Android...SDk还有各个android版本包的下载,最重要的是需要成功的创建了一个Ionic项目,有关ionic项目创建的详细教程,请参考以下文章: Ionic3 Start 配置JDK 主要就是以下流程...android studio,这是一个开发工具,同时里面也自带了了一些已经下载好了的package,这种能方式能省很多麻烦,同时你也可以直接利用android studio 进行开发。...添加平台通过cordova工具添加,新版本和老版本的命令会有一些区别,以新版本为准: ionic cordova platform add android 该命令用于向当前应用添加 android...执行该命令之后,可以在应用的根目录看到一个新建的文件夹:platform 这个过程中可能会遇到一些问题,不需要轻言放弃,仔细观察错误信息 打包 同样利用cordova工具进行打包。
在开始之前我假设你已经了解了如下概念: Java JDK Apache Ant Android SDK NodeJS 以上名词这里就不赘述,如果有不清楚的可以自行查阅 安装步骤 Ionic 官方教程:...; 在这里我发现 Android SDK 安装目录中并没有platform-tools这个文件夹,运行 tools 目录下的 android.bat 文件,然后在出现的界面中勾选 Android SDK...注意:这里我下载的纯净版 SDK 之前并没有任何 Android 系统在内,所以同 Platform-tools 一样需要在这里勾选需要的版本然后安装。这里至少需要有一个系统,否则无法创建虚拟机。...nmp 安装 Ionic 和 Cordova 完成以上几步需要配置的环境就搭建完成了,接下来就只需要在控制台输入简单的几行命令就可以安装 Ionic 和 Cordova 啦。.../android/build/outputs/apk 下就会生成已签名的安装包 android-release.apk 在 windows 下 storeFile 文件路径应使用 Unix 下的目录分隔符
Please include gradle in your path, or install Android Studio 做了ionic项目,碰到了很多关于环境的坑,昨天我整理了下思路,重新安装了系统...执行npm install出的错 中途给我报了 一个错说我没有安装python 反正是有这个错,然后又安装了 python安装时没有修改安装路径,直接默认路径。...执行ionic cordova build android 出现的错误信息 然后我就下载配置了gradle的环境。...下载gradle 我下载了gradle-3.2 (3.2的版本) 下载完成后解压缩出来。 然后在环境变量里面配置了 path环境变量 D:\adt\gradle-3.2\bin ?...查找了资料,发现是安卓SDK25没有安装。然后在进入安卓sdk管理工具勾选红色的部分然后安装 ?
我将演示如何使用 OIDC 重定向、Okta 的 Auth SDK 以及基于 Cordova 内嵌浏览器的 OAuth 进行登录; 由于功能还在开发中,所以省略了用户注册。 为什么使用 Ionic?...开始使用 Ionic 为了设置 Ionic 的开发环境,需要完成以下几步: 安装 Node.js 使用 npm 安装 Ionic 和 Cordova: npm install -g cordova ionic...你可以退出之后看一下带标识的登录页。 ? 注意: 你可能注意到退出之后标签页并没有消失。我正在查找 没有正常工作 的原因。 发布到移动设备 使用 Ionic 在浏览器中开发移动应用是非常酷的事情。...Android 为了模拟或者部署到 Android 设备上,你首先要安装 Android Studio。在安装过程中,它会提示你将 Android SDK 安装到哪里。...如果你已经安装了Android Studio,请确保打开它以完成安装。 为了部署到 Android 模拟器,运行 ionic cordova emulate android。
我将演示如何使用 OIDC 重定向、Okta 的 Auth SDK 以及基于 Cordova 内嵌浏览器的 OAuth 进行登录; 由于功能还在开发中,所以省略了用户注册。 为什么使用 Ionic?...开始使用 Ionic 为了设置 Ionic 的开发环境,需要完成以下几步: 安装 Node.js 使用 npm 安装 Ionic 和 Cordova: npm install -g cordova ionic...你可以退出之后看一下带标识的登录页。 ? 注意: 你可能注意到退出之后标签页并没有消失。我正在查找 没有正常工作 的原因。 发布到移动设备 使用 Ionic 在浏览器中开发移动应用是非常酷的事情。...image.png Android 为了模拟或者部署到 Android 设备上,你首先要安装 Android Studio。在安装过程中,它会提示你将 Android SDK 安装到哪里。...如果你已经安装了Android Studio,请确保打开它以完成安装。 为了部署到 Android 模拟器,运行 ionic cordova emulate android。
转载请声明原文链接和作者信息。 ? 经常看到大家在一些技术群热火朝天的争论跨平台技术的牛逼之处,其实是毫无意义的,尺有所短寸有所长,每个技术各司其职,没有好坏之分。争论有何意义?...(2) 小程序 小程序:是一种无需下载安装即可使用的应用,只需要扫一扫或打开微信搜一下即可打开应用。2016年9月21日,微信小程序正式开启内测。...Cordova从PhoneGap中抽出的核心代码。Cordova是一个使用HTML,CSS和JS这些前端语言去构建移动应用的平台。...(4) Scade Scade:Scade是一个跨平台的,支持Android,Apple和Linux的工具。使用Swift的代码库为进行开发,可以构建和部署多个不同平台的应用。...通用平台特定的控件直接集成到Scade图形SVG渲染引擎中,Scade标准库提供了大量系统功能,操作系统特定功能作为默认包公开并易于使用,无需包装或使用外部功能接口。
运行效果 这个运行是在浏览器中查看到的效果。...还是有错误 还是有错误,在执行cordova platform add android --save时错误了, 关于cordova 的操作指令可以查看https://cordova.apache.org...image.png 尝试使用cordova安装android插件还是出错。一周了也没有解决。网上查了无数资料,尝试未能解决问题。暂且放一放。或许后面就解决了呢。...使用同事的电脑尝试,无需安装java环境和android环境这一步是能通过的。 我们来看下ionic项目文件 ?...后续 重装系统后,安装要求安装配置了java和Android sdk,Gradle不过java我装的是32位的 然后按照Cordova官网的提示安装了以下几个包 ?
2、安装cordova npm install -g cordova@5.4.1 3、安装安卓平台 ionic platform add android, 会安装android 24 的平台,我是在...Ionic Lab 中安装的,是安装android 22 平台,因为我的SDK是下载的Android 5.1.1 (API22),在android SDK Manager 可以下载其它的版本 在安装的过程中可能会出现...\gradle这个目录里面,然后找到 E:\ionic\ionicdemo2\platforms\android\cordova\lib 里面的build.js 文件,改成下面的 var distributionUrl...回车 等待安装,安装时间比较长 5、ionic build android 网上看到很有可能是因为你的Gradle的工具会去下载platforms/android/cordova和CordovaLib...,我是耐心等的安装maven库,大概要一小时,有一次打包还是报错 ?
–g cordova 注意:由于有长城在下载非常慢也有可能失败,最好使用代理或V** 安装完成后就可以开始生成项目了 Android SDK 这里我推荐安装Android Studio.../index.html 安装完成后,配置一下环境变量 Java Path Android Path 启动android虚拟设备的时候需要用到 开发工具 sublime...start todoapp blank --v2 –ts 注意:还是因为有长城,速度相当的慢,请耐心一点 $Ionic serve OK 运行成功了 下一步部署到android...设备上 $ionic run android 这里有bug据说下个版本解决 我这里就不用typescript了 从新生成一个项目用JavaScript 注意:这里可能还会碰到问题...,并没有启动模拟器也没有提示android apk的编译完成 也就是说配置android SDK 的模拟器有问题,这里需要检查 已经部署到模拟器上
环境搭建 参考官网使用即可: 安装node,使用 Homebrew 进行安装 brew install node 安装[Weex CLI(weex-toolkit)] (https://github.com...&&chmod 777 ~/.xtoolkit 安装结束后你可以直接使用 weex 命令验证是否安装成功,它会显示 weex 命令行工具各参数: ?...观察发现,都是在weexpack里面的,而且居然写死了名字!也就是说修改配置文件,这里都不会动态变化,同时用Android Studio打开,包名也是固定死是:com.weex.app。...插入android手机或者启动AVD,并再次执行命令,此时应用顺利运行: ? image.png 当然也可以用Android Studio来打开运行也是可以的。 简单比较 1....只不过若都以cordova方式来开发的话,weex自身html方面的优化应该没有ionic那么好。 因为如其名,匆忙一瞥,对weex了解不深,可能有写错的,欢迎指正。
+ 和 Android 4.1+版本,且有计划会支持Windows设备。...对其他较老的设备无版本支持计划。 系统必备 本教程会使用到下面的环境,请预先准备。...Git Node.js Bower Apache Cordova 在本教程中,我们使用Chrome用于开发、调试,同时,你也可以在Android和IOS设备上用其他浏览器来调试。...配置系统环境,请参考Cordova Platform Guide,按照向导即可完成。 快速入门 基于上面的系统环境安装的NodeJs,我们先安装Ionic CLI。...在www目录下,创建一个index.html,用您习惯使用的IDE(Visual Studio、Web Storm)进行编辑,添加jQuery、Wijmo引用: <!
Ionic 的生态系统基于Angular 和Cordova,前者是Web 应用框架,后者是构建和打包原生应用的工具。 下图展示了整个技术栈的概况 ? 技术栈的起点是用户在设备上打开应用。...iOS 和Android 都提供了一系列预先定义好的API,可帮助开发者在可控的范围内使用平台特性。有许多官方或者非官方出品的工具可以辅助开发原生应用。...可维护性—移动端网站很容易更新和维护,没有任何审核流程,也不需要更新设备上的程序。 免安装—网站在互联网中,不需要安装到移动设备中。 跨平台—所有移动设备都有浏览器,它们都可以访问你的应用。...有很多工具可以实现WebView 和原生平台之间的通信,从而让Hybrid 应用成为可能。发布这些工具的并不是iOS 或者Android 官方平台,而是第三方,比如Apache Cordova。...通过插件访问原生功能—你需要的原生API 现在可能还没有插件实现,可能需要一些额外的开发工作来进行桥接。 没有原生用户界面控件—如果没有Ionic 这样的工具,开发者需要创建所有的用户界面元素。
简单说,iOS 的原生技术栈就是使用 Object-C 语言或 Swift 语言,在 Xcode 开发环境中编程。...安卓的原生技术栈,则是使用 Java 语言或 Kotlin 语言,开发环境是 Android Studio。 下面就来看看,它们怎么加载网页。 3.1 Xcode iOS 开发需要安装 Xcode。...3.2 Android Studio 安卓的官方开发工具是 Android Studio,可以去官网下载。 ? 安装完成后,打开新建一个项目,类型是"Empty Activity"。 ? ?...运行代码之前,Android Studio 要求必须连接真机,或安装安卓模拟器。完成以后后,在工具栏上点击运行按钮,就可以运行代码查看效果了。 ? ?...它的使用需要 Visual Studio,这里就不举例了。根据官方文档,WebView 的用法如下。 ?
一、Cordova的基础点 在混合式应用中,我们通过现有的Cordova插件,可以轻松的在 H5 上调用手机native的功能。...现有的Cordova插件能满足平时大部分的开发需求,然而,有时候找不到合适的插件、或对找到的插件有不满意的地方,那就要动手去做或改写一个插件,这时候就要了解一些Cordova插件的相关知识。...四、安装已开发完成的插件 如果没有现成的项目,可以创建一个新的cordova项目来测试: cordova create hello com.example.hello HelloWorld 然后像平常添加插件一样...: ionic cordova plugin add /Users/cordova/MyToast 在ionic2或以上使用时,打开任意一个ts文件,在头部声明如下: declare let cordova...ionic cordova plugin remove XXXXX(你的plugin_id) 查看已安装插件 ionic cordova plugin list
-v打印版本,检查npm是否安装成功,同样的,后续说明的nrm -v,ionic -v,cordova -v也是用于检查是否安装成功。...,连接情况也不太保障; 2、使用cnpm,淘宝把npmjs.org在国内做了个镜像,封装了新的cli,其用法跟npm用法完全一致,只是在执行命令时将npm改为cnpm。...两者的版本并不是一致,有时候ionic-angular更新了多个版本,而ionic-cli不需要更新,而ionic-cli一般是bug修复、提高命令执行的性能,或调整ionic项目结构时才需要更新。...七、(JDK & android SDK)/xCode——可选,前者android,后者ios 一般直接下载,也可以安装android studio来实现SDK下载管理(为了方便调试android...原生代码,建议此种方式),两者完成后配置环境变量,不过,现在新版ionic-cli使得上述方式不是必须的,在ionic执行platform添加android时,检查到环境变量没有配置,就会自动下载安装配置
混合手机app开发之Ionic篇第一章 第一节:环境搭建 本次使用的是Ionic3,之前本想用最新的ionic5 使用ionic build后发现,我使用的X5内核不能正常浏览,使用ionic3没有任何问题...5、nfc读读取卡标签(Android串口开发)。 ionic就不多啰嗦了百度一下你就知道,首先搭建开发环境,有不明白的请自行百度。...1、下载node.js 百度搜索node.js官网,下载最新的node.js,傻瓜式安装即可,安装完成之后,使用命令(windows+R)CMD执行node -v和npm -v命令,返回版本号表示已安装成功...2、安装Ionic 上面步骤成功之后执行npm install -g cordova ionic命令安装cordova和ionic,安装完执行ionic -v,返回版本号表示已安装成功。...需要declarations和entryComponents中引入组件 3.如果跳转,在跳转的ts中引入组件。
不过在此之前,必须要将ionic项目成功打包成Android应用,有关 ionic打包成Android应用的具体教程,请参考以下文章: Ionic3 Android打包 模拟器调试 模拟器调试也就是启动...在使用android模拟器之前,需要先下载对应体系的模拟器。 在命令行下运行:android sdk 出现如下界面。找到你需要的android版本,比如我的是android6。...但是,要使用X86模拟器的话,需要安装 英特尔硬件加速执行管理器。安装这个加速器的方法可能由两种。不过可能我系统比较新,第一种已经不支持了。...可以通过 cordova emulate android 调出模拟器。不过在此之前,我们需要先通过 avd 工具创建一个模拟器。...如果这时候还是无法看到你的设备,就把数据线断开再重新连接一次,然后再执行 cordova run android 。这样一般就可以了,我百试百灵。
Ionic 在发布了1.0版本以后,被越来越多的关注和支持,社区也十分的活跃。本文将继续上篇,使用Ionic 框架来开发应用。 1....首先安装NodeJs:https://nodejs.org/ 在NodeJs 网站上找到自己平台的安装包,执行安装即可。 2....npm install -g cordova ionic 在Mac下安装的时候,可能会出现没有权限的问题。...ionic start DeliveryApp blank ? 4. 运行 ionic serve 看一下在网页中的模拟效果。 ionic serve ? 5....给这个应用添加发布平台,这里添加了 android 平台和 ios 平台。 cordova platform add android ? cordova emulate android ?
领取专属 10元无门槛券
手把手带您无忧上云