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指令，如下图所示：