近期要学习实践的新技术

接下来的一段时间里主动学习,更新一下知识。

众所周知,程序员是一个必须随时更新知识技能的职业。这其中,前端程序员尤甚。虽然我自称全栈,多半也要依赖前端技术作为小无相功驱使内力,方能打出少林寺七十二绝技写出其它平台的产品。所以,主动学习,更新知识技能是我必须坚持的。

同时,在前端这个充满变革的领域,我不能把各种新奇的东西都放到实际生产中去。所以,不定期的集中学习就不可避免。

那么,近期要学习实践的新技术有哪些呢?

  1. Bootstrap 4
  2. gulp
  3. Angular 2 直接从2开始吧,计划做个Todo
  4. React + React Native 要不做鸡血君?
  5. Polymer
  6. Material Design Lite
  7. Phonegap 5 自然是迁移游戏泡泡
  8. Eletron 结合别的技术做个写博客的工具。
  9. socket.io
  10. browserify

希望能在年底前搞定。

Phonegap 2.6在Android上的Icon设置

Phonegap 2.6设置应用的桌面icon,在AndroidManifest > Application > Application Nodes > Activity。

这个问题Google了半天也没找到答案,难道只有我碰到了?

我的测试平台:Windows 8 + Eclipse 4.2 + ADT 21.1 + 小米 2 + Phonegap 2.6。

开发测试一切正常,只是编译输出的应用装到手机上只能用默认图标,怎么都改不过来。我把所有res/drawable-xxxx里面的icon都换了也不行。然后修改AndroidManifest > Application > Application Attributes里的icon和logo设置,也不行。怎么试都不行,Google也找不到。安装时提示的图标正常,查看运行过/运行中的图标也正常,就那个桌面上的图标不对。

刚才吃过饭,来回点,突然发现在Application Nodes里有个Activity,还可以设置icon和logo,想着反正也不亏,就也给填上了,居然OK了。

哎,记一下,省得以后忘掉。

Phonegap 2.5的localStorage有Bug

phonegap 2.5后引入一个bug,无法在android 4.1上持久存储localStorage。

这两天重拾Phonegap发现一个Bug,用localStorage保存的东西,更新版本或者关掉重进就没了。我的环境是Phonegap 2.6 + Miui V5(Android 4.1)。

我逐个尝试了使用window.localStorage替代localStorage、将调用localStorage的时机改到deviceready后等做法,均无效。Google、StackOverflow,亦没有结果。最后想起来,Phonegap不是开源的嘛,有issue list啊,一看,果然,从2.5开始Android版的localStorage就无法正常持久存储了。这个Bug要到2.7才会修复。

以前还是太低端了,以后还是多逛逛Wiki和issue才是。

解决 iOS webkit 使用CSS动画时闪烁的问题

解决webkit下的闪烁问题

这个,咱们必须承认版本管理不是万能的,尤其对于像我这样习惯不好的人来说,更是如此。比如,上次不知道改了什么东西,导致肉大师制作的杂志在 iOS 里突然就变卡了,而且不仅卡,还伴随黑块、切换图片的最后会闪一下。

开始我一直以为是性能问题,调啊调啊调啊,就是不见好。于是 Google “ios phonegap 闪烁”,然后发现一篇文章,内容是解决 iOS 下 Safari 渲染 Transition 时页面闪动的问题。说只要加一句 -webkit-backface-visibility: hidden; 就行,这样可以避免元素转换时显示元素背面。虽然听起来莫名其妙,不过我觉得有戏,但是文章里没有提应该加在哪儿,所以我想了想,在样式表里加了一句:

#container {
  -webkit-backface-visibility: hidden;
}

因为我用到 iScroll,而负责动画的CSS是加在 #container 上,所以我就理所当然的把这段代码加在这里。测试,没有效果。

于是我一发狠,把这段样式加在所有元素上,居然问题就解决了。

#viewport * {
  -webkit-backface-visibility: hidden;
}

Mobile Web开发笔记

这里记录使用Phonegap开发移动应用期间发现的一些注意事项。

这里记录使用Phonegap开发移动应用期间发现。

性能

使用jQuery托管事件对阻止冒泡的影响

表现

解决 iOS webkit 使用CSS动画时闪烁的问题

CSS 兼容性

CSS 属性 iOS Android IE 其它
border-radius 3.x -webkit- Firefox 3.6- -moz-
Safari 4- -webkit-
box-shadow 2.3 -webkit- Safari 5- -webkit-

网摘

Developing Better PhoneGap Apps: Float Mobile Learning

重点包括

  1. 使用tap取代click(这点我还需要进一步测试,我发现zepto+phonegap没法捕获tap事件,不知道是我不是敲键盘的姿势不对)
  2. 使用css动画取代js动画

随记

  1. “click”和“tap“不是一回事儿,“click”会延迟300~400ms才处理,时间上会接近taphold之类的事件,“tap”更快
  2. 给元素加上:active伪类,可以给用户更快的反馈
  3. 调试不太容易,debug.phonegap.com似乎已经关了,得想办法把自己的weinre服务搭起来。暂时可以在js里写console.log(),接受一个参数,会在log cat输出。

CMDN Club 16期归来

下午去参加了“CMDN Club 16期——跨平台开发框架PhoneGap入门与实践”,有一些收获,整理记录下来。

  1. 会上着重讲了Android和iOS下使用plugin扩展PhoneGap功能的方法。
    1. Android上使用prompt实现。js通过prompt发送请求,WebView侦听到prompt后,解析并进行处理。处理完之后,将返回的数据放在内建的XHR服务器上;而应用在发出请求后,就在不断轮询,得到数据后返回给预先设定的callback。
    2. 比较特殊的地方在于,Android支持同步和异步两种形式,一般推荐使用异步,这样进程就不会被锁死,用户体验得以保障。
    3. iOS版则是建立一个iframe,把请求格式化后放进iframe的src。WebView接触到特殊标记的url就会进行处理,得到返回值之后,将js交给WebView处理。因为使用了iframe,所以操作都是异步无阻塞的。
  2. PhoneGap默认提供了很多本地api的封装,不过想要达到native的标准,自己补充插件是必不可少的。
  3. PhoneGap已经捐赠给Apache基金会,以后叫Cordova,代码组织会更加规范,而且会向AMD方向发展。看来研究下Require.js也很有必要。
  4. Weinre是个调试利器,非常适合调试移动设备,不仅是PhoneGap,日常开发也会很有用。
  5. Adobe Shadow是在Weine基础上封装的一个工具,目标是同时调试多台设备,不过目前还处在实验室阶段,将来会是非常好用的产品。持续关注吧。
  6. jQuery Mobile性能不是一般差,看来很有必要研究下Sencha Touch。
  7. www.phonegap.cn是个非官方组织,今天第二位嘉宾就是它的站长,看起来很靠谱的一个人。
  8. 对于我之前提到的防盗链问题,他也没有好建议,只提出一些想法:
    1. 使用插件抓取图片,转换为base64字符串,再显示出来。没记错的话这样会有兼容性问题,而且html也会很难看。
    2. 修改PhoneGap代理所有http请求。这个难度比较大。
  9. 现在没有命令行工具,他们正在开发。希望肉大师第一版完工的时候能用上。
  10. 会上有不少非人类思维的提问者,我感觉嘉宾都很迷茫。

目前使用PhoneGap遇到的问题

使用PhoneGap至今,遇到了不少问题;将来想做的功能也有一些不太知道该怎么做的,都记在这里,作为将来要攻克的难关,也作为将来要分享的文章目录。

使用PhoneGap至今,遇到了不少问题;将来想做的功能也有一些不太知道该怎么做的,都记在这里,作为将来要攻克的难关,也作为将来要分享的文章目录。

  1. PhoneGap没有提供修改Refer的API,可能需要开发插件来实现,不知道Titanium有没有类似的功能
  2. PhoneGap没有提供后台运行service的API,这给推送信息带来了一些问题,不过似乎StackOverFlow上有人提供了解决方案,准备试试
  3. 自动升级。这个利用现有api应该可以完成。
  4. 缓存内容到本地。

总结下蜂鸟镜头库App开发

前些日子利用业余时间研究PhoneGap+jQuery Mobile开发,找这个项目练手。写到一半又拿Backbone重构了下。如今还有很多问题,先停下来总结一下。

前些日子利用业余时间研究PhoneGap+jQuery Mobile开发,找这个项目练手。写到一半又拿Backbone重构了下。如今还有很多问题,先停下来总结一下。

  1. 效率问题。屏幕越大效率越差,在Kindle Fire的表现也不如想象中理想。
  2. 启动速度慢。不像跑在浏览器那样,瞬间就打开了(因为会忽视掉打开浏览器和渲染的时间),所以应该需要一张图片作为启动图片——这个图片似乎不能自动缩放——在Kindle Fire里会导致程序崩溃。
  3. jQuery Mobile还有一些bug,目前还不确定原因和解决方案。
    1. 我有两个ul要做成listview,第一个什么都不写,填充内容后.listview()一下就可以;第二个则必须在html里就写好data-role=”listview”才行。
    2. 切换页面的时候只能从右往左,reverse=true也不行
  4. jQuery Mobile没有弹出组件,dialog的实现是跳转页面,不是很爽。
  5. Backbone是个好东西,尤其是开发过Flash,用起来感觉更顺手了。
  6. Backbone 0.9.1复写Collection的parse方法无效,不知道是为什么
    问题已解决:《重写Backbone.js的加载动作》
  7. 当需要事件从一处发生,而在另一处响应的时候,Backbone并没有提供很好的办法,用惯了robotlegs之类的框架在这里略有不爽。我想拿Model来作为Mediator应该不错。

再练手的话,准备用去哪儿的api,感觉挺开放的。

使用PhoneGap+jQuery Moblie开发蜂鸟镜头库手机App

拿以前做蜂鸟镜头库的两个接口尝试开发蜂鸟镜头库app,基本完工。这里总结下踩过的坑。

蜂鸟镜头库app效果图
蜂鸟镜头库app

自从春节期间在家尝试了PhoneGap之后,一直想做点实际的东西,好总结点经验,以备不时之需。可惜后台苦手,数据源是个问题。后来想起来以前做蜂鸟镜头库的时候有两个接口,可以取得完整的数据,于是便动起手来,开始做这个app。

开发本身并不复杂,大概花了一天时间搞出雏形,加上翻页基本就能发布了。不过还是遇到不少问题,今天简单总结下踩过的坑,以免以后再踩。
继续阅读“使用PhoneGap+jQuery Moblie开发蜂鸟镜头库手机App”

PhoneGap开发环境配置

趁着春节假期,学点新东西,前面也列了不少项目待做。除了一些是答应了朋友或者一直在搞的,就想试试把老项目迁移到移动平台上。Flash方面自然是Flash Builder了,JS方面考虑了一些时间,决定使用PhoneGap——因为有Adobe支持,应该比较有优势。

趁着春节假期,学点新东西,前面也列了不少项目待做。除了一些是答应了朋友或者一直在搞的,就想试试把老项目迁移到移动平台上。Flash方面自然是Flash Builder了,JS方面考虑了一些时间,决定使用PhoneGap——因为有Adobe支持,应该比较有优势。

继续阅读“PhoneGap开发环境配置”