介绍使用Cordova和Web Starter Kit开发Android

介绍 如今，每个人都想制作移动应用程序，为什么不呢?世界上有更多的移动设备比任何其他用户设备。Android尤其流行，但是为什么不从一个众所周知的跨平台应用的基础开始呢?Android的开发显然比其他平台更容易(特别是在考虑部署和设备/虚拟设备测试时)，因此本教程针对的是Android，但请记住，一旦您按照这些说明启动并运行，您就离针对其他平台仅一步之遥了。而“一步”，我字面上的意思是，它可以像一个命令一样简单(这是所有我需要做的，让我的应用程序编译为Windows Phone)。 本文引用了一个GitHub存储库，它目前非常简单——主要是文档。其目的是扩展项目，为下面列出的步骤提供帮助。此外，这些步骤用于生成您目前可以在游戏商店中找到的应用程序:Hackendot (https://play.google.com/store/apps/details?id=com.hackendot)。请注意，这款应用程序是完全免费的，所以请尽情试用。虽然有一个捐赠按钮，但你并没有义务去捐赠，所以请不要认为我是在这里钓鱼——这只是一个参考应用程序，来向你展示我所做的工作。 在我们开始之前，有一些免责声明和澄清: 我与下面我使用的项目没有任何关系(尽管我目前有一个GitHub项目来帮助完成这个过程，我希望有一天可能不仅仅是文档;它还将包含一些实用程序来简化这个过程)我，在任何情况下，站在任何位置从你使用这个过程或这些工具获益。这只是一些对我有用的东西(和一些我帮助过的人)。YMMV，所以如果你遇到了问题，请发布一个问题，而不是崩溃(:你将需要键入很多和阅读你的工具告诉你。虽然这是一个初学者教程，我不认为这是不合理的——如果你害怕打字，也许编程不适合你^_^这个过程目前仍在发展。但是，我相信有足够的教程来入门!我对结果的质量或可靠性不作任何声明。我只是提供了一个教程，介绍如何使用一些免费的工具来使用HTML5和Javascript构建Android应用程序。但是，我真诚希望这些资料将是有用的。 背景 Web Starter Kit (https://developers.google.com/web/star-kit/)是一个由谷歌开发的框架，以协助创建网站，有一个响应式的设计和一个小的足迹。我选择它作为本教程的基础，因为: 它很小它快速积极地开发和维护感觉很自然作为一个移动应用程序(网络或应用程序)提供了一个真正快速发展周期与“吞咽”命令:跑步时,你的变化是反映在一个浏览器,你把它们,这样你就可以立即看到你所做的事和调试错误而不必等待部署设备或虚拟设备。缩小你所有的HTML, CSS和Javascript为最小，最快的应用程序，你可以得到。 Cordova (http://cordova.apache.org/)是一个将HTML5/Javascript应用部署到包括iOS、Android和Windows Phone在内的多个目标的框架。但是请注意，要为iOS构建，您需要一个Mac作为构建服务器。它可以作为开发Android应用程序的基础，因为: 你可以使用我们大多数人都喜欢的HTML5和Javascript工具来开发，你可以针对多个移动平台，尽管Android是迄今为止最容易上手的，而且是完全免费的!其他付费产品使用Cordova作为基础(如PhoneGap)。还有其他使用Cordova的免费框架——如果你感兴趣，可以去看看Ionic(尽管Ionic侧重于iPhone，没有Web Starter Kit的优势) 此信息的来源在https://github.com/fluffynuts/whisk不断发展。还有一些文件可以帮助您入门(例如已经设置的gulpfile)。js、包。json和.jshintrc。在撰写本文时，我还在编写使用karma与代码一起运行测试的说明(以及对gulfile的修改)。但对于初学者教程，我认为有足够的以下…现在! 使用信息… (序言:当你看到一行以“>，这是一个可以从cmd.exe运行的命令。 要运行它，显然剥离了领先的“>”。所以如果你看到: 隐藏,复制Code

> run_stuff.bat

你会打开一个控制台并输入: 隐藏,复制Code

run_stuff.bat

, 并按enter键。 有用的链接: 1) Cordova CLI参考:http://cordova.apache.org/docs/en/3.5.0/guide_cli_index.md.html #命令行界面 2)从W开始eb启动包:https://developers.google.com/web/fundamentals/tools/setup/setup_kit 整个过程的先决条件: 系统工具先决条件(为了获得最佳结果，请使用升级的控制台运行) 1)一些有用工具的包管理:从https://chocolatey.org/获取Chocolatey ,,(或者，只是在控制台运行这个): 隐藏,复制Code

> @powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

, 这和你从这里得到的指令是一样的:http://chocolatey.org/，所以如果你不想相信我的复制粘贴(我不怪你)，那就直接去看最初的命令行(: 2)您需要某种形式的命令行解压来执行指定的后续步骤，所以如果 隐藏,复制Code

> where unzip

,,生成类似于“无法找到给定模式的文件”的错误 隐藏,复制Code

> choco install devbox-unzip

,,或者更好，但需要更长的时间:获取gnuwin，因为它很有用 , 隐藏,复制Code

> choco install gnuwin

,,-注意gnuwin安装要花很长时间;如果，因为某种原因，你打断了它 ,,,,,,而想以后再捡，你可以这样做: 隐藏,复制Code

> choco install -force gnuwin

3)你会花一些时间在控制台。你也可以叫ConEmu: 隐藏,复制Code

> choco install conemu

,,当然，开始使用它吧!ConEmu更漂亮，可适当调整大小，并可以使用选项卡。 4)为此需要git 隐藏,复制Code

> where git

,,应该打印出一个路径。如果不是,做 隐藏,复制Code

> choco install git

,,或者去安装SourceTree (https://www.atlassian.com/software/sourcetree/overview)，设置并允许它下载git并添加 ,,,,那个蠢货跟你一样 Web Starter Kit必备条件: 1)安装先决条件的简单说明(参见https://developers.google.com/web/fundamentals/tools/setup/setup_kit) ,,——安装node . js 隐藏,复制Code

> choco install nodejs.install

,,安装ruby——除非你没有它(否则你会失去你现有的gem) 隐藏,复制Code

> choco install ruby1.9

,,-安装sass: 隐藏,复制Code

> gem install sass

,,——安装杯 隐藏,复制Code

> npm install -g gulp

,,-对于android，让我们现在获得SDK(你可以继续与其余的as ,,,,这下来) 隐藏,复制Code

> choco install android-sdk

,,-这将Android SDK放在%LOCALAPPDATA%\Android\ Android - SDK下 ,,,,,,-在那里，你可以找到SDK管理器和AVD管理器 ,,,,,,-你需要添加工具文件夹到你的路径!不要使用setx ,,,,,,因为它做了错误的事情，如果你的路径变量是长于1024字符): ,,,,,,-你还需要平台工具(同样，不要使用SETX) ,,,,,,,,,,-所以你应该在你的道路上有以下几点: 隐藏,复制Code

%LOCALAPPDATA%\Android\android-sdk\tools

%LOCALAPPDATA%\Android\android-sdk\platform-tools

,,,,,,-当Android SDK在你的路径上，你应该能够运行: 隐藏,复制Code

> where android

,,,,,,得到返回的路径，而不是错误 ,,——安装科尔多瓦 隐藏,复制Code

> npm install -g cordova

, 该开始一个应用程序了! 第1部分:让我们用Web Starter Kit创建一个基本的应用程序外壳 1)在某个地方克隆web starter kit 隐藏,复制Code

> git clone <a href="https://github.com/google/web-starter-kit.git">https://github.com/google/web-starter-kit.git </a>C:\path\To\WebStarterKit

3)为你的项目创建一个副本 隐藏,复制Code

> mkdir C:\Path\To\Project<br />
> cd C:\path\To\WebStarterKit<br />
> git archive master --format zip > %TEMP%\wsk.zip

,,-解压缩它在某个临时位置创建的文件进入您的源目录 隐藏,复制Code

> cd C:\Path\To\Project<br />
> mkdir source<br />
> cd source<br />
> unzip %TEMP%\wsk.zip

4)为项目安装本地依赖项: 隐藏,复制Code

> cd C:\Path\To\Project\source<br />
> npm install

,,,,,,-注意，如果你感到奇怪，首先尝试: 隐藏,复制Code

> npm cache clean<br />
> npm update

5)创建cordova应用程序，在源文件夹的根目录中做: 隐藏,复制Code

> mkdir dist<br />
<pre>> cordova create dist com.yourapp.id YourAppName

6)修改gulpfile.js，在创建的cordova文件夹中使用www文件夹。您可以使用gulpfile.js at https://github.com/fluffynuts/whisk/blob/master/docs/gulpfile.js开始! ,,它会在任何地方使用文件夹“dist”。如果你使用dist文件夹 ,,以上，将所有对“dist”的引用改为“dist/www” ,,注意:特别重要的是要确保“清洁”任务是查看dist/www 由于Cordova和Web Starter Kit做事的方式(以及互动的方式)，我们需要 ,,做一些修改: ,,a)重命名app\scripts\main.js app\scripts\999_main.js ,,,,,,-将其添加到文件的末尾，就在最后一行的前面(隐藏 复制Code

})();

,,,,,,,,,,window.close菜单= closeMenu; ,,,,,,,,,,窗口。toggleMenu = toggleMenu; ,,,,,,,,,,为了节省时间，您可以从https://github.com/fluffynuts/whisk/blob/master/docs/app/scripts/999_main.js获得一个999>main.js ,,,,,,-将菜单交互导出到全局名称空间。我的壳 ,,,,,,,,,,998年_app.js使用。您可以从https://github.com/fluffynuts/whisk/blob/master/docs/app/scripts/998_app.js获得shell app.js，并使用它作为您的应用程序的起点。 ,,b)将cordova.js从https://github.com/fluffynuts/whisk/blob/master/docs/app/cordova.js复制到你的app文件夹中 ,,,,,-这是一个垫片，是我到目前为止使用的科尔多瓦的一部分 ,,,,,,,并确保在运行时加载真正的cordova.js ,,c)从libs中复制https://github.com/fluffynuts/whisk/tree/master/docs/app/lib (jquery特别是jquery)。拖动刷新，如果你想在你的应用程序中实现这个功能) ,,d)如果您想存储和检索用户prefs，请复制002_PrefsHelper.js (https://github.com/fluffynuts/whisk/blob/master/docs/app/scripts/002_PrefsHelper.js)和 ,,,,,做的事: ,,,,,,比;cordova插件添加me.apla.cordova.app-preferences ,,e)如果你想在用户的浏览器中打开链接，复制到001_WebHelper.js (https://github.com/fluffynuts/whisk/blob/master/docs/app/scripts/001_WebHelper.js) ,,,,,和做的事: ,,,,,比;cordova插件添加https://github.com/Initsogar/cordova-webintent ,,,,,(还有更多的内容，我们稍后会讲到) ,,f)复制998_app.js (https://github.com/fluffynuts/whisk/blob/master/docs/app/scripts/998_app.js)到脚本文件夹中。这是一个壳应用程序，让你去。 ,,g)修改index.html引用这些脚本 ,,,,,, ,,h)修改index.html以去除谷歌分析 ,,我)删除basic.html ,,j)复制.jshintrc以允许在javascript中对字符串使用双引号 8)用: ,,比;狼吞虎咽地吃 ,,-如果你得到一个错误关于一个无效的选项-条，修改你的 ,,,,在'images'任务中的gulpfile.js，用注释掉管道 ,,,,美元。imagemin，旧版本的optipng ,,,,不支持-strip选项，但imagemin希望它支持。 ,,,,你的图像任务可能看起来像: ,,,,,,/ /优化图片 ,,,,,,饮而尽。task('images'， function () { ,,,,,,返回gulp.src (app /图片/ * * / *”) ,,,,,,,,,,/ / .pipe (.cache美元($ .imagemin ({ ,,,,,,,,,,/ /,进步:没错, ,,,,,,,,,,/ /,交错:真 ,,,,,,,,,,/ /}))) ,,,,,,,,,,.pipe (gulp.dest (distFolder('图像'))) ,,,,,,,,,,.pipe(美元)。大小({标题:“图像”})); ,,,,,,}); 9)测试它是如何构建的: ,,比;杯服务 ,,您可以按ctrl-c停止此操作 目前，你有一个响应式web应用程序…我们可以更进一步! 第2部分:让我们把它变成一个android应用程序 1)你将需要一个模拟器和SDK库的Android: ,,比;android sdk ,,-选择一切从最新的SDK，你看到那里。避免sdk ,,,,带“W”字的——它们是Android Wear的。同时,避免预览 ,,,,现在;在撰写本文时，您可能需要4.4.2和 ,,,,所有相关的东西(19.1级) ,,比;android avd ,,-创建一个虚拟机使用sdk你下载与设备规格 ,,,,你喜欢的，例如: ,,,,,,AVD名称:4.4.2_x86 ,,,,,,设备:Nexus 7(2012)(7寸，800x1280) ,,,,,,目标:Android 4.4.2 - API级别19 ,,,,,,CPU/ABI: Intel Atom (x86) 长,,,,,,键盘:[x]硬件键盘现在 ,,,,,,皮肤:动态 ,,,,,,前置摄像头:没有 ,,,,,,相机:没有 ,,,,,,内存选项:RAM: 1024VM堆:32 ,,,,,,内部存储:666 MiB ,,,,,,SD卡:无混淆 ,,,,,,仿真选项:[x] Snapshot[]使用主机GPU ,,比;如果您使用HAXM (https://software.intel.com/en-us/android/articles/intel- hardware-accelerated-executionmanager)，仿真会快得多。 ,,,,,,-如果你有Hyper-V运行，但是，你需要禁用它(作为Hyper-V ,,,,,,,,,,和任何人玩得很好) ,,,,,,,,,,比;设置hypervisorlaunchtype off ,,,,,,,,,,-这里有更多信息: ,,,,,,,,,,http://www.hanselman.com/blog/SwitchEasilyBetweenVirtualBoxAndHyperVWithABCDEditBootEntryInWindows81.aspx ,,,,,, 2)安装java ,,比;java - version ,,,,,,是否应该输出版本信息，比如1.7.0_something ,,如果你得到“命令未找到”或类似“未识别为内部。 ,,或外部命令”，您需要实际安装java ,,比;乔科省安装javaruntime ,,- java是不够的，你需要jdk:/ ,,比;乔科省安装java.jdk 2)安装ant ,,比;乔科省安装ant ,,检查它是否在你的路径中: ,,比;在蚂蚁 3)让cordova app支持Android: ,,比;cd dist ,,比;cordova平台添加了android 4)建造时间: ,,比;科尔多瓦构建 ,,比;cordova仿真android——目标=4.4.2_x86 ,,-注意你第一次运行模拟器会花/非常/很长时间 ,,,,该开机了。以后会更好的(: ,,-你必须在模拟器中找到并运行你的应用程序 开发周期: 以上应该已经得到了一个简单的应用程序。然而，我们仍然需要调整 能让科多瓦好好表现的东西。 1)你需要在你的index.html中包含cordova.js。里面有个垫片，cordova.js ,,您获取此文本文件的文件夹。它模拟deviceready事件并带来 ,,在真正的科尔多瓦，当你在一个设备上。在以后的某个时刻，它可能是 ,,有更多科尔多瓦·希明的报道。 ,,我的webHelper脚本允许在OS本地浏览器中打开url ,,我的PrefsHelper.js帮助使用prefs插件在浏览器中开发 ,,,,,,通过抖出所需的函数 ,,注意我的cordova.js需要jquery，所以你也应该链接它。和 ,,,,,,如果你想使用我的pullToRefresh jquery插件，你需要它。最后一个 ,,,,,,脚本清单你将需要(开始)将是: ,,& lt;脚本type = " text / javascript " src = " cordova.js祝辞& lt; / script> ,,& lt;脚本type = " text / javascript " src =“lib / jquery.js祝辞& lt; / script> ,,& lt;脚本type = " text / javascript " src =“lib / jquery.pullToRefresh.js祝辞& lt; / script> ,,& lt;脚本type = " text / javascript " src = "脚本/ 001 _webhelper.js”祝辞& lt; / script> ,,& lt;脚本type = " text / javascript " src = "脚本/ 002 _prefshelper.js”祝辞& lt; / script> ,,& lt;脚本type = " text / javascript " src = "脚本/ 998 _app.js”祝辞& lt; / script> ,,& lt;脚本type = " text / javascript " src = "脚本/ 999 _main.js”祝辞& lt; / script> ,,,,,,,,,,,,,,, 注: 远程调试通过Chrome似乎需要adb守护进程运行，这 你可以得到: 比;亚洲开发银行设备 Cordova中的“menubutton”事件是不可靠的:https://issues.apache.org/jira/browse/CB-1574这通常是在使用硬件菜单按钮时触发的，如果你的设备支持的话(如Galaxy S1-S3)。 如果你要做跨域请求(通常，如果你用$。get加载任何东西， 美元。，你就会遇到一个问题: 你的应用程序将能够发出请求，因为它将是完全无用的不能。 然而，常规的web浏览器安全禁止这种行为，所以如果你打算 使用Chrome开发你的网站(与gulp服务)，你会想要这个扩展: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?hl=en 在外部窗口中打开web链接: 1)你想转换/创建使用窗口的链接。开放测试 2)你想要https://github.com/Initsogar/cordova-webintent来分享android上的意图 3)——不确定其他平台 设置应用程序图标: , (http://cordova.apache.org/docs/en/3.2.0/config_ref_images.md.html) 图像需要在dist/www/res/icons/android(对于android)和类似的其他平台。然而，dist/www被gulp清除了。所以让我们把它放在dist旁边(也就是app旁边):创建文件夹 + res /图标/ android , 在你的源文件夹中，把图标放进去，完成后让gulp把它复制进来 ,,-参见gulp目标'push'和'cordova-build-android'从上面的gulpfile.js链接 ,,-注意，在最初的测试中，我只是针对android，但添加Windows Phone 8支持和Windows8商店支持并不遥远——主要需要你调整下面的图片，以适应商店的要求。 另外: https://gist.github.com/LinusU/7515016 -也需要在config.xml中提到它 http://stackoverflow.com/questions/17820492/how-to-add-app-icon-within-phonegap-projects ,,- cordova 3.5.0应该尊重config.xml元素的“图标” ,,,,,平台,所有目标; ,,,,,,-然而，当然，事情没那么简单。在Android上，默认的图标 ,,,,,,,,,,设置好了，但是所有的arb分辨率都没有设置好。所以你想要这样的台词: ,,& lt;图标src = " android / icon-36-ldpi www / res /图标/。png”/比; ,,& lt;图标src = " android / icon-36-ldpi www / res /图标/。png" platform="android"密度="ldpi" /> ,,& lt;图标src = " android / icon-48-mdpi www / res /图标/。png" platform="android"密度="mdpi" /> ,,& lt;图标src = " android / www / res /图标/图标- 72 hdpi。png" platform="android"密度="hdpi" /> ,,& lt;图标src = " android / www / res /图标/图标- 96 xhdpi。png" platform="android"密度="xhdpi" /> , 的兴趣点 一旦项目启动并运行，开发就会非常迅速。我建议在浏览器中工作，直到您对一个特性集感到满意，然后部署到设备进行最终测试。我有时会发现一些在浏览器中运行良好，但在实际设备上就不太好了，所以这个“最后一英里”测试是相当重要的。在webstarter Kit 0.5.0中，所有的CSS工作都是通过Sass(。scss文件)，这是优秀的!我衷心建议学习更多关于sass的知识，我目前正在研究将Karma引入构建和运行系统的步骤，这样您就可以为Javascript编写测试，并在构建或更改文件时运行。我已经非常接近有一个灵活的指示和更新的gulpfile.js——请继续关注! 历史 2014-09-22:最初的文章。 , 本文转载于：http://www.diyabc.com/frontweb/news30245.html