ios
（2）下載。度娘搜索「xcode模擬器下載」之類的會有結果。或者這裏也能夠：http://blog.csdn.net/zhangao0086/article/details/38491271javascript
（3）安裝。下載下來要麼是一個文件夾，要麼是個壓縮包，解壓縮以後也是一個文件夾，名字通常是：iPhoneSimulator7.1.sdk之類的。php
只須要把這個文件夾複製到以下路徑便可。html
/Applications/Xcode/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/
——Applications就是「應用程序」
——找到Xcode後，右擊「顯示包內容」就能夠打開。前端
——咱們能夠看到在SDKs文件夾內，會存在一個iPhoneSimulator8.1.sdk文件夾，這個就是8.0模擬器。因此，其餘模擬器也固然要放在這裏。java
關於
使用HTML5和CSS來開發手機應用，一直是廣大前端開發者的理想，而且已經有很多解決方案了。例如node
- PhoneGap（用javascript來調用設備原生API）
- JQuery Mobile（UI庫）
- Titanium（混合方式）
- AppCan（國產的開發工具）
Ionic是一個輕量的手機UI庫，具備速度快，界面現代化、美觀等特色。爲了解決其餘一些UI庫在手機上運行緩慢的問題，它直接放棄了IOS6和Android4.1如下的版本支持，來獲取更好的使用體驗。android
快速開始
安裝環境
首先應該安裝好 node.js (略)，而後安裝cordova、ionic等nginx
sudo npm install -g cordova ionic ios-sim
建立不一樣類型的項目
目前能夠用blank，tabs，sidemenu三種git
ionic start myApp tabs
經常使用插件
cordova plugin add com.ionic.keyboard && cordova plugin add org.apache.cordova.console && cordova plugin add org.apache.cordova.device && cordova plugin add org.apache.cordova.device-motion && cordova plugin add org.apache.cordova.file && cordova plugin add org.apache.cordova.file-transfer && cordova plugin add org.apache.cordova.geolocation && cordova plugin add org.apache.cordova.inappbrowser && cordova plugin add org.apache.cordova.network-information && cordova plugin add org.apache.cordova.splashscreen && cordova plugin add org.apache.cordova.camera && cordova plugin add com.google.cordova.admob
測試運行
cd myApp
ionic platform add ios
ionic build ios
ionic emulate ios #會打開ios的模擬器
ionic run andoird #真機測試，須要先platform add andoird和build android
ionic serve #也能夠先在瀏覽器裏看效果，若是chrome安裝了livereload插件，能夠實現代碼編輯時界面即時變化
直接編輯IOS或Android工程
能夠直接用xcode或其餘IDE來編輯 /platforms/xxxx/ 下的工程，但要注意的是，應該以項目根目錄下的 /www/ 文件爲主，而不要編輯/platforms/ios/www/ 裏的文件。 運行下面的命令會自動用 /www/ 覆蓋 /platforms/ios/www 裏的文件
cordova prepare ios
www文件夾結構與文件分析
開發項目
發佈應用 在生成以前，去掉不須要的插件
cordova plugin rm org.apache.cordova.console
發佈到android 未完 簽名。
經常使用/關鍵代碼
sidemenu佈局
框架主界面 menu.html
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-positive nav-title-slide-ios7" animation="no-animation">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> 返回</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-light">
<h1 class="title">導航</h1>
</header>
<ion-content class="has-header">
<div class="list">
<div class="item item-divider">更多</div>
<a class="item item-icon-left" nav-clear menu-close ng-href="#/app/setting">
<i class="icon ion-android-settings"></i>
設置
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
關鍵： 1. 頁面總體用<ion-side-menus>容器包裹 2. 主界面容器用<ion-pane ion-side-menu-content>包裹，內部用<ion-nav-view>來實現多個界面切換（ 注意這個屬性name="menuContent"在app.js的.state方法裏使用）。 3. 顯示導航條<ion-nav-bar> 和內部的<ion-nav-back-button>返回按鈕（默認只有在進入二級界面時才顯示，在子頁面模板裏經過 <ion-nav-buttons side="left">來「注入」一個「展開菜單」的按鈕） 4. 側滑菜單容器用<ion-side-menu side="left">包裹，side表示方向，注意內部的元素加上 nav-clear menu-close 屬性，確保點擊後會觸發隱藏側滑菜單 5. 能夠設置ion-nav-view的animation屬性實現界面切換的動畫效果（設爲no-animation提升性能）
而後在 templates/ 目錄裏添加多個用於切換的模板文件，經過 app.js 裏的路由來設置切換邏輯 模板文件的標準格式爲：（以一個帶導航條按鈕和底部tab的模板爲例），若是是次一級的頁面，不要添加 ion-nav-buttons 元素，系統會默認顯示在 menu.html 裏定義好了的 返回按鈕
<ion-view title="{{typeDetail.title}}">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
內部
</ion-content>
<div class="tabs-top tabs-striped tabs-background-positive tabs-color-light">
<div class="tabs tabs-icon-top">
<a class="tab-item active">
<i class="icon ion-home"></i>
正在使用
</a>
</div>
</div>
</ion-view>
app.js 參考
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
//主框架（側滑菜單）
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
//物品詳情
.state('app.item-detail', {
url: "/itemDetail/:typeId/:itemId",
views: {
'menuContent' :{
templateUrl: "templates/itemDetail.html",
controller: 'ItemDetailCtrl'
}
}
})
注意app.item-detail頁面
- 設置了url格式
url: "/itemDetail/:typeId/:itemId",，表示能夠能夠傳入兩個參數，名稱分別爲typeId和itemId。 - 在該頁面對應的 controller
ItemDetailCtrl中，能夠經過$stateParams.typeId來獲取參數的值；另外在html模板中，href要設置成相似<a ng-href="#/app/itemDetail/{{typeDetail.id}}/{{item.id}}">格式，參數的位置要對應準確 views的menuContent鍵值，和模板menu.html中<ion-nav-view name="menuContent"></ion-nav-view>，ion-nav-view 的name屬性值是對應、相等的。
service.js 參考
用sublime text的angular自動完成插件，智能完成的 .factory 方法代碼沒法運行，必須按以下的格式
angular.module('babyThings.services', [])
.factory('Types', function() {
var types = [
{id: 1, title: '食品與餵養', icon: 'android-battery'},
{id: 3, title: '尿褲溼巾', icon: 'woman'},
{id: 4, title: '餵養用品', icon: 'woman'},
];
return {
all:function(){
return types;
},
getLastActiveTypeIndex: function(){
return parseInt(window.localStorage['lastActiveTypeIndex']) || 0;
},
setLastActiveTypeIndex: function(index){
window.localStorage['lastActiveTypeIndex'] = index;
},
getTypeDetail: function(typeid){
return types[typeid-1];
},
allDefault: function() {
var projectString = window.localStorage['projects'];
if(projectString) {
return angular.fromJson(projectString);
}
return [];
},
newProject: function(projectTitle) {
// Add a new project
return {
title: projectTitle,
tasks: []
};
},
};
})
注意newProject的return，返回了一個比較複雜一點的對象。allDefault還處理了默認返回空數組。
controllers.js參考
controller參考
angular.module('babyThings.controllers', [])
.controller('ItemsCtrl', function($scope, $stateParams, Types, Items) {
var storedTypeId= Types.getLastActiveTypeIndex();
var selectTypeId = $stateParams.typeId;
console.log('typeid:', selectTypeId);
$scope.typeDetail = Types.getTypeDetail(selectTypeId);
$scope.items = Items.getItemsOfType(selectTypeId);
})
在瀏覽器控制檯輸出參數console.log('typeid:', selectTypeId); 讀取url裏傳遞過來的參數 var selectTypeId = $stateParams.typeId;，參數名在 app.js 裏和 ng-href="" 裏要名稱對應（見後面）
定時消失的modal對話框
.controller('AppCtrl', function($scope, $ionicModal, $timeout, Types) {
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
一些關鍵代碼
跨域解決
服務器端CORS（php爲例，注意不要有代碼錯誤，若是代碼錯了，下面的跨域處理會無效） header("Access-Control-Allow-Origin: *"); echo json_encode($data);
ionic內能夠用$.ajax（jQuery），也能夠用$http.get來發出請求
顏色、圖標、padding、動畫
按鈕、toggle、footer、導航條背景等能夠經過修改class來實現幾種通用的顏色
可賦予顏色的元素，以藍色 positive爲例
- Tab背景 class="tab tabs-top tabs-background-positive"
- 按鈕、toggle 顏色 class="button button-positive", class="toggle toggle-assertive"
- 數值拉動條 class="item range range-positive"
- 頂部/底部通欄條 class="bar bar-header bar-positive"（或 bar-footer）
- 文本/連接字顏色 class="item positive"
顏色後綴
- 不帶任何後綴 默認
- light 白色
- stable 淺灰色
- positive 藍色
- calm 青色
- balanced 綠色
- energized 黃
- assertive 橙/紅
- royal 紫
- dark 黑
圖標 顯示方式：經過 <i class="icon ion-[圖標名稱]"></i> 來顯示
圖標名稱來源 1. 打開 ionicon的圖標庫頁面 ，點擊頁面裏的圖標找到名稱 2. 還能夠下載上面頁面裏的 ionicons-1.5.2.zip 壓縮包，解壓後找到裏面的 png/512 對着文件名來修改
padding 能夠爲元素增長padding padding padding-vertical padding-horizontal padding-top Adds padding-right padding-bottom padding-left
動畫效果 fade-in nav-title-slide-ios7 no-animation reverse slide-in-left slide-in-right slide-in-up slide-left-right-ios7 slide-left-right slide-out-left slide-out-right slide-right-left-ios7 slide-right-left
樣式
頭部與底部
頭部帶大標題，可修改顏色
<div class="bar bar-header">
<h1 class="title">bar-assertive</h1>
</div>
子頭部（在頭部下面）
<div class="bar bar-subheader">
<h2 class="title">Sub Header</h2>
</div>
底部/底部帶按鈕、標題，若是隻有一個居右的按鈕，須要給button的class添加一個pull-right屬性
<div class="bar bar-footer">
<button class="button button-clear">Left</button>
<div class="title">Title</div>
<button class="button button-clear">Right</button>
</div>
按鈕
<button class="button">button</button><!--普通，添加 button-[顏色] 實現不一樣色彩 -->
<button class="button button-block">button</button><!--有padding的全寬按鈕-->
<button class="button button-full">button</button><!--無padding的全寬按鈕-->
<button class="button button-small">button</button><!--尺寸不一樣的按鈕 button-large-->
<button class="button button-outline">button</button><!--只有邊框色，無背景色-->
<button class="button button-clear">button</button><!--只顯示文本，沒有邊框和背景的乾淨按鈕-->
<button class="button icon-left ion-home">button</button><!--帶圖標、文本的按鈕，ion-chevron-left，ion-chevron-right用於顯示一個小箭頭-->
<button class="button icon ion-navicon"></button><!--放在bar-header中的頭部導航按鈕-->
<button class="button icon ion-gear-a"></button><!--純圖標，沒有文本的按鈕（但有邊框）-->
<a class="button button-icon icon ion-settings"></a><!--純圖標，且沒有邊框-->
<div class="button-bar"><a class="button">First</a><a class="button">Second</a></div><!--按鈕組-->
列表
普通列表（無padding）經過<div class="list">容器來包裹 有padding和邊框的list，經過<div class="list list-inset">容器包裹 有「卡片」的邊框陰影效果的list，經過<div class="list card">容器包裹
<div class="item item-divider"> <!--不一樣組列表項之間的分割條-->
<a class="item" href="#">Butterfinger </a> <!--普通-->
<a class="item item-icon-left" href="#"><i class="icon ion-email"></i>Text </a> <!--帶左側圖標-->
<a class="item item-icon-left item-icon-right" href="#"><i class="icon ion-email"></i>Text <i class="icon ion-email"></i></a> <!--帶左側、右側兩個圖標-->
<a class="item item-icon-left" href="#"><i class="icon ion-email"></i>Text <span class="item-note">note</span></a> <!--帶左側圖標、右側灰色文本-->
<a class="item item-icon-left" href="#"><i class="icon ion-email"></i>Text <span class="badge badge-assertive">0</span></a> <!--帶左側圖標、右側彩色badge-->
<div class="item item-button-right">Call Me <button class="button button-positive"><i class="icon ion-ios7-telephone"></i></button></div><!--帶右側按鈕-->
<a class="item item-avatar" href="#"><img src="venkman.jpg"><h2>Venkman</h2> <p>Back off, man. I'm a scientist.</p></a><!--頭像/用戶名/簡介列表外觀-->
<a class="item item-thumbnail-left" href="#"><img src="venkman.jpg"><h2>Venkman</h2> <p>Back off, man. I'm a scientist.</p></a><!--縮略圖/用戶名/簡介列表外觀 可改成right-->
卡片（邊框有陰影效果）
下面的例子能夠去掉頭部和底部，只保留中間部分的文本
<div class="card">
<div class="item item-divider"> I'm a Header in a Card! </div>
<div class="item item-text-wrap">
This is a basic Card with some text.
</div>
<div class="item item-divider"> I'm a Footer in a Card! </div>
</div>
漂亮的大圖片card效果（頂部有個item-avatar的的item，底部有個彩色帶圖標的item） 實際上來自於list和card的結合改造
<div class="list card">
<div class="item item-avatar">
<img src="avatar.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div>
<div class="item item-image">
<img src="cover.jpg">
</div>
<a class="item item-icon-left assertive" href="#">
<i class="icon ion-music-note"></i>
Start listening
</a>
</div>
中間有圖、文本結合，底部有功能按鈕(如分享)的複雜card，可用於文章顯示
<div class="list card">
<div class="item item-avatar">
<img src="mcfly.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-body">
<img class="full-image" src="delorean.jpg">
<p>
This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
the content is from a card-body consisting
</p>
<p> <a href="#" class="subdued">1 Like</a> <a href="#" class="subdued">5 Comments</a> </p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#"> <i class="icon ion-thumbsup"></i> Like </a>
<a class="tab-item" href="#"> <i class="icon ion-chatbox"></i> Comment </a>
</div>
</div>
表單
實際上也是用<div class="list">來包裹的，爲表單添加縮進和邊框<div class="list list-inset">
輸入框input、textare
<label class="item item-input"><input type="text" placeholder="First Name"></label><!--普通輸入框，沒有左側文本label-->
<label class="item item-input"><span class="input-label">Username</span><input type="text></label><!--普通輸入框，左側有文本label-->
<label class="item item-input item-stacked-label"><span class="input-label">Username</span><input type="text></label><!--文本label在上，輸入框在下-->
<label class="item item-input item-floating-label"><span class="input-label">Username</span><input type="text></label><!--默認文本label在上，但不顯示，輸入框在下，輸入文本後label出現-->
特殊的外觀
<!--圖標label-->
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search">
</label>
</div>
<!--輸入框放入item的內部（有個背景色的「塊」，而不是前面的「融合」），並能夠添加按鈕等元素-->
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Email">
</label>
<button class="button button-small">
Submit
</button>
</div>
</div>
<!--bar頂部的搜索框，把上面代碼的list和item容器改成bar便可-->
<div class="bar bar-header item-input-inset">xxxxx</div>
toggle
<li class="item item-toggle">
HTML5
<label class="toggle toggle-assertive">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
checkbox
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
Flux Capacitor
</li>
radio
<label class="item item-radio">
<input type="radio" name="group">
<div class="item-content">
Go
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
range
<div class="item range range-positive">
<i class="icon ion-ios7-sunny-outline"></i>
<input type="range" name="volume" min="0" max="100" value="33">
<i class="icon ion-ios7-sunny"></i>
</div>
tab
最完整的頂部、底部都有tab。 可調整的項目：
- 不使用icon的純文本tab
- 不使用文本的純圖標tab
- icon方向在左邊
<div class="tabs tabs-icon-left">，上方是 top（默認）
<div class="tabs-striped tabs-top tabs-background-positive tabs-light">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i> Test
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i> Favorites
</a>
</div>
</div>
<div class="tabs-striped tabs-background-dark tabs-color-assertive">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i> Test
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i> Favorites
</a>
</div>
</div>
Grid
好像只有幾種標準的比例數字 10,20,25,33,50,67,75,80,90
<div class="row">
<div class="col col-33 col-offset-67">.col</div>
</div>
多個col的對齊設置，可爲top、center、bottom
<div class="row row-bottom">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
Responsive Grid 沒看懂。
自定義擴展樣式
在開發中常常用到一些ionic沒有提供的樣式
左側avatar和大小標題，右側圖標/按鈕的列表項
若是右側是圖標
<a class="item item-avatar-left item-icon-right">
<img ng-src="img/item_icons/naifen.png">
<div>
<h2>美素佳兒3段</h2>
<p>餵養-奶粉 還能用 3 天</p>
</div>
<i class="icon ion-ios7-cart"></i>
</a>
若是右側是按鈕
將上面部分代碼改爲<a class="item item-avatar-left item-button-right"> 和 <button classs="button button-clear>按鈕</button>
左側大小標題，右側文本標籤的列表項（以及強制左右分離的處理）
<a class="item row" ng-href="#/app/buyHistory">
<span class="col">
<h2>2014年7月5日</h2>
<p>嬰惟愛母嬰店 幫寶適 XXL</p>
</span>
<span class="badge badge-positive">324元</span>
</a>
技巧
如何讓tab在某些頁面裏隱藏
http://stackoverflow.com/questions/23991852/how-do-i-hide-the-tabs-in-ionic-framework
下面的方法有問題，會致使黑屏 I know that this is answered already, but there's a more "angular way" of doing this that might be helpful. It's done by using a custom directive that you can apply on views that you don't want to show the bottom tab bar.
My solution to this on my app was:
1 - Use ng-hide binded to a rootScope variable on the tab bar, so I can hide/show it in any Controller/View of my app:
<!-- tabs --> 2 - Create a custom directive that, when present, will hide the tab bar (and will show the tab bar again when the view is destroyed/dismissed:
var module = angular.module('app.directives', []); module.directive('hideTabs', function($rootScope) { return { restrict: 'A', link: function($scope, $el) { $rootScope.hideTabs = true; $scope.$on('$destroy', function() { $rootScope.hideTabs = false; }); } }; }); 3 - Apply it to specific views that don't need the tab bar visible:
<!-- view content --> ps: I think this can be improved even further avoiding the need of the ng-hide on the declaration, letting the directive do all the "dirty work".
問題
在ionic platform add ios時提示「no such file or directory '/xxxxxxxxx/plugins/ios.json'」
運行
sudo rm -rf platforms
sudo mkdir plugins
sudo ionic platform add ios
運行 ionic emulate ios 報錯，改用 ios-sim 命令來啓動模擬器
錯誤摘要
ios-sim[8517:168747] stderrPath:…… …… Usage of '--family' is deprecated in 3.x. Use --devicetypeid instead. Usage of '--retina' is deprecated in 3.x. Use --devicetypeid instead. 過一段時間後提示 Simulator session timed out
解決步驟
清空模擬器數據： 打開模擬器，點擊菜單 IOS Simulator - Reset Contents and Settings
重裝ios-sim
sudo npm uninstall -g ios-sim
sudo npm install -g ios-sim
sudo npm install -g ios-deploy #首先安裝這個。可能不須要，在查資料實驗的過程當中發現有網友提到這個，就順便安裝了
- 刪除 /platform/，從新添加 ios 和 build
rm -rf platforms
sudo ionic platform remove ios
sudo ionic platform add ios
sudo ionic build ios
- 直接使用 ios-sim launch 命令啓動app 後來查到 ios-sim的完整命令行說明, 以及網友遇到的 sudo 權限致使沒法啓動模擬器的問題 phonegap/ios-sim "Simulator session timed out" error 記住，__千萬不要使用 sudo __
ios-sim launch platforms/ios/build/emulator/HelloCordova.app
發現默認啓動了 iPhone4S 模擬器
- 手動指定iphone模擬器的型號/屏幕尺寸 由於我不想使用 iPhone4S 模擬器的3.5寸屏幕來觀察應用運行，又不知道怎麼調整默認啓動的模擬器爲4寸的 5S，所以在模擬器管理界面裏刪掉了 4s 這個設備。 後來發現 ios-sim 命令還有不少參數，其中 --devicetypeid 能夠指定設備型號 參考 查看ios-sim支持的全部的設備型號字符串 咱們選5s做爲啓動的模擬器，並且經過修改這個參數的值，隨時能夠切換不一樣的設備
ios-sim showdevicetypes #會列出全部支持的設備型號字符串
ios-sim launch platforms/ios/build/emulator/tigtag_life.app --devicetypeid com.apple.CoreSimulator.SimDeviceType.iPhone-5s
爲了方便，你能夠把這段命令存爲一個 sh 文件，便於快速啓動
echo 'ios-sim launch platforms/ios/build/emulator/tigtag_life.app --devicetypeid com.apple.CoreSimulator.SimDeviceType.iPhone-5 --retina' >> emulate.sh
chmod +x emulate.sh #容許執行
./emulate.sh #在須要啓動模擬器的時候
但願 ionic 官方儘快解決 ionic emulate ios 命令報錯的問題
ionic build android 報錯
在添加了系統變量 ANDROID_HOME /Applications/android-sdk-macosx/tools/ 以及解決ANT找不到問題後 brew update brew install ant
仍然報錯找不到 ANDROID_HOME 目錄或 android 命令，但直接運行android -list 命令又正常
找到http://stackoverflow.com/questions/23960763/error-on-adding-platform-in-ionic-framework-on-windows
>vi .bash_profile
export ANDROID_HOME=/home/coutinho/android-sdk
export ANDROID_TOOLS=/home/coutinho/android-sdk/tools/
export ANDROID_PLATFORM_TOOLS=/home/coutinho/android-sdk/platform-tools/
PATH=$PATH:$ANDROID_HOME:$ANDROID_TOOLS:$ANDROID_PLATFORM_TOOLS:.
而後刪除/platform/android目錄，從新add和build便可
真機環境下，圖片沒法加載
把<img src="img/xxxx" 改爲 <img ng-src="img/xxxx"便可
安裝和啓動livereload server這個軟件後，運行 ionic serve報錯
... Uhoh. Got error listen EADDRINUSE ... Error: listen EADDRINUSE at errnoException (net.js:904:11) at Server._listen2 (net.js:1042:14) at listen (net.js:1064:10) at Server.listen (net.js:1138:5) at Server.listen (/usr/local/lib/node_modules/ionic/node_modules/tiny-lr-fork/lib/server.js:138:15) at Object.IonicTask.start (/usr/local/lib/node_modules/ionic/lib/ionic/serve.js:157:16) 略
- 能夠退出livereload軟件，釋放端口
- 能夠經過 ionic serve 8101 35739 指定端口
生成包（product archive）後，使用organizer的驗證/提交提示圖標錯誤的問題
主要是提示文件找不到，或itunes store 要求120x120圖標的問題
首先使用Appicon(從app store下載)或在線工具，生成全部文件（icons和splash screen）。
刪除原cordova自動在resources裏生成的文件，替換
在文件管理器裏刪除原來的文件（由於直接刪掉了，變成紅色），而後Add Files To,把新文件添加進去
編輯 plist文件，修改原來的iphone和ipad圖標、啓動圖
<string>appicon.png</string>
<key>CFBundleIcons</key>
<dict>
<key>CFBundlePrimaryIcon</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>appicon@2x.png</string>
<string>appicon.png</string>
<string>appicon-Small.png</string>
<string>appicon-Small@2x.png</string>
<string>Default.png</string>
<string>Default@2x.png</string>
<string>appicon-72.png</string>
<string>appicon-72@2x.png</string>
<string>appicon-Small-50.png</string>
<string>appicon-Small-50@2x.png</string>
<string>Default-Landscape.png</string>
<string>Default-Landscape@2x.png</string>
<string>Default-Portrait.png</string>
<string>Default-Portrait@2x.png</string>
<string>appicon-60.png</string>
<string>appicon-60@2x.png</string>
<string>appicon-76.png</string>
<string>appicon-76@2x.png</string>
</array>
<key>UIPrerenderedIcon</key>
<false/>
</dict>
</dict>
<key>CFBundleIcons~ipad</key>
<dict>
<key>CFBundlePrimaryIcon</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>appicon-Small.png</string>
<string>appicon-Small-50.png</string>
<string>appicon-76</string>
<string>appicon-60</string>
<string>appicon</string>
<string>appicon@2x</string>
<string>appicon-72</string>
<string>appicon-72@2x</string>
</array>
<key>UIPrerenderedIcon</key>
<false/>
</dict>
</dict>
在project 和 target 裏把 code Sigining修改爲發佈版、配置文件等
product->scheme->edit scheme ,修改archive的名稱，
要上線的app必須application loader提交(先用Organizer的experot導出ipa)，用Organizer的submit，會進入prerelease
應用被打回後（例如 APS服務權限未勾選）的一些問題
最新的 itunes connect 用了一個叫「prerelease」，提交上去後，再次打包提交會提示二進制文件版本重複 這個能夠經過xcode修改應用的build 版本號（不用改version）來從新打包
有時候修改了證書，從新生成發佈配置文件（development和distribution）後，刪除舊的發佈配置文件後，沒法向設備（如iphone）導入distribution發佈配置文件（從而致使沒法修改 project和target的code signing相關配置) 這時候打開xcode的preference，account，viewDetails，點一下左下角刷新按鈕，便可看到實際上已經導入了。
如何用xcode 打包IONIC 項目（IPK）
將項目文件copy到MAC底下。運行終端，cd到項目所在文件夾，運行
ionic platform add ios而後finder，在 platforms->ios->xxx.xcodeproj 打開項目
而後，將xcode的模擬器類型選成iOS Device
而後在XCODE 的菜單欄 選擇 Product -- Archive ，會生成 xxx的Archive文件。
在窗口右側的Submit to AppStore 按鈕的下方，點擊 Export...
有三個選項
Save to IOS App Store Deployment
Save to Ad Hoc Deployment
Save for Enterprise Deployment選第二個Save to Ad Hoc Deployment 打包成.ipk
選擇證書等等，選擇導出文件夾，導出
- 1. ofstream之ios::ate,ios::app,ios::in,ios::out
- 2. 【IOS】IOS綜合
- 3. iOS - iOS 適配
- 4. iOS - 適配iOS 11
- 5. iOS
- 6. IOS
- 7. ios
- 8. ios******
- 9. [Unity IOS] Unity和IOS交互
- 10. [iOS]轉：iOS最佳實踐
- 更多相關文章...
- • ionic icon(圖標) - ionic 教程
- • ionic Range - ionic 教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. ofstream之ios::ate,ios::app,ios::in,ios::out
- 2. 【IOS】IOS綜合
- 3. iOS - iOS 適配
- 4. iOS - 適配iOS 11
- 5. iOS
- 6. IOS
- 7. ios
- 8. ios******
- 9. [Unity IOS] Unity和IOS交互
- 10. [iOS]轉：iOS最佳實踐