Cordova跨平台Web App开发指南(安卓篇)
Cordova跨平台Web App开发指南(安卓篇)
打包ios包必须用苹果系统,没钱买IOS设备,这里只介绍Android平台打包
一、Cordova简介’
在进行Cordova开发之前, 先花点时间了解一下的Cordova的原理和Cordova的框架结构.
- Cordova是开发跨平台web App的工具, 使用前端技术来开发App, 可以节省成本和快速发布.
- Cordova的底层逻辑是:HTML+CSS搭建页面, 使用JS和原生平台交互来展示原生平台的功能.
- Cordova所有功能是建立在各种插件上的, 所以插件开发是Cordova开发的重点.
1.1 纯Cordova开发
这种开发模式不需要各原生平台开发人员参与, 只需要前端猿将开发好的web App放入到Cordova工程中, 然后使用Cordova-CLI(Cordova命令行界面)将web App和各种插件配种好后, 就可以build, run进行各平台的构建和调试了. 以下是纯Cordova开发的步骤:
- Cordova的安装
- 使用Cordova-CLI创建Cordova项目----创建Cordova项目后, 前端猿就可以在www/进行开发, 今后的大部分工作都集中在这个文件下.
- 添加平台
- 添加插件
- 构建Cordova项目
- 在各原生平台上运行Cordova App
- Cordova项目更新
二、Cordova的安装
CLI工具需要使用npm来安装, 因为它被发布到了npm。按照下面步骤来按照CLI:
- 下载和安装Node.js.
- 安装cordova 模块使用Nodejs的npm工具。cordova模块会被npm工具自动下载。在window中:
-g标志告诉npm全局安装cordova. 否则, 它将安装在当前工作目录的node_modules子目录中。
三、创建Cordova工程
3.1 创建App
跳转到你维护源代码的目录中,并创建你的cordova项目:
cordova create myCordovaProject com.mycompany.myapp MyCordovaProject
这将会为你的cordova应用创造必须的目录。默认情况下,cordova create命令生成基于web的应用程序的骨骼,项目的主页是 www/index.html 文件。
上面create命令的解释:
- 保存项目的路径,比如上面的“myCordovaProject ”,该路径是缺省的。
- 项目的id,默认值是io.cordova.hellocordova; 安卓中的Java包名,IOS的bundleID都需要用到这个,所以最好不要缺省,好好命个名,该值以后可以修改。
- 项目的name,默认是HelloCordova,该值也可以修改,安卓平台可能会使用该值作为类名。
- 上面的id 和 name 都会配到config.xml中
注意:可能遇到的问题:如果出现:'cordova' 不是内部或外部命令,也不是可运行的程序。解决方法:使用node.js command prompt 命令行窗口执行即可
3.2 添加平台
所有后续命令都需要在项目目录或者项目目录的任何子目录运行:
进入myCordovaProject项目目录:
给你的App添加目标平台。我们将会添加'ios'和'android'平台,并确保他们保存在了config.xml中:
cordova platform add ios --save
cordova platform add android --save
检查你当前平台设置状况:
cordova platform ls
运行add或者remove平台的命令将会影响项目 platforms的内容,在这个目录中每个指定平台都有一个子目录。
注意:在你使用CLI创建应用的时候, 不要 修改/platforms/目录中的任何文件。当准备构建应用或者重新安装插件时这个目录通常会被重写。
3.3 安装构建先决条件
要构建和运行App,你需要安装每个你需要平台的SDK。另外,当你使用浏览器开发你可以添加 browser平台,它不需要任何平台SDK。
检测你是否满足构建平台的要求:
cordova requirements
Java JDK: not installed
Failed to run "javac -version", make sure that you have a JDK version 8 installed.
You can get it from the following location:
https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Android SDK: not installed
Failed to find 'ANDROID_SDK_ROOT' environment variable. Try setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.
Android target: not installed
Command failed with ENOENT: android list target
spawn android ENOENT
'android' ڲ ⲿ Ҳ ǿ еij ļ
Gradle: not installed
Could not find gradle wrapper within Android SDK. Could not find Android SDK directory.
Might need to install Android SDK or set up 'ANDROID_SDK_ROOT' env variable.Requirements check results for browser:Requirements check results for ios:
Apple macOS: not installed
Error: Cordova tooling for iOS requires Apple macOSRequirements check results for windows:
Windows OS: installed Windows 10
MSBuild Tools: not installed
MSBuild tools v.14.0 not found. Please install Visual Studio 2015 Community or higher from https://www.visualstudio.com/downloads/download-visual-studio-vs
Visual Studio: not installed
Required version of Visual Studio not found. Please install Visual Studio 2015 Community or higher from https://www.visualstudio.com/downloads/download-visual-studio-vs
Windows SDK: not installed
Windows SDK not found. Ensure that you have installed Windows 10.0 SDK along with Visual Studio or install Windows 10.0 SDK separately from https://dev.windows.com/en-us/downloads
Windows Phone SDK: not installed
Windows Phone SDK not found. Ensure that you have installed Windows Phone 10.0 SDK along with Visual Studio or install Windows Phone 10.0 SDK separately from https://dev.windows.com/develop/download-phone-sdk
Some of requirements check failed
可以看到,我的电脑环境并不满足android和ios平台的要求。
首先我们来满足下android平台的环境要求。
3.3.1 JDK
通过java -version 命令检查一下
如果没安装,可以参考:http://hexo.wbjiang.cn/jdk%E4%B8%8B%E8%BD%BD%E5%92%8C%E5%AE%89%E8%A3%85%E7%AE%80%E6%98%8E%E6%95%99%E7%A8%8B.html
3.3.2 Gradle
Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建开源工具。
Gradle安装和环境变量配置:
首先在C盘新建一个Gradle目录,然后将安装包解压到该目录下,最终得到的目录是这样的。
C:\Gradle\gradle-5.5.1
然后我们需要给环境变量-系统变量-Path新增一项
C:\Gradle\gradle-5.5.1\bin
完成后,即可命令行检查下gradle是否安装配置正常。
3.3.3 Android SDK
首先我们安装https://developer.android.google.cn/studio
我们会安装好Android SDK。
这里顺便记下SDK的安装目录。
C:\Users\Administrator\AppData\Local\Android\Sdk
接着我们需要在环境变量-系统变量-Path中新增两项:
C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools
C:\Users\Administrator\AppData\Local\Android\Sdk\tools
并且新增一项系统变量ANDROID_HOME,变量值为:C:\Users\Administrator\AppData\Local\Android\Sdk
再新增了一项系统变量ANDROID_SDK_ROOT,变量值与ANDROID_HOME一样
试运行命令cordova run android
出现了下面的错误:
原因是手机没连接到电脑,需要将手机连接到PC,并且打开开发者选项,允许USB调试。再次尝试,已经可以看到界面了。
注意:可能遇到的问题:运行cordova run android 时, GRADLE 项目下载 grade-*-all.zip 慢的问题
终止掉此命令 ,先下载上面命令所对应的gradle版本。
打开文件夹:C:\Users\Administrator\.gradle\wrapper\dists\gradle-6.5-all\2oz4ud9k3tuxjg84bbf55q0tn
黄色部分可能与我的电脑有所不同, 不过这个文件夹大多数都在用户主目录下 .gradle//wrapper/dists/... 下
在进入上一步说的文件夹以后先删除所有文件,然后把下载好的 gradle-6.5-all.zip 文件复制到此文件夹。
再重新运行cordova run android 即可。
打包成apk
cordova build android
找到这个apk文件: C:\Users\Administrator\myCordovaProject\platforms\android\app\build\outputs\apk\debug
将apk文件下载到手机,即可安装
Cordova跨平台Web App开发指南(安卓篇)相关推荐
- Google Web App开发指南
http://www.html5rocks.com/webappfieldguide/case-studies/case-study-intro/ 第一章:什么是Web Apps? 很多人向我问起学习 ...
- Google Web App开发指南第三章:案例研究
旅程计划应用(Wayfindit: Trip Planner App) 在大多数情况下,Wayfindit的应用必须有很好的易用性.旅行是一件很复杂的事情,不管是商业旅行还是休假旅行,一个顺利的旅程要 ...
- app开发和web开发_理解现代Web App开发概念的指南
app开发和web开发 Millions of businesses exchange information on the internet and to interact with their t ...
- web系统 手机app 能访问吗?_成都APP开发:原生APP开发与Web APP开发有什么区别呢?...
智能手机上的APP应用软件对于人们来说已经成为日常工作生活当中必不可少的工具,无论是工作生活中的聊天交流,购物,饮食,出行,娱乐都会有相应的APP软件.目前常见的APP软件开发模式有两种,一种是原生A ...
- web app开发技巧总结
Web APP开发技巧总结 一.META/LINK相关: 1.百度禁止转码 通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心.不过我们可以通过这个meta标签来禁 ...
- 原生开发什么意思_成都APP开发:原生APP开发与Web APP开发有什么区别呢?
智能手机上的APP应用软件对于人们来说已经成为日常工作生活当中必不可少的工具,无论是工作生活中的聊天交流,购物,饮食,出行,娱乐都会有相应的APP软件.目前常见的APP软件开发模式有两种,一种是原生A ...
- 原生APP开发与WEB APP开发的区别
APP开发模式通常分为Web APP与Native APP原生模式两种,这两种模式均各自有自己的优势,到底是采用Native App开发还是采用Web App开发一直是业界争论的焦点,但是随着HTML ...
- 【知识整理】聊聊web app开发的那些事
一.什么是web app? 根据本人理解,通俗点讲,web app是用前端的HTML5.CSS3.JavaScript借助于适当的web app开发SDK或平台整合开发,可以编译为兼容大多数Andro ...
- 移动web app开发必备 - 异步队列 Deferred
背景 移动web app开发,异步代码是时常的事,比如有常见的异步操作: Ajax(XMLHttpRequest) Image Tag,Script Tag,iframe(原理类似) setTimeo ...
最新文章
- RMAN_学习笔记1_RMAN Structure概述和体系结构
- 雷观(十一):接私活有利有弊,我们应该根据自己的实际情况选择接私活
- 读写EXCEL的例子
- vb.net 设置打印纸张与页边距_文字办公—Word文档如何设置装订线
- (详细)Hibernate查询技术(Query、Session、Criteria),Hibernate的三种状态,Hibernate集合struts2实现登录功能(二)
- HDU ACM 1078 FatMouse and Cheese 记忆化+DFS
- HashMap源代码深入剖析
- 导入maven项目出现 Unsupported IClasspathEntry kind=4
- 4. 两个排序数组的中位数
- mysql不是内部命令_mysql不是内部命令的错误解决方案
- 使用win10自带的计算器,计算对数log
- Excel中《分列》高效到爆的用法,8个案例,太实用了!
- java堆栈总结、JVM
- 设置EditText输入的文字全部变成大写或小写方案总结
- 百度云同步盘网络异常【1】解决办法(续)
- 【vue练手01之点击选中】
- 计算机图标显示的是word,word图标不显示怎么办 设置显示word图标的方法
- 【python】print函数的用法示例与讲解
- 在计算机时代初期,程序员是如何编程的?
- 核心单词Word List 10
热门文章
- 企业级博客项目笔记(二)
- UVa 11329 - Curious Fleas
- mysql存储过程语法错误1064_mysql,dos下执行SQL语句创建存储过程出错ERROR 1064 (42000):...
- 从输入URL到浏览器显示页面到底经历了什么?
- elasticsearch 出现 All shards failed for phase:问题解决过程
- 计算机ppt社团教案,计算机社团教案
- 树莓派Odroid等卡片式电脑上搭建NAS教程系列6-miniDLNA
- Touch_GUI(基于STM32触摸屏)
- 1553B总线测试仪
- 2023年西北工业大学兵器科学与技术考研上岸前辈备考经验