且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

重新使用PhoneGap Cordova移动应用程序代码进行Web应用程序

更新时间:2022-12-21 08:43:32

是的,我开发了一些基于Ionic Framework的混合应用程序以及相应的网络应用程序可重用高达90%的代码库。

Yes, I've developed some hybrid apps based on Ionic Framework and also corresponding web apps reusing up to 90% of codebase.

webapp项目与混合应用程序项目共享几乎所有的Angular模块,特别是服务和指令。
一些功能和移动特定的功能被封装在一个不同于hybrid和webapp项目的模块中。

The webapp projects share almost all the Angular modules, in particular services and directives, with hybrid app projects. Some functionalities and mobile-specific features are wrapped in a module different for hybridand for webapp projects.

例如,我有一个 wrapper.ionic。 js 用于混合(Ionic)项目,其中包含例如此工厂:

For example I have a wrapper.ionic.js used in hybrid (Ionic) projects which contains for example this factory:

angular.module('components.wrapper', [])
.factory('$myPopup', ['$ionicPopup', function($ionicPopup) {
    var scope = {};

    scope.alert = function (params) {
        return $ionicPopup.alert(params);
    }

    scope.show = function (params) {
        return $ionicPopup.show(params);
    }

    scope.confirm = function (params) {
        return $ionicPopup.confirm(params);
    }

    return scope;
}])
...

针对webapp项目的对等项为 wrapper.bootstrap.js (基于 https:// angular-ui .github.io ):

The counterpart for webapp projects is wrapper.bootstrap.js (based on https://angular-ui.github.io):

angular.module('components.wrapper', [])
.factory('$myPopup', ['$modal', function($modal) {
    var scope = {};

    scope.animation = true;
    scope.size = 'sm';          // values: '', 'lg', 'sm'

    scope.alert = function (params) {
        var alert = $modal.open({
            animation: scope.animation,
            size: scope.size,
            backdrop: true,
            template:
              '<div class="modal-header"><h4 class="modal-title '+params.cssClass+'">'+params.title+'</h4></div>' +
              '<div class="modal-body '+params.cssClass+'">' +params.template + '</div>' +
              '<div class="modal-footer"><button class="button button-positive" type="button" ng-click="cancel()">Ok</button>' +
              '</div>',
            controller: ['$scope', '$modalInstance', function ($scope, $modalInstance) {
                $scope.cancel = function () {
                    $modalInstance.dismiss('cancel');
                };
            }],
            controllerAs: 'ctrl'
        });
        return alert;
    }
...

因此,您可以在hybrid和webapp服务 $ myPopup

So you can use both in hybrid and webapp the service $myPopup.

对于HTML(索引和视图模板),情况更复杂。许多Ionic标签(指令和CSS)是移动友好的,但不能优化从桌面可以看到的webapps。
这里我使用了Ionic标签和UI Boostrap,但优先使用第二个。

Regarding HTML (index and view templates) the situation is more complex. Many of the Ionic tags (directives and CSS) are mobile friendly but not optimize for webapps which can be seen from desktops. Here I have used both Ionic tags and UI Boostrap, but with preference for the second one.