V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qhm123
V2EX  ›  程序员

使用Phonegap,HTML5做了一个手机微博应用,大家看看

  •  
  •   qhm123 · 2012-08-02 18:54:39 +08:00 · 10940 次点击
    这是一个创建于 4498 天前的主题,其中的信息可能已经有所发展或是发生改变。
    采用Phonegap,HTML5,Backbone,JqueryMobile和RequireJS等技术开发,由新浪移动云提供支持的新浪微博跨平台手机应用。

    其实我是前端新手,磕磕碰碰,断断续续做了个微博应用,应用和代码在下面那个链接下面。大家多提宝贵意见啊。

    http://qhm123.github.com/tinybo/

    34 条回复    1970-01-01 08:00:00 +08:00
    forest520
        1
    forest520  
       2012-08-02 19:09:03 +08:00
    名字叫条码扫描器,囧
    第一次体验phonegap,说实话,延迟太厉害,还有闪退,断了我用它的念头了
    qhm123
        2
    qhm123  
    OP
       2012-08-02 20:15:43 +08:00
    @forest520 不会吧,应该叫“看会微博”,这个有很重的延迟吗,因为我机器环境有线,暂时只测过Android4.1和Kinle Fire,还有iPad 5.x,iPhone6.x上的效果。

    其实phonegap做些简单的应用还可以的
    qhm123
        3
    qhm123  
    OP
       2012-08-02 20:22:33 +08:00
    做着个微博的应用纯属体验技术了。
    用PhoneGap来做跨平台,暂时只有android和ios平台,并且ios只有ipa的包。
    然后用jQuery Mobile做的UI,没有用jQuery的navigation机制。
    然后使用Backbone做前端的MVC,做解耦。
    再使用RequireJS模块化代码,也是解耦。
    然后使用r.js可以把RequireJS的模块最后build成一个js文件,减少了http请求。
    用到了一些HTML5和CSS3的属性,但是各个平台支持情况不是很好,用的其实也不多。不过localstorage还是很有用的,做了微博状态列表的本地缓存。
    用了新浪移动云提供的微博插件还有打包平台打得包。
    benzhe
        4
    benzhe  
       2012-08-02 22:49:59 +08:00
    apk 的二维码错了,下载下来的叫 条码扫描器
    wegottago2
        5
    wegottago2  
       2012-08-02 23:02:41 +08:00
    底部的图标!!!
    qhm123
        6
    qhm123  
    OP
       2012-08-02 23:07:20 +08:00
    @benzhe 不会吧?我怎么扫描下载是“看会微博-v1.9-1.apk”呢?

    @wegottago2 “底部的图标”??什么意思?
    benzhe
        7
    benzhe  
       2012-08-02 23:11:16 +08:00
    @qhm123 很奇怪,你的文件名是“看会微博”,但真机上安装时的名字是“条码扫描器”,而在虚拟机安装时的名字又是“看会微博”,另外没敢在真机上打开,虚拟机上安装失败
    qq286735628
        8
    qq286735628  
       2012-08-02 23:15:00 +08:00   ❤️ 1
    Backbone,RequireJS
    最近正打算研究一下JS中的MVC、分层、流程控制这方面的概念,回头可以去学习一下了
    qhm123
        9
    qhm123  
    OP
       2012-08-02 23:37:05 +08:00
    @benzhe 这么神奇。。。我从没出现过这种情况。你用的条码扫描工具是什么?你是点击链接下载的吗?你真机是什么型号什么系统的手机?
    archeryan
        10
    archeryan  
       2012-08-02 23:40:32 +08:00
    左下角的图标……囧了……萌了
    qhm123
        11
    qhm123  
    OP
       2012-08-03 09:13:26 +08:00
    @archeryan 你说萌漫画的头像吧 呵呵
    hoogle
        12
    hoogle  
       2012-08-03 09:59:27 +08:00
    除非以后硬件发展很快很快。。 性能有很大剩余。。 不如web app的表现。不容乐观。。。 虽说是趋势。。 但够人力的话,, native app还是主流啊。。
    qhm123
        13
    qhm123  
    OP
       2012-08-03 20:08:41 +08:00
    这个其实通过网页也可以看,更像个WebApp,网址是 http://tinybo.sinaapp.com/
    MASAILA
        14
    MASAILA  
       2012-08-03 21:33:48 +08:00
    试了下,我一直觉得WebApp相比Native App差距还是很大的,主要是应用的流畅性,
    WebApp使用起来很生硬,有可能是我没用过牛逼的吧,不过普遍都是这样,
    WebApp和Native App结合才是比较好的,我记得之前的淘宝Android客户端就有一部分是WebApp
    qhm123
        15
    qhm123  
    OP
       2012-08-03 21:49:53 +08:00
    @MASAILA 嗯,虽说WebApp可以跨平台,但是还是依赖于各个平台的表现,现在完全使用WebApp,确实还不是特别成熟。。。
    MASAILA
        16
    MASAILA  
       2012-08-03 21:58:22 +08:00
    @qhm123 之前体验过jquery mobile之类的那些的demo,在Android上的流畅程度都不及ios,不知道是优化问题还是Android的html5性能低,
    qhm123
        17
    qhm123  
    OP
       2012-08-03 22:10:01 +08:00
    @MASAILA 。。。Android上比IOS低很多的,Android上CSS3性能不行,jqm用了很多阴影,渐变啥的在Android上跑很慢。
    WarWithinMe
        18
    WarWithinMe  
       2012-08-03 22:22:38 +08:00
    PhoneGap+JqueryMobile == 很差的效果。
    PhoneGap用过真心慢。。。trigger.io貌似好点。。。至于国内的AppCan,从视频来看貌似是性能最好的一个。至于Jquery。。不如拿Zepto来代替。虽然JqueryMobile有很多东西,但是不是什么都能用得上吧。。
    qhm123
        19
    qhm123  
    OP
       2012-08-03 22:50:14 +08:00
    @WarWithinMe PhoneGap应该和快慢没什么关系吧,它只是做了一些设备接口而已。AppCan之类的性能其实都差不多的吧。
    最近看到一个表说是Zepto会比Jquery快那么一点。
    WarWithinMe
        20
    WarWithinMe  
       2012-08-03 22:52:41 +08:00
    Zepto明显要小很多。。这很直观。。另外根据trigger.io上面的说法,phonegap慢是有原因的。trigger.io说它自己在android上能比phonegap快N倍。。
    qhm123
        21
    qhm123  
    OP
       2012-08-03 23:10:14 +08:00
    @WarWithinMe trigger.io那个说比phonegap快是说在调用设备相关接口方面,而其实那些都是在实际应用场景调用较少的东西,整个应用的快慢还在于对html,js和css的处理上。
    phonegap在处理js和java部分的时候采用了个服务器模型做js回调,可能性能少会有损失。
    yanghaoling
        22
    yanghaoling  
       2012-08-03 23:47:30 +08:00   ❤️ 1
    mark,明早起来体验,
    敢问lz,从零基础到现在花了多长时间?鄙人也在尝试学前端。
    qhm123
        23
    qhm123  
    OP
       2012-08-04 09:06:45 +08:00   ❤️ 1
    @yanghaoling 这个我断断续续用闲着的时候做了两个多月吧,中间几经波折,重构了几次。最早我用了iscroll做滚动、下拉刷新、加载更多这些,后来发现在Android上性能是在不行,给去掉了。还有一开始我没有用requirejs实现模块化,后来又加上去,整个代码折腾了一遍。还有多次调整jqm的性能问题。还在页面模型,导航栈模型上纠结了很久,最后也没写出好的实现。。。
    最近也做了一些相关的东西,phonegap做了一些。从接触phonegap到现在应该有近半年了吧。。。
    twm
        24
    twm  
       2012-08-05 13:58:22 +08:00
    phonegap界面就是丑。。。。
    qhm123
        25
    qhm123  
    OP
       2012-08-05 14:36:37 +08:00
    @twm 界面这个和phonegap没有关系的,使用了jquerymobile丑,且我自己也不是很会调样式。。。
    sd4399340
        26
    sd4399340  
       2012-08-05 15:31:07 +08:00
    前端时间也想做个twitter的,开了个头没坚持下来,LZ有用过sencha吗?我估计慢可能都慢在jqmobile上吧~
    qhm123
        27
    qhm123  
    OP
       2012-08-05 19:33:24 +08:00
    @sd4399340 没用过sencha,只是大概看过文档。jqm是挺慢的。。。
    qhm123
        28
    qhm123  
    OP
       2012-08-06 19:52:32 +08:00   ❤️ 1
    ..."条码扫描器"的问题修正了。。。是打包的时候出了问题。。。
    qhm123
        29
    qhm123  
    OP
       2012-08-06 23:04:35 +08:00
    应用上线微博应用广场了 ^ ^ http://app.weibo.com/detail/4A02Ba
    qhm123
        30
    qhm123  
    OP
       2012-08-20 20:59:52 +08:00
    刚打包了个Mac OS App,https://github.com/downloads/qhm123/tinybo/%E7%9C%8B%E4%BC%9A%E5%BE%AE%E5%8D%9A-MacOSX.app.zip

    考虑给Linux和Windows系统打个app的包。Windows不是webkit内核的,没准要自己打个内核进去。。。

    freemember007
        32
    freemember007  
       2012-08-22 11:34:46 +08:00
    UI很好,只是需要再加加工。简单就是最好。
    kan831019
        33
    kan831019  
       2012-08-23 10:33:16 +08:00
    phonegap还是太卡咯 真正用上还有一段路要走
    Js
        34
    Js  
       2012-08-23 10:45:59 +08:00
    刚试了下trigger.io, 非常不错,不过免费版不支持修改launchimage太硬伤了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3373 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 12:09 · PVG 20:09 · LAX 04:09 · JFK 07:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.