将 Phonegap Cordova 移动应用代码重新用于 Web 应用程序

我们有一个使用 Ionic 和 Rails 作为 API 开发的移动应用程序。现在，我们计划在 Web 应用程序中重用 PhoneGap 代码以及 Ionic 标签。我仍然不完全确定这是否可能。有人尝试过这个吗？我发现将 Ionic 代码（位于 www/ 内）放入 Lamp 服务器中可以使其在浏览器中打开（我在本地尝试过）。这是正确的方法吗？有人可以建议我一个更好的方法吗？相同的指南或链接也非常感谢。

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

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

例如我有一个包装器.ionic.js用于混合（离子）项目，其中包含例如这个工厂：

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 项目的对应项是包装器.bootstrap.js（基于https://angular-ui.github.io 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;
    }
...

所以你可以在混合和网络应用程序中使用该服务$myPopup.

对于 HTML（索引和视图模板），情况更为复杂。许多 Ionic 标签（指令和 CSS）适合移动设备，但并未针对可以从桌面上看到的 Web 应用程序进行优化。 在这里，我使用了 Ionic 标签和 UI Boostrap，但更喜欢第二个。