前端在线资源
本文地址：
//zxx: 如果您赶时间，直接Part 4
一、我得了开头不啰嗦就写不下去的病
哈，貌似最近又看到觉得我行文啰嗦的言论，我只能抱歉说一句：呀买碟，额，抱歉，说顺口了，是搞咩纳塞。最近“不幸”成了香饽饽，甚是忙碌，一不小心就忘记吃药了（下图潜台词——你懂的）。
我上学那会儿，老师对我文章赞美之词最多出现的就是——“简洁”。实际上，这只是我重要特质的体现——“懒”，哎呀，好怕写文章啊，能省一个字就是一个字吧，于是，成为了老师眼中的简洁派代表人物。
因此，你觉得我会自讨没趣故意把文章写得那么长，写那么细，反复梳理逻辑，斟酌措辞？
学技术不是看新闻。人那，总难免会有一颗浮躁的心：我要努力学技术，我希望我可以速成，成为大牛，迎娶白富美，出任CTO，从此……
我也想这样啊，黄蓉阿姨附体，一目十行&&过目不忘，参加《最强大脑》，可惜，性别不合，附体不了。既然有学习的心，就应该保持平静的心态（注视下面的蓝色冰山30秒，有助于专注于平静）；而不要当做浏览人民网一样，扫个标题就以为技能GET，而后走人。你我皆凡辈，若真有心在技术上有所造诣，就要拿出适合做技术的人的品性。
不过，我倒是承认我行文却有啰嗦之嫌，经常会扯七扯八，就像本文的这一节。实在抱歉，我得了开头不啰嗦就写不下去的病。
我觉得写技术文章，可以分为2类：
写给自己看的；
写给别人看的；
我的百度空间文章都是写给自己看的。哥，我对你讲，那行文超简洁的，平均5分钟一篇，几十个字描述下，代码一拷，关键字也不加直接publish了。反正只要我自己看懂就可以了~~你喜欢吗？
如何产出观众喜爱的电影的回答与如何产出观众喜欢的文章一样。《泰囧》的票房奇迹让不少影评人有了反思，那种以自我为中心，持物自傲（我觉得好，观众不买账是他们不懂欣赏）的心态显然是有问题的，比如冯小刚认认真真拍的《1942》，观众实际是不认可的。反而《泰囧》这样把心放在观众上，踏踏实实，真真切切拍为广大观众拍一部好的电影，观众自然会有积极的反馈的。
同样，写技术文章，一定要站在初学者的角度，即，如果我是初学者，我说这样的话，他们会懂吗？我是不是应该画个图示意下（注意，不是什么鸟逻辑线路图）？是不是应该这里反复强调了？是不是这里相关的一些细节要一个一个讲清楚。如果你站在你一个有经验的人的角度去写，显然，表达啊，措辞啊，很多东西都会认为理所当然，实际上，很多急需辅导启迪的初学者茫然不知所以然。
因此，我很多文章，会显得比较啰嗦，有时会有相当多的形容词来增加感性认识，这对初学者的快速掌握是很有帮助的。同时，我一直认为，想法，认知要比技术来得重要的多。所以，我总会在文章的开头或结尾写上一些看似与主题无关的“啰嗦”的话语。你可能觉得啰嗦，但是，有些人会触发一些新的感悟，这对于成长的帮助更深远。
对于技术博客，我觉得2个比较重要的作用：
解决问题，增加经验，例如本文；
开拓眼界，信息积累，例如前文；
本文还好，多半搜索引擎进来，为了解决问题，显然要细读，技术Tips多点反而会有帮助。但是，那种信息积累那种，惰性使然，很多人会希望是概要式的：我希望分分钟读下精髓，然后取走所需，拍屁股走人。我闭上眼，仔细想了一下，然后发现……我睡着了。于是，再次闭眼脑补了下，立马浮现出骷髅骨架，以及一刀插在胸膛上的场景——这种没有血肉，以及就让我死个痛快的汉子感觉，很符合闷骚、逻辑、科学的工程师形象，但这实在不是我的调调，我还是喜欢卖萌 。
二、PhoneGap/Cordova何物？
3年前的时候，我就把玩过PhoneGap, 提过（下图为截图的截图）。
没想到，之前说的“有些时日”近1000日日夜夜。擦，我怎么说出这么邪恶的话，“1000日，日夜夜” .
PhoneGap可以把HTML/CSS/JS变身成移动应用，可以适用于iOS, Android以及windows Phone. 看上去很牛逼的样子。
那PhoneGap和Cordova是什么关系呢？
参见知乎上冀鑫的回答：
冀鑫：cordova是一个移动应用开发框架，你基于这个东西可以用网页代码作出APP。Phonegap Build是一个在线打包工具，你把使用cordova写好的项目给Phonegap Build，Phonegap Build就会在线打包成App。目前大家所说的Phonegap，其实指的都是cordova,而那个真正被Adobe收购了的Phonegap（），现在是Phonegap Build，（）和cordova（）的合体。
对于有经验的人，上面的回答一看就知道什么意思。但是站在初学者角度，或其他从业者的角度，上面的回答要花一番脑力消化。此时，我就会变成啰嗦大妈，以更通俗的形式解释一遍：
从前有个横空出世的美女，名叫Phonegap，后来被她老爸卖给了宜春院的老板Adobe. Adobe为了更大的受益，把Phonegap分成了才艺买卖(Phonegap Build)和肉体买卖(Cordova). 但是，后来，达官公子哥嘴里口口声声叫的Phonegap实际上都是Cordova – 想的都是身体。
三、吉时已到，准备起驾
技术发展日新月异，江潮涌动推波助澜。3年前时候，PhoneGap刚出来不久，虽想法很赞，但如刚入社会的小青年，尚未成熟，会有多番碰壁。如今，跟了个有钱有权的干爹，越发自信与成熟了。加上浏览器的发展，iOS等移动设备的发展，完全就是万事俱备什么都不欠的节奏。
最近我对PhoneGap的尝试发现，效果真的很赞，几乎和原生一样的流程，而且几乎完全兼容HTML页面呈现，即凡是浏览器中呈现的UI，Build之后手机上看到是就是什么样子，应该说效果更好。早些年吐槽的性能问题，目前看来，似乎改善了很多。至少我在iPhone上体验，很复杂的动画效果也很流畅。
所以，我觉得这厮还是挺有潜力的。而且又能云端打包发布，那还得了。一个人顶一个团队啦，移动设备全包。
对于PhoneGap的初体验，安装啊，运行个Hello World什么的，网上的文章多如雾霾。但是，我发现，一些实际的问题解决，却少之又少。我不禁疑惑，难道大家都是尝个鲜，单纯感受一下，然后看新闻去了？我觉得应该不是，而是藏着掖着，或者忙得没时间做经验分享。好比农村做养殖业，你一个人养得好赚了钱，你要想赚更多的钱，不是不让别人养，而是带动别人一起养殖，形成产业与规模！好比渔具一条街，装饰城，汽车城，苏宁/永乐/国美一起在一起开店，同属性产品的群聚会让大家都赚更多的钱。技术也是如此，你积极分享，带动其他人一起学习，形成了规模与风潮，你才能获得更大的进步与机遇。
如果想使用PhoneGap进行iOS开发，首先你得有个mac, 然后就都不是问题了，装装nodejs, 装装PhoneGap, 可参考官网有详细的安装说明，还有很多的Chinese文章。但是，有些东西就没有了，比如说：控制iOS7状态栏的显示、隐藏、颜色。我大肆搜索了一番，发现，即使是老美那边，也鲜有专门的说明。我觉得这个比较值得分享，会对遇到同样问题的人有很好的帮助。
//zxx: cordova你可以念成“科尔多瓦”——西班牙南部是一个拥有无数文化遗产和古迹的城市——方便记忆。
四、PhoneGap/Cordova控制iO7S状态栏的显示、隐藏与颜色
Cordova 3.*+之后的插件发布于维护更简单了，无需去折腾config.xml文件之类的。
iOS 7状态栏的控制我是这么实现的：
访问, 您可以在其中搜索cordova插件，例如我搜下statusbar:
会发现有两个插件。其中下面的名字貌似更官方一点，我们就选择这个作为我们需要的插件。
插件的安装很简单。我们需要的只是插件的ID, 也就是org.apache.cordova.statusbar. 然后打开终端，然后到cd到自己的项目根目录，输入或粘贴如下代码：
cordova plugin add org.apache.cordova.statusbar
回车，稍等片刻会有类似下面的提示：
说明安装成功。虽说安装是成功了，但到底该如何使用呢？
一般这种插件都会在GitHub上开源，Google或Github上搜索org.apache.cordova.statusbar，很快我们就会找到这个插件的Github地址：.
点击进入，众API们引入眼帘，好像黑夜看到了曙光，屌丝看到了女神……
方法如下：
StatusBar.styleDefault 状态栏默认样式，也就是电池信号黑色；
StatusBar.styleLightContent 状态栏内容浅色，貌似就是白色，适合深色背景；
StatusBar.styleBlackTranslucent 状态栏黑色半透明，我测了下，跟上面一样的效果，电池时间都是白色的，适合深色背景；
StatusBar.styleBlackOpaque 状态栏黑色不透明。我测了下，还是白色的，跟上面一样，适合深色背景；
StatusBar.hide 状态栏隐藏；
StatusBar.show 状态栏显示；
只要你使用了Cordova的插件（相机啊，地址位置等），你就得调用自动生成的cordova.js.
&script src="cordova.js">&/script>
然后，再你自己的JS中，使用类似StatusBar.hide()就可以隐藏状态栏啦！或者使用StatusBar.styleLightContent()让状态栏从黑人变成白人，如下效果：
其他非官方插件的使用也是类似上面的步骤。有什么其他问题，也欢迎交流讨论。
五、要不，再加个结语
前面提到了浏览器的发展。也就是最近几个版本的Chrome了，对于移动开发做了很多的处理，使其非常接近真实的移动操作——主要是Touch事件以及尺寸限定。
使得我们移动开发越发便捷，星星之火，可以燎原。如果人人都对HTML发展贡献一份力，说不定HTML会渗透到各种设备的各个角落，那才是前端们的时代，不过只是要大家一起创建的，闭门造车只是自我感觉良好，缺少了蓬勃的大环境，长远来看，不利的还是自己。
恩，又会有有志之士嫌我啰嗦了~~ 我就喜欢把技术文章当散文写，So what?
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：
（本篇完）
相关文章 (0.714) (0.286) (0.286) (0.286) (0.286)
标签： , , ,
赞助商广告()：
如果你月薪不足20K，不妨
这里有最全的web前端开发视频
如果你有1~3年前端开发经验，不妨
听说、你想学JS？不妨
热门总排行[html5] 基于第一个PhoneGap(cordova)的应用详解 | IT知识库
-& 正文阅读
[html5]基于第一个PhoneGap(cordova)的应用详解
基于第一个PhoneGap(cordova)的应用详解
PhoneGap是一套能让你使用HTML5轻松调用本地API接口和发布应用到商店的应用开发平台。官方说有低成本，低开发周期，轻量化等优点，这些咱暂时也没法证明，略过不表。但是有一条跨平台，却是很明显的优势。因为它采用HTML5+JavaScript的模式来开发应用PhoneGap是一套能让你使用HTML5轻松调用本地API接口和发布应用到商店的应用开发平台。官方说有低成本，低开发周期，轻量化等优点，这些咱暂时也没法证明，略过不表。但是有一条跨平台，却是很明显的优势。因为它采用HTML5+JavaScript的模式来开发应用。PhoneGap用JavaScript统一封装了几大平台的本地api（Andriod，IOS，WP8/7，WINRT）等等。。这样的话从一个平台移植到另外一个平台只需要把HTML代码跟JS原封不动的拿过去，打包一下就可以了。PhoneGap后来被Adobe收购，然后又贡献给了开源社区，现在由Apache管理，改名cordova。为了给昨天的html5画图板移植到移动设备上，我决定采用phoneGap平台，这样只要编写一边就可以多出运行了。今天先在Andriod下架设phoneGap环境。1.下载phoneGap/download/#autodownload解压出来，找到lib/android目录。2.在eclipse下新建Andriod项目，这个跟普通项目一样。3.在assets目录下新建文件夹&www&把lib/android目录下的cordova-2.6.0.js复制到这个目录下。把cordova-2.6.0.jar复制到libs目录下。
4.在www目录下新建一个html文件index.html。我们的界面就要在这里建立了。
index的代码如下：复制代码代码如下:&!doctype html&&html&&head&&meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /&&title&HTML5Paint&/title&&script type="text/javascript" src="cordova-2.6.0.js" charset="utf-8"&&/script&&script type="text/javascript"&alert("HELLO CORDOVA");&/script&&/p&
&p&&/head&&body&&/p&
&p&&h1&HTML5Paint&/h1&&/body&&/html&5.把lib/android目录下的xml文件夹整个复制到res面目下
6.修改AndroidManifest.xml添加用户权限在&manifest &标签的内的最前部添加如下代码复制代码代码如下:&supports-screensandroid:largeScreens="true"android:normalScreens="true"android:smallScreens="true"android:xlargeScreens="true"android:resizeable="true"android:anyDensity="true"/&&/p&
&uses-permission android:name="android.permission.CAMERA" /&&uses-permission android:name="android.permission.VIBRATE" /&&uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /&&uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /&&uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /&&uses-permission android:name="android.permission.INTERNET" /&&uses-permission android:name="android.permission.RECEIVE_SMS" /&&uses-permission android:name="android.permission.RECORD_AUDIO" /&&uses-permission android:name="android.permission.RECORD_VIDEO"/&&uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /&&uses-permission android:name="android.permission.READ_CONTACTS" /&&uses-permission android:name="android.permission.WRITE_CONTACTS" /&&uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /&&uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /&&uses-permission android:name="android.permission.GET_ACCOUNTS" /&&uses-permission android:name="android.permission.BROADCAST_STICKY" /&7.修改MainAcivity.java复制代码代码如下:public class MainActivity extends DroidGap {&/p&
@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/index.html");}&/p&
&p&}8.build一下会有错误，这是因为前面的cordova-2.6.0.jar没有添加到buildpath里面去。添加buildpath。
继续build就过了。最后run一下：
这样一个phonegap的Andriod程序就搞定了。明天把昨天的那个HTML5画板移植过来。
加: 17:14:16&
更: 17:15:40&
&&网站联系: qq: email:&&>&&>&&>&&>&phonegap5.4.1(cordova)拍照并且上传功能的一个Android应用demo
phonegap5.4.1(cordova)拍照并且上传功能的一个Android应用demo
上传大小：8.09MB
phonegap5.4.1(cordova)拍照并且上传功能的一个Android应用demo，同时附带了Java后台接收文件的代码
综合评分：0（0位用户评分）
所需积分：1
下载次数：100
审核通过送C币
创建者：otldan
创建者：huang3513
创建者：xiaoyaoyou1212
课程推荐相关知识库
上传者其他资源上传者专辑
移动开发热门标签
VIP会员动态
android服务器底层网络模块的设计方法
所需积分：0
剩余积分：720
您当前C币：0
可兑换下载积分：0
兑换下载分：
兑换失败，您当前C币不够，请先充值C币
消耗C币：0
你当前的下载分为234。
phonegap5.4.1(cordova)拍照并且上传功能的一个Android应用demo
会员到期时间：
剩余下载次数：
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
zheng_luck
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：}