我們有一個使用Ionic和Rails作爲API開發的移動應用程序。現在我們計劃重複使用PhoneGap代碼以及Web應用程序的Ionic標籤。我仍然不完全確定是否有可能。有人試過這個嗎?我發現將Ionic代碼(位於www /中)放在Lamp服務器中,可以在瀏覽器中打開(我在本地嘗試)。那是正確的方法嗎?有人可以爲我提供一個更好的方法。同樣的指南或鏈接也非常感謝。將Phonegap Cordova移動應用程序代碼重新用於Web應用程序
0
A
回答
2
是的,我開發了一些基於Ionic Framework的混合應用程序,以及相應的網絡應用程序可以重複使用高達90%的代碼庫。
webapp項目與混合應用程序項目共享幾乎所有的Angular模塊,特別是服務和指令。 一些功能和特定於移動設備的功能被封裝在一個不同的模塊中,用於混合和webapp項目。
例如我有一個wrapper.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;
}])
...
用於web應用程序的項目相對應的是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;
}
...
所以你既可以混合使用和Web應用程序的服務$myPopup
。
關於HTML(索引和視圖模板),情況更爲複雜。許多Ionic標籤(指令和CSS)都是移動友好的,但不能針對可從臺式機上看到的webapps進行優化。 在這裏,我已經使用了Ionic標籤和UI Boostrap,但首選第二個。
相關問題
- 1. 將Web應用程序轉換爲移動應用程序... PhoneGap?
- 2. 驗證碼在移動應用程序和Web應用程序
- 3. 適用於移動應用程序的LightSwitch HTML應用程序
- 4. 將ionic2移動應用程序部署爲Web應用程序
- 5. Phonegap用於在線Web應用程序
- 6. 作爲本地移動應用程序的Web應用程序
- 7. 在移動應用程序中嵌入web應用程序
- 8. Android Cordova/Phonegap應用程序上的應用程序錯誤
- 9. 將現有的Web應用程序移植到移動Web應用程序
- 10. PhoneGap應用程序與PhoneGap + WebView + HTML5 Web應用程序
- 11. 如何將.asp web應用程序應用於phonegap
- 12. 將Angular 2 Web應用程序代碼轉換爲離子2移動應用程序代碼?
- 13. 移動應用程序與Web應用程序 - Apple不再接受Web應用程序?
- 14. 混合移動應用程序:Phonegap/cordova與ReactNative建築差異?
- 15. 作爲移動應用程序部署Web應用程序
- 16. 如何在android中遠程更新我的cordova/phonegap移動應用程序?
- 17. Cordova:應用程序使用相機後重新啓動
- 18. Web應用程序+移動應用程序開發 - 建議
- 19. Web應用程序+移動應用程序的技術棧
- 20. Android應用程序或移動Web應用程序
- 21. 打包BlackBerry(WebWorks)PhoneGap/Cordova應用程序
- 22. 爲Android部署Phonegap/Cordova應用程序?
- 23. 動態Web應用程序到Phonegap
- 24. Web與移動Web應用程序刮?
- 25. Web應用程序和移動應用程序
- 26. 本地移動應用程序的Rails Web應用程序
- 27. iPhone web應用程序總是重新加載應用程序
- 28. 退出PhoneGap的移動應用程序?
- 29. Phonegap Jquery移動應用程序
- 30. 將Web應用程序遷移到企業應用程序
部署過程如何?由於www /是一個獨立的文件夾,您在哪裏將該文件夾保存在服務器中,您是如何使其工作的? –
您可以使用適當的名稱(例如/ var/www/html/myapp)在您的apache webroot下部署(添加)您的Ionic應用程序的/ www文件夾。 – beaver