AngularJS+ JqueryMobile+ PhoneGap 打造APP

转载必须附带本文地址http://blog.regou.me/?p=790,谢谢

最近在做一个项目,一个B2B的移动APP。
我是这样选择的
前端UI框架:jQueryMobile
前端MVC和页面导航:AngularJS
封包器:PhoneGap Build
AngularJS和jQueryMobile的桥接器:jQueryMobile-Angular-Adapter(以下简称Adapter)
AngularJS JqueryMobile PhoneGap worktogether

两个著名框架融合在一起,还要让他们被封包了后还要运行OK可不容易,期间遇到了各种各样的问题,国内文档较少,于是Github、GoogleGroup、StakOverflow这些网站四处奔波提问+查资料
下面说下我遇到的问题和解决方法

  1. 跨域

    要知道,jQueryMobile里的多页面切换是依赖Ajax的,但是打包之后是运行的地址是file:///这样的,所以jQueryMobile的页面跳转会失效(not allowed by Access-Control-Allow-Origin),即使在Adapter的帮助下也不行。那么我们需要强制让JQM允许跨域,并且PhoneGap里的配置要允许跨域:

    /*JQM的配置,放在引用JQM的script标签之前*/
            $(document).bind("mobileinit", function() {            
                $.mobile.allowCrossDomainPages = true;
                $.support.cors = true;          
                //关闭DOM Cache降低内存消耗
                $.mobile.page.prototype.options.domCache = false;            
            });

    然后在PhoneGap的config.xml文件里:

    /*widget标签的最后添加*/
        <access origin="*" />
  2. 解决AngularJS的$http.post的XHR2 header BUG

    这真的很蛋疼,谷歌你要给力点啊!

    /*"app"为我们的应用的module*/
    app.config(function($locationProvider,$httpProvider) {
        $locationProvider.html5Mode(false);
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
        $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
    });
  3. 解决jQueryMobile form表单的data-ajax=”false”的BUG

    如果在模版页面里,form表单使用了data-ajax=”false”那么会导致此页面Ajax完全无法GET到
    解决方法是直接添加个空src

    <form ng-submit="submit()" data-ajax="false" src="">
    </form>
  4. 不要在a标签上又加href又加ngm-vclick

    ngm-vclick是Adapter的补充事件,它比ng-click或onclick在触摸屏上相应速度更快
    但是a标签里有href则不要再写ngm-vclick了,ngm-vclick=“”里面为空也不行!

  5. 解决Adapter的Panel BUG

    如果使用的是jquery2.0以上的版本,使用JQM的Panel会出现下面这个错误

    Cannot read property 'options' of undefined

    解决方法(二选一):
    一:把jQuery降级到jQuery 1.10.1
    二:直接在jqueryMobile-1.3.1.min.js里将 “mobilePage” 替换为 “mobile-page” (只有一处)
    另外jQueryMobile+Angular后,是完全用不到ng-view的,$routeProvider.when里也不可以指定controller的
    这两点在Adapter的说明文档里写的很清楚

  6. index.html不要加载过多的JS

    PhoneGap打包后,如果你首页有海量的JS,实际安装在手机里一般会直接为响应。
    所以index.html改成简单的介绍页吧。真正的应用首页从main.html开始

  7. Cordova Ready Service

    Lastly, try this Cordova Ready Service,may help solve some problems
    Thanks to Briant Ford and his article

    app.factory('cordovaReady', function() {
        return function (fn) {
            var queue = [];
            var impl = function () {
                queue.push(Array.prototype.slice.call(arguments));
            };
            document.addEventListener('deviceready', function () {
                queue.forEach(function (args) {
                    fn.apply(this, args);
                });
                impl = fn;
            }, false);
            return function () {
                return impl.apply(this, arguments);
            };
        };
    });

目前大概就这么多,每天还得为3个框架和一个repository找bug,挺坑爹的不是么?
所以目前我不建议将这3个组合(严格的说是4个)用于正式的生产环境中。
此贴我会长期更新

—————————————-
2014.6.11更新
此文章所述的jQueryMobile+AngularJS的方案已经不太优秀了。
强力推荐更优的解决方案:
Ionic
或者如评论所述的Appcan

6 thoughts on “AngularJS+ JqueryMobile+ PhoneGap 打造APP”

    1. 我emberjs没研究过呢,看了下和Angular貌似挺象。
      这个jQueryMobile的教程比较容易上手,我最近用我自己搞的angular-nav-plus-hammer做app。初学者我建议appcan + topcoat (千万别用appcan的UI,太反人类了)

Rispondi a 姚家秒 Annulla risposta

Il tuo indirizzo email non sarà pubblicato.