ionic模板源碼

Ⅰ 為什麼創建ionic tabs模板www文件裡面只有gitkeep文件

有，默認的是tabs類型，你輸入的

ionicstartmyapp

會被ionic 認為是：

ionicstartmyapptabs

上面一句最後一個參數tabs就是你要新建的項目的類型，除了tabs，還可以用sidemenu, blank這些參數指定一個空白項目的類型。

Ⅱ 組件介紹

組件介紹

1、打開ionic官網 https://ionicframework.com/

2、點開components，裡面會出現原有的組件（以後項目開發過程中還會自定義組件）

3、介紹部分組件（Grid、Modals、Badges、FABs、Segment）

--grid：柵欄布局

--modals：彈窗

--badges：卡片

--FABs：比較新穎的快速導航

--segment：選項卡（導航）

下面是簡單介紹幾個組件，在最後我會詳細講解一個組件的使用

Grid

網格系統由12列組成，每個ion-col都可以通過設置col-width屬性來確定大小。

基本用法：

This column will take 12 columns

This column will take 6 columns

Modals

模式在關閉屏幕上滑動以顯示臨時UI，通常用於登錄或注冊頁面，消息組合和選項選擇。

註：一般做成彈窗。

基本用法：

import { ModalController } from 'ionic-angular';

import { ModalPage } from './modal-page';

export class MyPage {

constructor(public modalCtrl: ModalController) {

}

presentModal() {

let modal = this.modalCtrl.create(ModalPage);

modal.present();

}

}

Badges

Badges是通常向用戶傳達數值的小組件。它們通常用在一個項目中。

基本用法：

Followers

260k

也可以給出任何顏色屬性：

FABs

FAB（浮動動作按鈕）是標准材料設計組件。它們被塑造成一個代表一個促進行動的圓圈。按下時，可能會包含更多的相關動作。FABs的名字表示在固定位置上浮動內容。

基本用法：

Ionic Component Documentation  

Segment

Segment是一組按鈕顯示的行。它們可以作為過濾器，根據段值顯示/隱藏元素。

註：類似導航。

基本用法：

Ionic Component Documentation  

詳細講解Segment

1、打開ionic官網：https://ionicframework.com/

2、點開Explore the docs，進到文檔

3、點開components,裡面找到Segment組件，點擊Demo Source進到github上的源碼

4、點開pages.ts，將缺少的可以自己拷貝到自己的某個頁面ts中。

（1）首先這里import指的是導入ionic庫中的某個類庫，如果同屬於一個ionic庫這個時候可以放在一起，格式比如：import { NavController,AlertController,Platform,ModalController  } from 'ionic-angular';

（2）然後是在class中先聲明，比如這里的

pet: string = "puppies";

isAndroid: boolean = false;

constructor小括弧中放的是將類庫初始化，自己命名，花括弧中進行函數等的調用。

5、最後在template.html中自己缺失的部分拷貝到自己的html中。

Puppies

Kittens

Ducklings

1、這里[(ngModel)]="pet"指的是ts頁面中初始化的值，也就是剛進入到頁面的是哪個選項；

2、 ion-segment-button value="puppies"，這里的value值對應下面的頁面，因為每個選項都是對應不同的頁面的，這里通過value值來綁定。

...

...

...

...

...

...

這里[ngSwitch]="pet"對應的是上面的導航的初始化頁面；

ion-list*ngSwitchCase="'cklings'" 中的*ngSwitchCase分別對應導航每個導航的value值.

問題：

1、ionic3對於資源的管理必須放在assets文件夾中，其他地方不能識別；

2、在ts文件中寫函數，需要調用庫中的類庫時，在constructor初始化時必須加上類型（public、private等）

Ⅲ ionic內聯模板 ionic3還在用嗎

一.ionic中路由管理介紹：
在單頁應用中，路由的管理是很重要的環節。ionic.js沒有使用AngularJS內置的ng-route路由，而是選擇了AngularUI項目的ui-router模塊。
ui-router的核心理念是將子視圖集合抽象為一個狀態機，導航意味著狀態的切換。在不同的狀態下，ionic.js渲染對應的子視圖(動態載入的HTML片段)就實現了路由導航的功能。
二.ionic中內聯模板介紹
HTML中常用的script標簽在AngularJS中被重新定義了：除了原本的腳本聲明功能之外，如果script元素的type屬性定義為text/ng-template,則被稱為內聯模板。
內聯模板在單頁應用(SAP)開發中非常有用。SAP應用通常需要通過AJAX從後台載入眾多的HTML片段。這些HTML片段都用文件存放的話，看起來會非常雜亂。使用內聯模塊，就可以把這些零散的HTML片段模板都集中在一個文件里，維護和開發的感覺都會好很多。
AngularJS在編譯時會將內聯模板的id屬性值和其內容，分別作為key和value，存入$templateCache管理的hash表中。
內聯模板的使用，常見的有幾種情況：
使用ng-include指令
可以利用ng-include指令在HTML中直接使用內聯模板，例如：
<div ng-include="'a.html'"></div>
注意：其中a..html是一個字元串常量，需要使用單引號包裹起來。
使用$templateCache服務
也可以直接使用$templateCache服務的方法get()從模板緩存中讀出其內容：
var partial=$templateCache.get("a.html")

Ⅳ ionic serve怎麼在Linux伺服器上後台運行

1.准備工作
下載 Ant（打包使用），Node.js（下載包），HBuilder（IDE，編寫代碼，真機調試）,Android SDK (Android編譯)
加群：245285768

2.配置環境變數：
ANDROID_HOME D:\Program Files\adt\sdk （對應sdk路徑）
Path ;D:\Program Files\apache-ant-1.9.4\bin （對應ant下bin路徑）

3.安裝ionic等，運行命令提示符（管理員） 輸入
a. 將cordova和ionic包安裝到全局環境中（可供命令行使用）：
[plain] view plainprint?在CODE上查看代碼片派生到我的代碼片
npm install -g cordova ionic
b. 進入你要創建項目的路徑：
[plain] view plainprint?在CODE上查看代碼片派生到我的代碼片
cd E:\Study\Android\ionic\Project
e:
c. 創建一個名為myApp的還有tabs的項目（ionic start <project-name> <optional-template>） 可選模板為sidemenu 側滑、tabs 底部tab切換、blank 空白）:
[plain] view plainprint?在CODE上查看代碼片派生到我的代碼片
ionic start myApp tabs
d. myApp就為項目名稱,進入myApp這個文件夾:
[plain] view plainprint?在CODE上查看代碼片派生到我的代碼片
cd myApp
e. 添加android平台:
[plain] view plainprint?在CODE上查看代碼片派生到我的代碼片
ionic platform add android
f. 生成androidapk:
[plain] view plainprint?在CODE上查看代碼片派生到我的代碼片
ionic build android
g. 在android模擬器或真機中模擬:
[plain] view plainprint?在CODE上查看代碼片派生到我的代碼片
ionic emulate android
其中f和g可以合並為：
[plain] view plainprint?在CODE上查看代碼片派生到我的代碼片
ionic run android
即生成apk，並在模擬器或真機中模擬。
4.更新ionic等
a.更新cordova及ionic包
[plain] view plainprint?在CODE上查看代碼片派生到我的代碼片
npm update -g cordova ionic
b.更新已建ionic項目中的js類庫，命令行中先進入項目所在目錄，然後運行：
[plain] view plainprint?在CODE上查看代碼片派生到我的代碼片
ionic lib update

5.展現ionic項目結果（顯示在ios和android上的樣式）
[plain] view plainprint?在CODE上查看代碼片派生到我的代碼片
ionic serve --lab

6.查看ionic版本（當前最新版本為1.2.13）

Ⅳ Vue+Ionic4，知虎偏行（二）創建及配置項目

一般Ionic項目創建可以使用ionic-cli命令，即：

然而查看該命令說明和源碼是沒有Vue的項目模版的（見 STARTER_TEMPLATES中的projectType ）。

所以使用Vue來創建項目：

這是Vue很基礎的東西，安裝依賴並運行看下：

此時可以看到項目能正常運行的，一般來說，應用都需要和路由打交道，所以添加下路由：

對Ionic集成，安裝ionic相關依賴（其中@ionic/core是組件部分，@ionic/vue是封裝成Vue方式調用的介面部分）：

安裝完成後，在main.js中添加配置：

再次運行，發現命令行會有告警提示：

同時頁面也會報錯，顯示空白頁面，這是一個BUG（前期的版本是沒有這個BUG的），我們需要安裝ionicons，而且它對版本有要求，要在V4.5.10以下，所以執行：

此時再次運行，沒有告警也沒有錯誤提示，但是還是空白頁面，調試頁面發現有這樣一個樣式：

我也不知道這是幹嘛用的，改了再說：

此時頁面看到有東西了， 那我們嘗試下ionic的組件能不能用 ，在Home.vue頁面添加一個按鈕：

可以看到組件渲染出來了，為了和ionic的dom結構保持一致，把App.vue稍微改動一下，變為如下：

我們再試試看事件能不能響應，頁面稍微改一下：

運行，發現能正常使用的。

為了支持Ionic的路由和使用其動畫和樣式，@ionic/vue里在vue-router的基礎上做了封裝，所以處理一下，打開router.js，修改一下（把Router替換為IonicVueRouter即可）：

此時看到路由也是正常使用的。

眾所周知，Ionic默認是使用android/md（Material Design）模式的，如果想使用ios模式，在<html>上添加mode="ios"，即：

index.html添加meta項：

至此，基本項目配置就完成了，後續再談論更多細節。

Ⅵ 如何搭建Ionic環境以及打包成安卓apk

1.Ionic是什麼？Ionic的生態系統基於Angular和Cordova，前者是web應用框架，後者是構建和打包原生應用的工具。Ionic是將HTML,CSS,JS,Angular，Cordova等技術進行整合，成為一個非常強大的移動端應用開發平台。

2.如何搭建環境？
如果你現在要使用Ionic來架構應用，你應用要有以下幾個步驟。
1>安裝node.js。可以訪問[nodejs官網](http://nodejs.org)下載對應平台的安裝包。如果你已經安裝了node，請把它升級為最新版本。安裝完成後，可以在OS X的終端後者windows的命令提示符中運行下面的代碼來驗證是否安裝成功。

$ node -v1
如果出現版本號說明安裝成功。(忽略$符號，以下同理)
2>安裝Ionic和Cordova。使用一條命令就能安裝Ionic和Cordova。執行之前請確保你已經安裝了git：

$ npm install -g cordova ionic1
這條命令需要一點時間，請耐心等待。安裝完成後，運行下面的命令來確認已經安裝成功：

$ cordova -v
$ ionic -v 12
同樣，這里出現版本號說明安裝成功。注意：這里需要配置node的環境變數，如果你不清楚環境變數如何配置，網路一下啦！

3.是時候創建一個應用了。
Ionic提供了一個簡單的start命令，幾秒就可以創建一個新項目，在你想要創建項目的文件夾下運行如下代碼就可以輕松創建：

$ ionic start demo
$ cd demo12
程序可能會問你是否創建一個Ionic賬戶，暫時可以無視它。ok創建成功後，你可以在你的文件下面看到demo文件夾，進入文件夾，你可以看到一串目錄。這是Ionic的默認模板。
重點介紹以下www目錄，這里進去我們可以看到css，js，lib，image，index，template等文件或者文件夾，這里前端人士應該很熟悉啦，這里就是你這個應用所有的前端代碼，在這裡面編寫你的代碼吧！
Ionic有個很牛叉的地方，當你輸入如下代碼後，你可以在瀏覽器中預覽應用，當你在編寫代碼的時候，只需要保存，頁面就好自動刷新，而不需要你手動刷新頁面，這個angular又更進一步啦！很神奇有木有...

$ ionic serve1
執行的時候會提醒你選擇地址，多數情況下選擇localhost即可。程序會自動打開電腦中的默認瀏覽器並訪問8100埠。你也可以直接在瀏覽器中輸入localhost:8100。這里建議使用Chrome或者Safari。IOS的WebView使用的是Safari，Android使用的是Android瀏覽器（跟Chrome的相似度極高）。所以很明顯看到用這兩個瀏覽器模擬的好處，嘿嘿！

4.如何編譯並發布應用？當你已經順利完成你的應用代碼部分的時候，你現在所需要的就是將你的應用打包並且發布了。
第一步：創建一個獨一無二的圖標。圖標的設計無非有以下幾點：簡單，讓人印象深刻，不受尺寸限制，顏色不要太復雜。創建好你的圖標之後，請以png/psd/AI格式保存在resource/android/icon.png和resource/android/icon.png。然後使用如下命令，就可以生成不同尺寸的圖標：

$ ionic resources -icon1
第二步：創建啟動頁面圖片。啟動畫面的源文件至少需要2208px×2208px，創建完成後，保存為
resource/android/splash.png和resource/android/splash.png。
然後使用如下命令就可以生成不同尺寸的啟動畫面圖片：

$ ionic resources --splash1
第三步：編譯Android應用（這里以安卓應用為例）。
1>配置應用的簽名。使用如下命令來配置你的簽名（keystore）：

$ keytool -genkey -v -keystore know_your_brew.keystore -alias know_your_brew -keyalg RSA -keysize 2048 -validity 100001
注意：請使用你應用的名字來替代know_your_brew.這個命令可以生成一個新文件，在本示例中為know_your_brew.keystore。
在應用的整個生命周期中將重復使用同一個keystore，請保存好它。
2>使用Cordova編譯應用。使用build命令編譯一個應用的發布版本：

$ cordova build --release android1
這個命令會生成一個新的apk文件。此時還未簽名。
3>簽名應用文件。現在我們要用之前創建的keystore文件來簽名生成的未簽名版本的應用。使用如下命令來簽名：

$ jarsigner -verbose -sigalg SHALwithRSA -digestalg SHAL -keystore know_your_brew.keystore unsigned_name.apk know_your_brew1
注意：這里請使用keystore生成文件名來替換know_your_brew示例名稱，同時用真實的應用文件名替換掉unsigned_name.apk。
這個過程需要一點時間，期間會提示輸入keystore的密碼。命令會修改apk文件並對其進行簽名。

Ⅶ ionic1和ionic2的區別

1、Ionic2新特性

①組織結構與框架：

在Ionic2中，每個組件、頁面都只專注於做一件事，它單獨有自己的一個目錄，有自己的類（Class）、模板文件（Template）和自己的樣式文件（在這里我們提倡使用scss）；

②命令行工具：

在開發中，我們總希望能夠有一個規范使得我們的開發更具有合理性，同時還能提升我們的開發效率，那麼ionic2的CLI完全可以滿足你這一點。

③路由導航：

Ionic2的路由導航不同於Ionic1，我們都知道其實Anngular1自帶理由是比較弱的，在復雜路由跳轉的app中，是很吃力的，我

們一般都是依賴Angular1的插件ui-router，它是基於URL的hash（當然官方也提供配置切換到html5模式），那麼ionic1也是
在這個基礎之上進行導航封裝的，比如說頁面導航堆棧。

④模板的語法結構：

ionic2的模板語法與Ionic1非常相似，但是看起來又有點古怪，其實Ionic2的模板語法更為簡潔。例如：

ionic1：

<img ng-src="{{photo.image}}" />

ionic2：

<img [src]="photo.image" />

我們看一下 事件調用：

ionic1：

<button ng-click="doSomething()">

ionic2：

<button (click)="doSomething()">

⑤編譯：
ionic從平台上講是基於cordova的封裝（ 不僅僅是它的CLI
），因此ionic工程也是一個標準的cordova工程，也就是說我們最終給跨平台提供的是www目錄的資源文件，但是在ionic2中我們都是在

www的同級目錄的app目錄進行編碼，也是因為我們使用EM6或Typescript寫的代碼瀏覽器並不能夠直接執行，如果你自己觀察ionic2的工
程目錄，你會發現Gulp.js的腳本多了幾個任務的定義，其實是幾個ionic的鉤子命令，如ionic
serve，ionic build之類的，其目的是在我們打包，或者瀏覽器模擬時的
命令執行之前，執行一些gulp任務，其中就是對typescript、scss的編譯，是不是感覺很方便，而且最終合並編譯到www/build/js目錄下，並且很難反編譯，也就是說你的app如果被人解包，他只能運行，但如果想拿到你的源碼是相當困難的。

Ⅷ ionic demo 源碼怎麼讀

如何為Android APK簽名，已經在這里說過了。這里說說如何保護源代碼，把Hybrid App（混合移動應用）工程變到發布的狀態。對於Hybrid App，如果不做任何處理，把apk文件解壓後在assets文件夾里就能看到所有的源代碼。

以下通過gulp tasks和cordova hooks來保護你的源代碼。
・gulp tasks - ionic serve時執行
・cordova hooks - ionic build/run時執行

（0）創建一個ionic工程
[email protected]
[email protected]

Java代碼
C:\>ionic start myApp tabs

首先編譯一個調試用的apk，以後的發布版apk作對比。

Java代碼
C:\>cd myApp
C:\myApp>cordova plugin add https://github.com/apache/cordova-plugin-whitelist.git
C:\myApp>ionic platform add android
C:\myApp>ionic build android
生成C:\myApp\platforms\android\build\outputs\apk\android-debug.apk

（1）(cordova hook)JS代碼的Lint
混淆JS代碼的前提要保准JS代碼沒有錯誤。

安裝jshint

Java代碼
C:\myApp>npm install jshint --save-dev
C:\myApp>npm install async --save-dev

hook文件

Java代碼
C:\myApp\hooks\after_prepare\01_jshint.js

編譯

Java代碼
C:\myApp>ionic build android

引用
Linting www/js/controllers.js
Errors in file www/js/controllers.js
9:4 -> Missing semicolon. -> }

ionic的sample工程controllers.js有錯誤，第九行缺少分號。
修改錯誤提示，直到build成功。

Ⅸ 如何利用ionic框架設置Tabs標簽頁

第一步，創建靜態頁面tabs.html，默認是HTML5模板，如下圖所示：

第二步，引入ionic相關的CSS文件和JS文件，如下圖所示：

第三步，在body插入div和a標簽元素，並設置樣式，如下圖所示：

第四步，預覽該靜態頁面，這時會看到四個Tabs標簽，如下圖所示：

第五步，再次設置Tabs樣式，使每個Tabs樣式不一樣，如下圖所示：

第六步，下面插入AngularJS相關的指令，ng-app、ng-controlle指令，如下圖所示：