首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用 Cordova 构建应用的流程

添加平台支持 添加平台和后续命令都需要在项目的目录或任何子目录中运行, 添加安卓 和 iOS平台 $ cordova platform add ios $ cordova platform add android...在准备编写插件,最好查看一下现有的插件以获得指导。 1. Building a Plugin 构建插件 应用程序开发人员使用 CLI 的插件 add 命令项目添加插件。...使用Plugman 验证插件 你可以使用 plugman 工具来检查插件是否正确地安装在每个平台上。...运行以下命令所有平台构建项目: $ cordova build 你可以有选择地将每个构建的范围限制在特定平台上——在本例选择"android": $ cordova build android 如果最后能看到...加载 GMail 之后,邮件视图、编辑和组织都是通过更新 DOM 完成的,不是真正离开当前页面去加载一个全新的页面。

4.2K11

自定义Cordova插件详解

等你消化完plugin.xml文件后,敲命令进入插件目录: cd MyToast 添加支持平台 plugman platform add --platform_name android plugman...platform add --platform_name ios 这样,就会分别创建src/android/MyToast.java和src/ios/MyToast.m两个文件,这里只演示android...js调用的方法名,参数可以为任意多个 exports.showToast = function(msg, success, error) { //"showToast"给MyToast.java...,但后来的Cordova版本要求添加一个package.json来管理插件,plumam没有给我们创建这样一个文件,于是我们手动创建,借助npm init命令创建package.json。...,运行如下命令:(add 后面插件所在本地或网络路径): cordova plugin add /Users/cordova/MyToast 如果已有项目且是ionic项目,则命令前追加上ionic

2.2K30
您找到你想要的搜索结果了吗?
是的
没有找到

Vue3.0入门 + Vant3.0移动端实践(三)使用Cordova打包Android App

简单来说就是:使用Cordova这个框架可以让你支持混合应用开发,把h5的web应用打包成各种平台上能跑的类似原生的应用体验。且它还提供了一些访问平台设备的插件或api,方便使用js访问到硬件功能。...根据 平台具体指导安装相应平台的依赖。打开命令提示符或终端,然后键入npm install -g cordova.安装。 安装完成后,使用Cordova -v可以查看下是否安装成功。...3.第三步,命令符进入到Cordova项目中,添加browser平台 cordova platform add browser 4....第四步,浏览器运行 cordova run : cordova run 5.第五步,打包apk安卓运行,生成的安卓包 cordova platform add android (前提条件:电脑上已有...gradle也需要加入到环境变量,Gradle是Android Studio用来构建和管理项目的一个插件。

2.3K21

Cordova(工具)- Config.xml详解

使用CLI来建一个项目,该文件版本进行被动复制到不同的平台子目录。 一个新项目的config.xml文件 <?xml version='1.0' encoding='utf-8'?...许多偏好是独一无二的特定平台详细的每一个代表的意义,请参考官方文档,太多不一一列举了 下面的表,列出具体的所有名称 feature 用来指定什么某些插件参数,如:什么包检索来自插件代码,并确定是否插件代码是网页视图的初始化期间进行初始化...platform 使用CLI来构建应用程序,有时需要以指定特定特定平台的偏好或其他元素。使用元素来指定应该只出现在一个 platform-specific -config.xml文件中的配置。...hook cordova某些行为发生, 调用自定义脚本, 例如 插件安装完成后,执行afterPluginInstall.js <preference

1.1K40

iOS开发之-cordova项目创建

这些资源将存储在设备上的本地文件系统,不是远程服务。config.xml文件包含重要的需要生成和分发应用程序的元数据。...3.添加平台 此时桌面会出现hello文件夹,进入文件夹。所有后续命令需要在项目的目录中运行,其范围内或任何子目录: $ cd hello $ cordova platform add ios ?...显示如上则完成了一个项目的创建,其他平台的添加类似。 4.项目的构建和运行 检查项目环境是否搭建完毕 $ cordova requirements ?...如上则环境配置完整,不然根据提示装相应的插件 在hello目录中运行下面的命令来构建项目: $ cordova build ?...显示如上则构建成功 在hello目录中运行下面的命令来运行项目: $ cordova run ? 显示如上则运行成功,此时会调用模拟器或真机 ?

96060

【技巧】ionic3优雅解决启动前、后黑白屏问题

然而个人建议不要直接操作platform里面的项目文件,因为移除再添加android平台,复制修改很麻烦,而且容易遗忘。...我这里定义了两个样式,来满足不同喜好,使用时二选一就行了:第一个样式,screen.png作为ionic或cordova默认生成的启动屏图片,于是使用screen.png背景图;第二个样式透明主题。...然后安装该插件: ionic cordova plugin add 本插件本地或远程路径 验证一下,会发现在platform目录android里的res/values里会多出styles.xml文件。...ionic cordova plugin add cordova-custom-config 这个插件和普通插件不同,并不会增加项目大小,它是注册Cordova的钩子,利用Cordova命令修改自定义配置...如果设置 false ,它将被拉伸; FadeSplashScreenDuration——逐渐消失SplashScreen的动画延; SplashShowOnlyFirstTime——是否只第一次显示

3.5K60

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

,同样的,后续说明的nrm -v,ionic -v,cordova -v也是用于检查是否安装成功。...两者的版本并不是一致,有时候ionic-angular更新了多个版本,ionic-cli不需要更新,ionic-cli一般是bug修复、提高命令执行的性能,或调整ionic项目结构才需要更新。...cordova build的,是把www目录打包原生应用,ionic cordova build,是先执行基于ionic配置的一系列编译压缩打包命令把src源码生成www目录,再执行cordova...,不过,现在新版ionic-cli使得上述方式不是必须的,在ionic执行platform添加android,检查到环境变量没有配置,就会自动下载安装配置android环境,最后可以输入adb 来简单验证环境配好没...其中,window不能开发ios,如果要开发和调试ios,要装苹果系统(Mac、黑苹果、虚拟机等等),苹果系统基本可以开发各个平台

1.9K30

【Weex一瞥笔记】

当然weexpack项目也可以如下直接装weexpack的CLI,通过该CLI构建及维护项目,只是weex-toolkit已经集成weexpack了,所以也不是必要。...添加android平台 weex platform add android 一直等待下载安装完成,就会发现platform目录下多了个android的项目目录,然后执行: weex run android.../android下的app/build/outputs/apk/,发现文件名为weex-app.apk,不是playground.apk,所以找不到。...页面展示 weex有单页和多页面方式,直观就是一个webview显示所有页面,另一个是多个webview各显示一个页面,ionic只有单webview显示,所以从某种情况来说,多webview,weex...原生支持 可能刚接触不深,weex不建议但可以支持cordova,而且可以较方便集成原生第三方插件。反之,ionic只能支持cordova

2.1K30

ionic hybrid app:产品还是玩具?

在上图中,ionic所包含的范围上图中蓝色部分。这四个部分都是现有的工具或技术,各个部分分别负责如下模块: Angular & Angular UI: 用于构建APP页面的框架,以及组件UI。...Cordova:用于将HTML, JS, CSS打包编译为不同终端的安卓包,并且为js与对应平台上的native api提供交互能力。...目前Cordova与PhoneGap的关系类似于Webkit和Google Chrome的关系。 Cordova支持多个终端平台,可以凭借这一点,实现一处编写前端代码,在各种平台上处处运行。...那这种App是否有成功产品(或者说成功的产品)的能力呢?异或只是前端粉们的一个即兴作的玩具? 4. ionic的适用范围 对于上文中的问题,ionic的官方博客中专门有一篇文章有说明。...ionic声明了自己是做APP的不是做website的(毕竟很多Cordova Native API无法在手机browser上使用),最重要的,ionic果断抛弃了屌丝机,拥抱高端机。

5.5K80

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

(通过命令ionic cordova platform add 平台名称后生成,本来支持wp的,但看最新命令显示貌似已经移除了,见如下): StreamdeMacBook-Pro:appetite woodstream...$ ionic cordova platform ls > cordova platform ls Installed platforms: ios 4.4.0 Available platforms...插件(通过ionic cordova plugins ls查看,通过ionic cordova plugins add/remove 插件名或路径来添加/删除); resources :android...、ios等平台图标、启动屏资源,在此目录下的资源通过下述命令会把资源按分辨率生成到原生项目目录中,省却自己逐个调整分辨率及拷贝的繁琐工作: ionic cordova resources 或只针对单个平台的...: ionic cordova resources 平台名 命令可选参数: --force, -f 强制重建资源; --icon, -i 创建图标资源; --splash, -s

2.7K10

Cordova 运行 Web 应用

其实还可以使用 Cordova 现有的 Web 应用提供设备 API , 增强现有 Web 应用的功能。...新建一个 Cordova 应用 按照 Cordova 的文档说明, 创建一个测试应用, 并添加 Android 平台, 指令如下: cordova create myApp org.apache.cordova.myApp...myApp cordova platform add android 然后先编译一次,确认可以生成 Android 应用: cordova build android 第一次编译, 会下载特定版本的...添加并使用 Cordova 原生插件 以 cordova-plugin-app-version 例, 通过这个插件可以获取到客户端 app 的包名称以及版本等扩展: cordova plugin add...date = new Date(); url += date.toISOString(); // 注意, 一定要用 replace 方法, 否则会打开新浏览器窗口, 不是

1.1K20

ionic hybrid app:产品还是玩具?

在上图中,ionic所包含的范围上图中蓝色部分。这四个部分都是现有的工具或技术,各个部分分别负责如下模块: Angular & Angular UI: 用于构建APP页面的框架,以及组件UI。...Cordova:用于将HTML, JS, CSS打包编译为不同终端的安卓包,并且为js与对应平台上的native api提供交互能力。...目前Cordova与PhoneGap的关系类似于Webkit和Google Chrome的关系。 Cordova支持多个终端平台,可以凭借这一点,实现一处编写前端代码,在各种平台上处处运行。...那这种App是否有成功产品(或者说成功的产品)的能力呢?异或只是前端粉们的一个即兴作的玩具? 4. ionic的适用范围 对于上文中的问题,ionic的官方博客中专门有一篇文章有说明。...ionic声明了自己是做APP的不是做website的(毕竟很多Cordova Native API无法在手机browser上使用),最重要的,ionic果断抛弃了屌丝机,拥抱高端机。

3.2K10

Cordova、PhoneGap、Ionic,等等

严格来说,我们无法说一个应用本身是否是原生的。我们只能说,相比于另一个应用,它是更原生的。举个例子,你可以使用 C++ 、Java (或 Kotlin) 或 Cordova 来开发安卓应用。...还有一个额外的好处,原生化较少的框架中的程序通常更具可移植性,程序可以在完全不同的硬件平台上运行而无需修改,因为它的词汇和底层概念不包含任何特定于原始硬件的内容。...用户界面是针对目标平台(安卓或 IOS)的定制的,因此使用起来是流畅且愉悦的。但是,所有这些好处都被限制在一个平台上了。...这些应用可以同时运行在安卓和 IOS 平台上(还可以有更多平台)。但是,相比于原生应用,这类应用会没有那么流畅,能访问的硬件功能也有限。最重要的是,这些应用的用户界面太烂了!...需要,React Native 还提供了一种渗透到原生框架的方法,以实现我们希望在应用中实现的任何原生功能。这有点像在黑客帝国中打电话。 ? 所以 WebView 框架一无是处喽? 不,当然不是

3.2K40

毕业设计So Easy:Java MySQL智能报纸阅读器APP应用

输入 cordova platform add android,添加Android平台的支持。...Cordova会调用Android SDK在platform/android 中创建一个完整的Android应用工程。...由于这里仅需要在用户无网络连接给出提醒,因此仅需判断 navigator.connection.type 是否 “none” 即可。...该插件提供了名为appAvailability.check的方法用于检测特定的APP是否有被安装在手机上。...识别结果: 识别完成即自动开始朗读,以下为朗读的界面,提供音量调节功能(会自动记住上一次设置的音量,避免每次播放都要调大音量,默认的音量50%大小),以及重复朗读功能: 点击“语音设置”按钮,跳转到系统的语音设置界面

50020

【初探IONIC】不会Native可不可以开发APP?

cordova一移动开发框架,他让我们可以仅仅专注前端代码,然后通过一个开发框架编译形成一个可安装的APP,因为前端代码的特性,所以这种APP是跨平台的,可以最大程度的提升开发效率,因为只需要前端人员...Native同事开发的,cordova打包后的Webview容器是公司开发的,这里所谓跨平台,其实是有一个公司做出了这种平台性产品做出了支撑。...当然,Ionic在一些Andriod机上表现不是很好,因为是内嵌资源,作为APP来说加载速度较快还无所谓,但是同一套代码如果要用做H5站点的话,angularJS的尺寸就是很大一个制约。...tabs 这里需要安装Andriod开发环境,不然的话,下面几个命令会报错,如果有Andriod环境的话,就能成功运行了: $ cd myApp $ ionic platform add android...Hybrid做更深入的了解,所以今天花了时间来简单了解了下Ionic,也只是很简单的了解,如果真的要生产应用各位可以去上面的网址认真学习吧,以我的经验,有angular的基础的话,学习周期在一周左右便可坑开发了

2.3K80

客户端软件GUI开发技术漫谈:原生与跨平台解决方案分析

现在大多数程序员都是基于C#、Java进行开发,如果不是Apple死忠,根部不会花大力气研究 跨平台软件应用开发 直接元素开发肯定是最好的——这样的性能肯定最有保证,但是跨平台的主要优势在于代码逻辑的复用...Electron Electron是由Github开发,用HTML,CSS和JavaScript来构建平台桌面应用程序的一个开源库。...Xamarin.Android被编译成中间语言,Xamarin在APK安装包中会包含一个mono(跨平台的.NET运行环境),代码是在mono运行时和安卓本地的运行时上完成工作的。...Xamarin 允许在每个平台上创建本机 UI,并在 C# 中编写跨平台共享的业务逻辑。 在大多数情况下,80% 的应用程序代码可使用 Xamarin 进行共享。...Xamarin 在 .NET 的基础之上进行构建,它自动处理诸如内存分配、垃圾回收以及与基础平台的互操作性等任务。

14.4K30

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

Cordova 和 PhoneGap 允许你使用一套代码开发多个平台的应用 (比如 Android 和 iOS) 。除此之外,应用程序和原生程序相差无尽并且和原生体验一样好。...使用 Ionic serve 命令的特点是它会在浏览器中显示编译错误,不是(有时会隐藏)在开发控制台。...为了将 Okta 的身份认证平台整合到用户身份认证中,需要以下步骤: 注册 并创建一个 OIDC 应用 登录 Okta 账户,然后导航到 Admin > Add Applications 并点击 Create...由于 OIDC 和 OAuth 不是身份认证协议,所以这是使用 JavaScript 完成身份验证所必需的,不必重定向到 Okta 。...出现提示输入 "y",按回车。 TIP: 我发现在模拟器中运行应用程序时的最大问题是键盘很难弹出。

23.8K00

ionic监听android返回键实现“再按一次退出”功能

在android平台上的app,在主页面时经常会遇到“再按一次退出app”的功能,避免只按一下返回键就退出app提升体验优化。...registerBackButtonAction方法(注册硬件后退按钮动作) registerBackButtonAction(callback, priority, [actionId]) 参数 类型 说明 callback function 点击返回按钮触发...例如:如果一个上拉菜单已经显示,后退按钮应该关闭上拉菜单,不是返回一个页面视图或关闭一个打开的模型。...function ($rootScope, $ionicPlatform, $location, $ionicHistory) { "use strict"; // 当用户在主页面, 按返回键,...(() = { $rootScope.exitApp = false; }, delay); } // 判断当前路由,是否是project, mission,mine, message

1.8K20
领券