将 Phonegap Cordova 移动应用程序代码重新用于 Web 应用程序
Re-use the Phonegap Cordova mobile app code for web application
我们有一个使用 Ionic 开发的移动应用程序,Rails 为 API。现在我们计划在 Web 应用程序中重用 PhoneGap 代码和 Ionic 标签。我仍然不完全确定这是否可能。有人试过这个吗?我看到将 Ionic 代码(位于 www/ 内)放在 Lamp 服务器中可以使其在浏览器中打开(我在本地尝试过)。那是正确的方法吗?有人可以建议我更好的方法吗?也非常感谢指南或链接。
是的,我开发了一些基于 Ionic Framework 的混合应用程序以及相应的 Web 应用程序,重用了高达 90% 的代码库。
webapp 项目与混合应用程序项目共享几乎所有 Angular 模块,特别是服务和指令。
一些功能和特定于移动设备的特性被包装在一个模块中,对于 hybrid 和 webapp 项目来说是不同的。
例如,我有一个 wrapper.ionic.js 用于混合(Ionic)项目,其中包含例如这个工厂:
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):
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
。
关于HTML(索引和视图模板)情况更复杂。许多 Ionic 标签(指令和 CSS)对移动设备友好,但并未针对可从桌面看到的 Web 应用程序进行优化。
在这里,我同时使用了 Ionic 标签和 UI Boostrap,但我更喜欢第二个标签。
我们有一个使用 Ionic 开发的移动应用程序,Rails 为 API。现在我们计划在 Web 应用程序中重用 PhoneGap 代码和 Ionic 标签。我仍然不完全确定这是否可能。有人试过这个吗?我看到将 Ionic 代码(位于 www/ 内)放在 Lamp 服务器中可以使其在浏览器中打开(我在本地尝试过)。那是正确的方法吗?有人可以建议我更好的方法吗?也非常感谢指南或链接。
是的,我开发了一些基于 Ionic Framework 的混合应用程序以及相应的 Web 应用程序,重用了高达 90% 的代码库。
webapp 项目与混合应用程序项目共享几乎所有 Angular 模块,特别是服务和指令。 一些功能和特定于移动设备的特性被包装在一个模块中,对于 hybrid 和 webapp 项目来说是不同的。
例如,我有一个 wrapper.ionic.js 用于混合(Ionic)项目,其中包含例如这个工厂:
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):
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
。
关于HTML(索引和视图模板)情况更复杂。许多 Ionic 标签(指令和 CSS)对移动设备友好,但并未针对可从桌面看到的 Web 应用程序进行优化。 在这里,我同时使用了 Ionic 标签和 UI Boostrap,但我更喜欢第二个标签。