首页
学习
活动
专区
圈层
工具
发布

使用Ionic3创建原生app系统入门

生成app 前提 安装java jdk 需要1.8.0及以上,但是java9也不行 安装Android Studio ionic cordova run android --device ?...还是有错误 还是有错误,在执行cordova platform add android --save时错误了, 关于cordova 的操作指令可以查看https://cordova.apache.org...image.png 尝试使用cordova安装android插件还是出错。一周了也没有解决。网上查了无数资料,尝试未能解决问题。暂且放一放。或许后面就解决了呢。...目前遇到问题就是cordova platform add android指令过不去,无法添加android环境,就无法生成android的apk安装包,ios也是一样问题,但是不影响web访问。...使用同事的电脑尝试,无需安装java环境和android环境这一步是能通过的。 我们来看下ionic项目文件 ?

3K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    ionic莫名其妙的“cordovaplatform_metadata”

    我的Cordova升级到8已经很久了,而且在此环境下原有的项目跑得好好的,所以别人说有问题需要把Corodva降级到7.1或者7.0时,我不置可否。...,抛出如下错误: cordova/platform_metadata 打印: cordova -v 显示的是8.0.0,鉴于我原有项目在Cordova8下正常的,我便想是platform的问题,尝试移除...android平台并重新添加: ionic cordova platform rm andoid ionic cordova platform add android@6.4.0 结果无法移除自然也无法添加...我又尝试回滚到Cordova8来验证: sudo npm uninstall cordova -g sudo npm install cordova -g ionic cordova platform...rm android ionic cordova platform ls ionic cordova platform add android@6.4.0 然后最后一步时,在安装ionic-plugin-keyboard

    1K20

    【Weex一瞥笔记】

    环境搭建 参考官网使用即可: 安装node,使用 Homebrew 进行安装 brew install node 安装[Weex CLI(weex-toolkit)] (https://github.com...其中init和create命令需要注意一下,常规混合式应用使用create创建weexpack项目。...添加android平台 weex platform add android 一直等待下载安装完成,就会发现platform目录下多了个android的项目目录,然后执行: weex run android...我们尝试vscode打开~/.xtoolkit目录,以关键字playground.apk搜索其下的node_modules文件夹,搜索结果如图: ? image.png What?...页面展示 weex有单页和多页面方式,直观就是一个webview显示所有页面,另一个是多个webview各显示一个页面,而ionic只有单webview显示,所以从某种情况来说,多webview时,weex

    2.8K30

    【开发指南】(四)Ionic3快速上手并了解这些

    当出现下面内容时,说明项目创建成功。 ?...ionic cordova run ios 如果是window系统,配好了android环境,可以敲入: ionic cordova run android 其中,注意下cordova和ionic cordova...我们打开该文件,里面是基本的配置,如$colors,可以随意增删改,当使用某种颜色时,元素标签添加color=“danger”即可使用这里定义的颜色。...一般一个页面三个部分css、ts、html,如果每个手动创建或者复制,效率不高且容易出错,用此指令,只需下面一句即可同时创建这三个文件: ionic g page testPage 7、了解Cordova...,有兴趣可以看此文: http://www.jianshu.com/p/f508b3e2ecc7 8、建议使用chrome调试 调试Web时,调出【开发者工具】,选【终端】模式,以更好查看应用效果,在

    4.5K20

    构建具有用户身份认证的 Ionic 应用

    序言:本文主要介绍了使用 Ionic 和 Cordova 开发混合应用时如何添加用户身份认证。教程简易,对于 Ionic 入门学习有一定帮助。...使用 Okta 和 OpenID Connect (OIDC),可以很轻松的在 Ionic 应用中添加身份认证,完全不需要自己实现。...Cordova 和 PhoneGap 允许你使用一套代码开发多个平台的应用 (比如 Android 和 iOS) 。除此之外,应用程序和原生程序相差无尽并且和原生体验一样好。...它们用于访问被保护的资源,通常是在发送请求时将它们添加到 Authentication 请求头中。...当你尝试运行第一条命令时,它会显示以下内容: ************************************************************************* The

    28.6K00

    构建具有用户身份认证的 Ionic 应用

    序言:本文主要介绍了使用 Ionic 和 Cordova 开发混合应用时如何添加用户身份认证。教程简易,对于 Ionic 入门学习有一定帮助。...使用 Okta 和 OpenID Connect (OIDC),可以很轻松的在 Ionic 应用中添加身份认证,完全不需要自己实现。...Cordova 和 PhoneGap 允许你使用一套代码开发多个平台的应用 (比如 Android 和 iOS) 。除此之外,应用程序和原生程序相差无尽并且和原生体验一样好。...它们用于访问被保护的资源,通常是在发送请求时将它们添加到 Authentication 请求头中。...当你尝试运行第一条命令时,它会显示以下内容: ************************************************************************* The

    27.8K50

    【开发指南】(六)Ionic3从目录结构理解开发

    为新人添加此文。 ionic3一个完整项目,一般会有以下文件夹: ?...在一些需要原生的需求目的,或者基于性能要求的目的,ionic提供了很方便调用原生(利用Cordova)的使用接口,包含配置和扩展,那就是第一张图里其它目录的角色(黑色粗体为重要项): hooks:cordova...的命令钩子,用于编译和打包; node_modules:js库——node管理的依赖包(通过命令npm install 包名或路径安装); platforms:ios、android等可选平台生成的原生项目...:android、ios等平台图标、启动屏资源,在此目录下的资源通过下述命令会把资源按分辨率生成到原生项目目录中,省却自己逐个调整分辨率及拷贝的繁琐工作: ionic cordova resources...因为要和原生打交道,假如有android、ios两个平台,修改点原生内容就要去两份原生代码里面去改好?还是把它们抽出来作为配置项,直接改配置项,就自动覆盖到原生代码中去好?

    4.2K10

    【开发指南】(一)Ionic3开发环境配置常规ionic的环境搭建如下:

    ,连接情况也不太保障; 2、使用cnpm,淘宝把npmjs.org在国内做了个镜像,封装了新的cli,其用法跟npm用法完全一致,只是在执行命令时将npm改为cnpm。...nrm,nrm是在第3点的基础上做了一个优化,它是用于管理npm的源切换,它内部集成来几个常用的npm源,这样,当像第3点使用淘宝源有问题时,可以很方便的切换到其它源,而不需要记住一堆源的地址,甚至可以添加自己的...装完nrm后,正常使用npm即可,当执行npm命令时觉得慢,就用nrm命令use切换一下源 nrm主要使用ls和use命令 1)nrm ls是列出来现在已经配置好的所有的源地址;...原生代码,建议此种方式),两者完成后配置环境变量,不过,现在新版ionic-cli使得上述方式不是必须的,在ionic执行platform添加android时,检查到环境变量没有配置,就会自动下载安装配置...其中,window不能开发ios,如果要开发和调试ios,要装苹果系统(Mac、黑苹果、虚拟机等等),而苹果系统基本可以开发各个平台。

    2.9K30

    实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使用...开发(5) – 实现页面功能 实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端 Ionic是什么?...Ionic 在发布了1.0版本以后,被越来越多的关注和支持,社区也十分的活跃。本文将继续上篇,使用Ionic 框架来开发应用。   1....首先安装NodeJs:https://nodejs.org/ 在NodeJs 网站上找到自己平台的安装包,执行安装即可。 2....给这个应用添加发布平台,这里添加了 android 平台和 ios 平台。 cordova platform add android ? cordova emulate android ?

    3.9K80

    Ionic3 Android打包

    所谓的Anrdoid打包,就是将ionic项目打包成一个可以安装在Android系统上的apk文件,打包的时候,使用的是cordova工具,不过在此之前,需要一些准备工作:配置JDK、Android...SDk还有各个android版本包的下载,最重要的是需要成功的创建了一个Ionic项目,有关ionic项目创建的详细教程,请参考以下文章: Ionic3 Start 配置JDK 主要就是以下流程...添加平台 配置Android SDk完全是为了能够在打包的时候需要用到,不过在打包操作之前,还有一个非常重要的操作,那就死为该应用添加平台。可选的平台有很多,常见的 Android、IOS。...添加IOS平台需要在MacOS上操作,本文也仅是介绍将ionic项目打包成Android应用,因此不涉及到打包IOS的内容。...添加平台通过cordova工具添加,新版本和老版本的命令会有一些区别,以新版本为准: ionic cordova platform add android 该命令用于向当前应用添加 android

    1.3K30

    IonicHybrid跨终端应用程序开发方案研究

    这里用到的的是用于android签名证书等打包(android开发过程中ide使用gradle配置打包,早期都是用的ant打包,这里使用的方法比较原始) http://ant.apache.org/bindownload.cgi.../sdk/installing/index.html 下载后解压到某个目录(例如D盘),然后添加系统环境变量 ANDROID_HOME D:/android-sdk-windows path...配置移动平台 $ ionic platform add ios $ ionic platform add android $ ionic build android/ios $ ionic emulator...4.angular与组件化 ionic使用了angular作为基础开发库,并用组件化的方案来管理自己的一套前端库,主要用到angular,angular-ui,iconfont,svg等前端技术知识,这里不一一展开了...5.总结分析 优势 大量可参考的组件和文档,使得开发入门成本比较低 兼容angular(当然自己也可以用其他的,只是默认创建项目时引入了angular) 整理来说,ionic的方案仍然集中在hybrid

    2.3K10

    IonicHybrid跨终端应用程序开发方案研究

    这里用到的的是用于android签名证书等打包(android开发过程中ide使用gradle配置打包,早期都是用的ant打包,这里使用的方法比较原始) http://ant.apache.org/bindownload.cgi.../sdk/installing/index.html 下载后解压到某个目录(例如D盘),然后添加系统环境变量 ANDROID_HOME D:/android-sdk-windows path...配置移动平台 $ ionic platform add ios $ ionic platform add android $ ionic build android/ios $ ionic emulator...4.angular与组件化 ionic使用了angular作为基础开发库,并用组件化的方案来管理自己的一套前端库,主要用到angular,angular-ui,iconfont,svg等前端技术知识,这里不一一展开了...5.总结分析 优势 大量可参考的组件和文档,使得开发入门成本比较低 兼容angular(当然自己也可以用其他的,只是默认创建项目时引入了angular) 整理来说,ionic的方案仍然集中在hybrid

    3K80

    搭建Cordova开发环境

    它可以与UI框架(如jQuery Mobile、angularjs或Sencha Touch)等相结合使用,这些UI框架可以使用HTML、CSS和JavaScript开发智能手机应用。...通过Cordova开发的应用,可以编译为android和ios版本的应用。...本文介绍Cordova+ionic+angularjs开发环境搭建 ionic是什么 ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架。...这个框架的目的是从web的角度开发手机应用,基于PhoneGap(即cordova)的编译平台,可以实现编译成各个平台的应用程序。...node -v结果:v4.2.1 说明安装正常 第二步:安装cordova 在命令行输入如下命令,安装cordova: npm install -g cordova 如果命令长时间无反应或者出现错误,尝试输入以下命令

    3.1K70
    领券