01 ionic+angular開發webapp筆記

首先就是搭建環境，環境搭建比較費勁，用了三天才成功

第一步，安裝java的jdk，然後配置系統環境，就那三條東西加入環境變量

第二部，去下載下傳android studio，裡面包含android sdk，打開想整哪個版本下載下傳哪個版本的sdk，下載下傳完一看30多g，吓到我了。

第三部，安裝nodejs，簡單了，直接略過。

第四部，npm install -g cordova

第五步，npm install -g ionic

完活，環境搭建完成。

然後先建立一個app測試一下

找個檔案夾

ionic start mytest
           

做一個案例

然後

ionic platform add android
           

然後再

ionic build android
           

将手機連接配接電腦，敲入

ionic run android
           

成功的話，就會在手機上顯示，安裝app。好幸福

Ios  建立安裝運 行
ionic start myproject
cd myproject
ionic platform add ios
ionic build ios
ionic emulate ios
Android  建立安裝運 行
ionic start myproject
cd myproject
ionic platform add android
ionic build android
ionic emulate android (模拟器運作)
ionic run android (連接配接上手機運作
           

如果每次都用手機打開會很麻煩，是以，可以使用下面的指令，在浏覽器中打開

ionic serve
           

解決android系統導航欄在頂部的問題

找到根目錄下的www/js/app.js 從.config開始以後的使用下面代碼覆寫，覆寫之前記得備份哦

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

	$ionicConfigProvider.platform.ios.tabs.style('standard');
	$ionicConfigProvider.platform.ios.tabs.position('bottom');
	$ionicConfigProvider.platform.android.tabs.style('standard');
	$ionicConfigProvider.platform.android.tabs.position('bottom');

	$ionicConfigProvider.platform.ios.navBar.alignTitle('center');
	$ionicConfigProvider.platform.android.navBar.alignTitle('center');

	$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
	$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');

	$ionicConfigProvider.platform.ios.views.transition('ios');
	$ionicConfigProvider.platform.android.views.transition('android');

	// Ionic uses AngularUI Router which uses the concept of states
	// Learn more here: https://github.com/angular-ui/ui-router
	// Set up the various states which the app can be in.
	// Each state's controller can be found in controllers.js
	$stateProvider

	// setup an abstract state for the tabs directive
		.state('tab', {
		url: "/tab",
		abstract: true,
		templateUrl: "templates/tabs.html"
	})

	// Each tab has its own nav history stack:

	.state('tab.dash', {
		url: '/dash',
		views: {
			'tab-dash': {
				templateUrl: 'templates/tab-dash.html',
				controller: 'DashCtrl'
			}
		}
	})

	.state('tab.chats', {
			url: '/chats',
			views: {
				'tab-chats': {
					templateUrl: 'templates/tab-chats.html',
					controller: 'ChatsCtrl'
				}
			}
		})
		.state('tab.chat-detail', {
			url: '/chats/:chatId',
			views: {
				'tab-chats': {
					templateUrl: 'templates/chat-detail.html',
					controller: 'ChatDetailCtrl'
				}
			}
		})

	.state('tab.account', {
		url: '/account',
		views: {
			'tab-account': {
				templateUrl: 'templates/tab-account.html',
				controller: 'AccountCtrl'
			}
		}
	});

	// if none of the above states are matched, use this as the fallback
	$urlRouterProvider.otherwise('/tab/dash');

});
           

然後從新ionic build android 一下，然後，就真的成功啦，好神奇！！！

最後筆記，使用CrossWalk提高app的運作速度

優點：app運作速度提高，缺點：安裝包會變大十幾M

使用方法，在項目檔案夾内使用以下代碼

1．內建 crosswalk
ionic browser add crosswalk
2.解除安裝 crosswalk
ionic browser revert android 或者 ionic browser remove crosswalk
           

貌似現在上面的指令不行了，我現在用的下面的

cordova plugin add cordova-plugin-crosswalk-webview
           

啥都沒寫，項目竟然就已經達到30M了，感覺确實有點大了。。。。