環(huán)境配置
- 正常配置中文版官方地址，不多說了
- 異常情況：
安裝過程中出現(xiàn)，沒有安裝Python錯誤，所以需要安裝Python.
出現(xiàn)VC++環(huán)境錯誤，需要安裝VS2015.
分析ionic導航過程
官方例子：地址
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>菜鳥教程(runoob.com)</title>
<link rel="stylesheet">
<script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
<script type="text/javascript">
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.facts', {
url: "/facts",
views: {
'home-tab': {
templateUrl: "templates/facts.html"
}
}
})
.state('tabs.facts2', {
url: "/facts2",
views: {
'home-tab': {
templateUrl: "templates/facts2.html"
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'about-tab': {
templateUrl: "templates/about.html"
}
}
})
.state('tabs.navstack', {
url: "/navstack",
views: {
'about-tab': {
templateUrl: "templates/nav-stack.html"
}
}
})
.state('tabs.contact', {
url: "/contact",
views: {
'contact-tab': {
templateUrl: "templates/contact.html"
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl', function($scope) {
console.log('HomeTabCtrl');
});
</script>
</head>
<body>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/facts.html" type="text/ng-template">
<ion-view view-title="Facts">
<ion-content class="padding">
<p>Banging your head against a wall uses 150 calories an hour.</p>
<p>Dogs have four toes on their hind feet, and five on their front feet.</p>
<p>The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.</p>
<p>A cockroach will live nine days without it's head, before it starves to death.</p>
<p>Polar bears are left handed.</p>
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">More Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/facts2.html" type="text/ng-template">
<ion-view view-title="Also Factual">
<ion-content class="padding">
<p>111,111,111 x 111,111,111 = 12,345,678,987,654,321</p>
<p>1 in every 4 Americans has appeared on T.V.</p>
<p>11% of the world is left-handed.</p>
<p>1 in 8 Americans has worked at a McDonalds restaurant.</p>
<p>$283,200 is the absolute highest amount of money you can win on Jeopardy.</p>
<p>101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.</p>
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/about.html" type="text/ng-template">
<ion-view view-title="About">
<ion-content class="padding">
<h3>Create hybrid mobile apps with the web technologies you love.</h3>
<p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
<p>Built with Sass and optimized for AngularJS.</p>
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">Tabs Nav Stack</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/nav-stack.html" type="text/ng-template">
<ion-view view-title="Tab Nav Stack">
<ion-content class="padding">
<p></p>
</ion-content>
</ion-view>
</script>
<script id="templates/contact.html" type="text/ng-template">
<ion-view title="Contact">
<ion-content>
<div class="list">
<div class="item">
@IonicFramework
</div>
<div class="item">
@DriftyTeam
</div>
</div>
</ion-content>
</ion-view>
</script>
</body>
</html>
- 項目啟動首次執(zhí)行config配置信息，通過路由執(zhí)行到$urlRouterProvider.otherwise("/tab/home"); 其中"/tab/home"就是url地址
- 加載url為tab的頁面（這個不會單獨顯示，這里為了便于理解），執(zhí)行里面的templateUrl地址tabs.html
- 加載完畢后，再找下面的home
.state('tabs.home',
{ url: "/home",
views: { 'home-tab':
{ templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
}
}
})
首先看到state為tabs.home所以url完整地址為：state為tabs中url + 自己的url 即為/tab/home, 就是我們要找的地址，然后就會顯示templateUrl地址home.html，顯示到<body>標簽中的<ion-nav-view>
- 當點擊底部tab的時候，對應的href為 href="#/tab/home"，就會跳轉(zhuǎn)到這個地址，地址查找和前面一樣，這里要注意的是<ion-nav-view name="home-tab"></ion-nav-view> 這個view的name和
.state('tabs.home',
{ url: "/home",
views: { 'home-tab':
{ templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
}
}
})
中的views中的'home-tab'是對應的，不一樣的話也是顯示不出來的
- state中的controller也是要定義的，然后會報錯找不到。
Ionic 路由頁面間傳遞復雜參數(shù) ?。?！
Router跳轉(zhuǎn)：參考鏈接
- 但是這里要說的是傳遞對象，傳遞對象其實用JavaScript的序列化就可以了，和傳遞字符串一樣的方式?。ū仨毷浅橄箢惖膶崿F(xiàn)類才可以！?。。?/li>
- 如果兩個View公用同一個service，就可以在service里面設置set ，get 函數(shù)來傳遞參數(shù).
Ionic生命周期
Controller生命周期：參考blog
Ionic分頁加載更多
List加載更多：參考鏈接
Ionic無限輪播
- 不顯示問題
如題所示：
<ion-slide-box slide-interval='2000' auto-play='true' does-continue='true' style="height: 150px">
<ion-slide ng-repeat="item in infoList track by $index">
<div class="box blue">
<img ng-src={{item}} width="100%">
</div>
</ion-slide>
</ion-slide-box>
HTML中infoList是從后臺得到的url數(shù)組，但是這樣不顯示，一定要添加$ionicSlideBoxDelegate，然后拿到數(shù)組以后，手工渲染一下$ionicSlideBoxDelegate.update(); 就可以了?。。?/p>
- 無限循環(huán)問題
這樣做了以后就會出現(xiàn)，輪播圖從第一個滾動到最后一個然后不動了，就是不會循環(huán)播放，所以在最后還需要加上$ionicSlideBoxDelegate.loop(true); 來實現(xiàn)?。?！ - 去其他頁面在返回，輪播圖不會動了
1.初次進來的時候
$ionicSlideBoxDelegate.$getByHandle('my-handle').update();
$ionicSlideBoxDelegate.$getByHandle('my-handle').loop(true);
$ionicSlideBoxDelegate.$getByHandle('my-handle').start();
2.再次返回的時候
$ionicSlideBoxDelegate.$getByHandle('my-handle').next();
Ionic打電話
首先在config.xml中配置<access origin="tel:*" launch-external="yes" />
然后Android就可以打電話了，但是IOS不可以還要在config.xml中配置<allow-navigation href="*" />
這樣ios也可以打電話了，完美解決！
Ionic 數(shù)據(jù)庫PouchDB ＋ SQLite
參考鏈接：
ionic 通過PouchDB ＋ SQLite來實現(xiàn)app的本地存儲（Local Storage）
完全按照官方文檔步驟就行了，鏈接
Ionic SQLite原生說明鏈接
原生操作Demo
