ionic2可以用angular2的语法自定义组件吗？我写了内容有出来但是被别的黑背景样式div挡住了 - 知乎2被浏览506分享邀请回答
还没有回答与世界分享知识、经验和见解Ionic2环境搭建及文件目录介绍
时间： 23:54:28
&&&& 阅读：577
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&[注]引用自：
一年前研究混合框架，初步确定了四种方案给公司选择，ionic，hbuilder，wex5,react-native这四个框架各有优缺点，ionic和react－native是国外框架，相对好一点，文档更新很快，就不一一说了，大概的思路都是一样的，js逻辑实现，同时调用原生功能，h5，css3 UI实现，其实他们都有自己的ui框架，当时选择了国内的hbuiler，开发了三款应用，和都有，今天同样公司发展的改变，整体框架都变了，ionic2框架重新提上了方案，决定用ionic2开发hybird应用(具体原因你猜)，后续会有系列的博客分享。
安装ionic最新版本
ionic官网地址：
1.准备工作
下载&（下载包），（IDE，编写代码，浏览器调试）,（webstorm 运行环境），(Android编译)
Ionic 2 程序主要通过Ionic命令行工具 CLI 来创建和开发，并使用 Cordova 来构建和部署为原生应用程序。也就是说我们需要先安装一些工具来实现程序开发
要创建 Ionic 2 项目，你需要安装最新版本的 CLI 和 Cordova 。在此之前你需要安装最新版本的 Node.js 。&下载安装 Node.js ，然后继续安装 Ionic CLI 和 Cordova 来进行应用程序开发：
命令前面可能需要添加 sudo 提权来进行全局安装。
安装 Ionic
npm install -g ionic
安装 Cordova
npm install -g cordova
查看ionic版本
查看cordova版本
cordova –v
更新ionic和cordova包
npm&update&-g&cordova&ionic
更新已建ionic项目中的js类库，命令行中先进入项目所在目录
ionic&lib&update
展现ionic项目结果（显示在和上的样式）
ionic serve –lab
ionic start myApp blank（空项目）&
ionic start myApp tabs（带导航条）&
ionic start myApp sidemenu（带侧滑菜单）
添加android/ios平台
ionic platform add android/ios（添加android平台/ios）&
ionic platform remove android/ios（移除android平台/ios）&
ionic build android/ios（编译项目apk,ipa）
ionic emulate android/ios（运行项目apk 手机连接在手机运行 模拟器连接在模拟器运行）&
生成android／ipa安装包(生成后apk／ipa的存放路径在终端种可以看到)
ionic build android/ios
ionicrun android/ios （相当于build + emulate）&
ionicserve （开启服务调试）&
指明一个外部的ip地址，可以让外部用户查看。
ionic serv --address 68.52.96.10
使用设备运行应用，如果无设备可用将自动使用模拟器
ionic run ios [options]
//options的选项包括：
-l livereload， 实时刷新变化。
-c 打印app里的console
-s 打印设备的console
-p 指定设备的端口
-i 指定livereload的重刷端口
--debug|--release
//当处于livereload模式时，使用r重启客户端，使用 g your_url 跳转到指定url， 使用c启动或关闭console，使用s启动或关闭设备的console， 使用q退出。
//查看系统情况
ionic info
自带浏览器性能不好，可以强行安装一个壳，这将安装一个Chromium内核。
ionic browser add crosswalk
查看可用的browser
ionic browser list
删除安装的browser
ionic browser revert android
2 项目目录分析
安装完成后来创建你的第一个 Ionic 应用：
ionic start MenuDemo sidemenu --v2
MenuDemo可以替换成你的应用程序名称。 --v2 表示当前生成的是 Ionic 2 版本的应用，不添加则生成 Ionic 1 应用。
创建完成后 cd 到你的程序目录中，执行 ionic serve 来启动你的Ionic应用，并确保测试在浏览器中能够正常显示：
cd MenuDemo
ionic serve
浏览器运行起来是这样的
让我们来剖析一下Ionic 2应用，在我们创建的文件夹中，我们可以看到一个典型的Cordova项目结构。我们可以在其中安装原生插件，并创建平台特定的项目文件。
src/index.html
是 Ionic 2 应用的主入口文件，其目的是设置脚本和CSS引导，然后开始运行我们的应用程序。 我们不会在这个文件中花费大量的时间。
为了让应用正常运作，Ionic 2 会在HTML中寻找 &ion-app& 标记。 在这个例子中，我们有：
&ion-app&&/ion-app&
并且在下方我们还能看到这样的脚本引用：
&script src="cordova.js"&&/script&
& &script src="build/polyfills.js"&&/script&
& &script src="build/main.js"&&/script&
?&&cordova.js 是Cordova应用的需求文件，我们在开发过程中这个文件将会提示404错误，这不需要担心。Cordova将会在构建过程中自动注入这个文件。
?&&build/polyfills.js 是在构建过程中自动生成的，我们不需要过多关注。
build/main.js 是一个包含了Ionic, Angular和你的JS脚本的文件。
./src/ponent.ts
在 app 文件夹中能找到我们的预编译代码。这是Ionic 2应用程序的大部分工作起始的地方。当我们运行 ionic serve 时， app 中的代码将被编译成当前浏览器能够执行的版本（当前是ES5）。也就是说我们可以使用TypeScript或更高级别的 ES6+ 进行开发，而在编译时会自动降级为浏览器可识别的版本。
ponent.ts 是应用的入口文件。
在文件中我们能够看到这样的结构：
@Component({
& templateUrl: ‘app.html‘
export class MyApp {
& constructor(
每个应用程序都有一个根组件，用于控制应用程序的其余部分。这跟Ionic 1和Angular 1中的 ng-app 非常相似。原先的启动配置被放倒了app.module.ts 文件中。
在这个组件中，我们设置了模版文件 app.html，下面我们来看一下这个文件。
./src/app/app.html
app.html 里是我们应用的主模版：
&ion-menu [content]="content"& & &ion-header& &&& &ion-toolbar& &&&&& &ion-title&Menu&/ion-title& &&& &/ion-toolbar& & &/ion-header&& &ion-content& &&& &ion-list& &&&&& &button menuClose ion-item*ngFor="let p of pages" (click)="openPage(p)"& &&&&&&& {{p.title}} &&&&& &/button& &&& &/ion-list& & &/ion-content& &/ion-menu&
&!-- Disable swipe-to-go-back because it‘s poor UX to combine STGB with sidemenus --& &ion-nav [root]="rootPage" #content swipeBackEnabled="false"&&/ion-nav&
在这个模板中，我们设置了一个 ion-menu 作为侧面菜单，然后一个 ion-nav 组件作为主要内容区域。 ion-menu 菜单的 [content] 属性绑定到了我们 ion-nav 的本地变量 content 上。所以我们知道哪里会发生动作变化。
接下来，我们来看看如何创建更多页面并执行基本的导航。
现在我们对Ionic 2应用的布局有一个基本的掌握，让我们来了解一下在应用中创建和导航到页面的过程。
让我们看一下 app.html 页面的底部：
&ion-nav [root]="rootPage" #content swipeBackEnabled="false"&&/ion-nav&
注意 [root] 属性绑定。 这本质上是设置了ion-nav组件的“root”页面。 当ion-nav加载时，变量 rootPage 引用的组件将是根页面。
在 ponent.ts 中， MyApp 组件在其构造函数中指定：
import { Component, ViewChild } from /core‘;
import { Nav, Platform } from ‘ionic-angular‘;
import { StatusBar, Splashscreen } from ‘ionic-native‘;
import { Page1 } from ‘../pages/page1/page1‘;
import { Page2 } from ‘../pages/page2/page2‘;
@Component({
& templateUrl: ‘app.html‘
export class MyApp {
& @ViewChild(Nav) nav: N
& rootPage: any = Page1;
& pages: Array&{title: string, component: any}&;
& constructor(public platform: Platform) {
&&& this.initializeApp();
&&& // used for an example of ngFor and navigation
&&& this.pages = [
&&&&& { title: ‘Page One‘, component: Page1 },
&&&&& { title: ‘Page Two‘, component: Page2 }
& initializeApp() {
&&& this.platform.ready().then(() =& {
&&&&& // Okay, so the platform is ready and our plugins are available.
&&&&& // Here you can do any higher level native things you might need.
&&&&& StatusBar.styleDefault();
&&&&& Splashscreen.hide();
& openPage(page) {
&&& // Reset the content nav to have just this page
&&& // we wouldn‘t want the back button to show in this scenario
&&& this.nav.ponent);
我们看到 rootPage设置成了 Page1，所以 Page1将是在nav控制器中加载的第一个页面。
而page1指向的页面是import { Page1 } from ‘../pages/page1/page1‘;
创建一个页面
接下来，让我们看看我们正在导入的 Page1。在 src/ pages/page1/page1 文件夹中，找到并打开 page1.ts 。
你可能已经注意到每个页面都有自己的文件夹，该文件夹以页面命名。 在每个文件夹内，我们还可以看到一个.html和一个.scss同名文件。 例如，在 page1 / 我们将找到 page1.ts ， page1 html 和 page1.scss 。 虽然使用这种模式不是必需的，但它可以有助于保持项目的组织结构。
然后我们找到 page1类，在创建的页面中提供了一个Angular组件和已经使用Ionic的导航系统加载的所有Ionic指令。注意，如果页面是动态加载的，那么它们没有选择器（ selector ）：
import { Component } from /core‘;
import { NavController } from ‘ionic-angular‘;
@Component({
& selector: ‘page-page1‘,
& templateUrl: ‘page1.html‘
export class Page1 {
& constructor(public navCtrl: NavController) &
所有的页面都会有一个类和一个关联的模版。让我们再看一下 src/ pages/ page1/ page1.html ，这是一个模版页面：
&ion-header&
& &ion-navbar&
&&& &button ion-button menuToggle&
&&&&& &ion-icon name="menu"&&/ion-icon&
&&& &/button&
&&& &ion-title&Page One&/ion-title&
& &/ion-navbar&
&/ion-header&
&ion-content padding&
& &h3&Ionic Menu Starter&/h3&
&&& If you get lost, the &a href="/docs/v2"&docs&/a& will show you the way.
& &button ion-button secondary menuToggle&Toggle Menu&/button&
&/ion-content&
&ion-navbar&是这个页面中导航栏的模版。当我们导航到这个页面，导航栏的按钮和标题作为页面转换的一部分进行过渡。
模板的其余部分是标准的Ionic代码，用于设置我们的内容区域并输出我们的欢迎信息。
创建其他页面
要创建一个其他的页面，我们不需要太多的事情，只要确保配置标题和我们期望在导航栏显示的东西即可。
让我们来看一下&src/pages/page2/ page2.ts。在这里，你会看到一个新的页面被定义：
import { Component } from /core‘;
import { NavController, NavParams } from ‘ionic-angular‘;
@Component({
& selector: ‘page-page2‘,
& templateUrl: ‘page2.html‘
export class Page2 {
& selectedItem:
& icons: string[];
& items: Array&{title: string, note: string, icon: string}&;
& constructor(public navCtrl: NavController, public navParams: NavParams) {
&&& // If we navigated to this page, we will have an item available as a nav param
&&& this.selectedItem = navParams.get(‘item‘);
&&& // Let‘s populate this page with some filler content for funzies
&&& this.icons = [‘flask‘, ‘wifi‘, ‘beer‘, ‘football‘, ‘basketball‘, ‘paper-plane‘,
&&& ‘american-football‘, ‘boat‘, ‘bluetooth‘, ‘build‘];
&&& this.items = [];
&&& for (let i = 1; i & 11; i++) {
&&&&& this.items.push({
&&&&&&& title: ‘Item ‘ + i,
&&&&&&& note: ‘This is item #‘ + i,
&&&&&&& icon: this.icons[Math.floor(Math.random() * this.icons.length)]
& itemTapped(event, item) {
&&& // That‘s right, we‘re pushing to ourselves!
&&& this.navCtrl.push(Page2, {
&&&&& item: item
此页面将创建一个包含多个项目的基本列表页面。
总的来说，这个页面和我们之前看到的&Page1非常相似。在下一节中，我们将学习如何导航到新页面！
导航到页面
回想上一部分我们在&Page2类中有一个函数，看起来像这样：
itemTapped(event, item) { &&// That‘s right, we‘re pushing toourselves! &&this.navCtrl.push(Page2, { &&&&item: item & }); }
你可能已经注意到我们引用了一个page2。自己跳到自己，这是一个包含在教程启动器中的页面。
保存好之后。你会发现&ionic serve将重新编译应用程序并刷新浏览器，你的修改将会出现在程序中。让我们在浏览器中重新访问我们的应用程序，当我们点击一个项目，它将导航到项目详细信息页面！请注意，菜单切换按钮将被替换为后退按钮。这是Ionic遵循的原生风格，但可以按需配置。
Ionic 2导航的工作原理就像一个简单的堆栈，我们通过push将一个页面推到堆栈的顶端，这会让我们的应用前进一步并显示一个返回按钮。反之，我们也可以pop掉一个页面。因为我们在构造函数中设置了this.navCtrl，我们可以调用this.navCtrl.push() ,并传递我们要导航到的页面。我们还可以传递一个数据对象给我们想要导航到的页面。使用push导航到新页面很简单，而且Ionic的导航系统非常的灵活。你可以查看找到更多高级导航示例。
当涉及到URL，Ionic 2的工作方式有点不同于Ionic 1。不使用URL导航，可以确保我们可以总是回到一个页面（例如应用程序启动）。这意味着我们不只是限于使用href来导航。无论怎样，我们仍然可以选择在必要时使用网址导航到某个网页。
?&&&建议熟悉一下TypeScript的基本语法和使用，
?&&&掌握Angular2的基本原理和开发思路。
?&&&熟悉Ionic 2的所有Components和API。
&&了解Cordova的使用方法和插件。标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！ionic2 经验一 - 简书
ionic2 经验一
声明使用flexbox布局display: -webkit-
方向、换行flex-direction: row | row-reverse | column | column-
flex-wrap: nowrap | wrap | wrap-
flex-flow:
水平方向对齐方式justify-content: flex-start | flex-end | center | space-between | space-
竖直方向对齐方式align-items: flex-start | flex-end | center | baseline |
竖直方向多余空间调整（换行情况下）align-content: flex-start | flex-end | center | space-between | space-around |
竖直方向对齐方式align-self: auto | flex-start | flex-end | center | baseline |
ionic 最佳实践
css 度量计算calc函数可用不同度量单位计算calc(100%-20px)
开发创建component/page/service// 需要到app.module.ts中注册// 创建component$ ionic g component QicklyComponent --componentsDir src/pages/home
// 创建page$ ionic g page NewsDetailPage --pagesDir src/pages/news
// 创建service$ ionic g provider HttpClient --providersDir src/providers
添加第三方js library
配置index.htmlcopy.config.js
// 声明百度地图的变量
declare let BMap:
declare let BMAP_STATUS_SUCCESS:
// 使用百度地图 Api
let convertor = new BMap.Convertor();
网络请求http-client.ts
能够跨域的接口
不能跨域的接口
浏览器开发调试
Promise 与 Observable
json &–& classClassUtil.tsClassUtil.jsonToClass(jsonObj, UserInfoModel)
export class UserInfoModel
ID: number = 0;
isValid():boolean
return this.ID != 0;
update(newUserInfo:UserInfoModel)
export class LoginResponseGroupModel extends ISSHttpResponse
results:UserInfoM
nestedPropertyMap()
results:UserInfoModel
// android 平台
if(this.platform.is("android")){}
// ios 平台
if(this.platform.is("ios")){}
&button showWhen="android"&我是Android平台&/button&
&button showWhen="ios"&我是iOS平台&/button&
Android、iOS统一显示iOS的样式
// app.modules.ts
IonicModule.forRoot(MyApp, {
tabsHideOnSubPages:"true", // nav在push的时候隐藏
tabs backButtonText: '',
// 不显示back按钮上的文字
iconMode: 'ios',
mode: 'ios'
.gitignore
不建议提交到服务器的文件$ cat .gitignorenode_modules/platforms/plugins/www/
js library 加载优化// 异步加载js
&script async defer type="text/javascript" src="build/bmap.js"&&/script&
// 代码异步追加 js library
（在ponent.ts中异步加载）
appendDependencyJavascript()
let jsList = ["build/tripledes.js", "build/mode-ecb.js"];
for(let i = 0; i& jsList. i++)
let js = jsList[i];
let s = document.createElement("script");
s.type = "text/javascript";
window.setTimeout(()=&{
document.body.appendChild(s);
}, 1000 * (i + 1));
$ ionic build ios --prod --release$ ionic build android --prod --release
H5 call Native
plugin管理// 添加plugin$ ionic plugin add $ ionic plugin add cordova-plugin-http$ ionic plugin add
--variable PARTNER_ID= --variable SELLER_ACCOUNT= --variable PRIVATE_KEY=MIICdwIBADANBgkqhkiG9w0
// 删除plugin$ ionic plugin remove cordova-plugin-travel
// 拷贝plugin的js资源文件到platforms下、修改iOS/Android工程配置信息$ cordova prepare
// 保存状态// 保存状态（将插件信息、node_modules写到package.json中）$ ionic state save// 保存状态（将插件信息写到config.xml中，删除platform后重新添加platform时会去下载相应的plugins）$ cordova plugin save// 资源文件拷贝（www/*.js等）$ cordova prepare
Native打包
platform管理// 添加android平台$ ionic platform add android@6.1.0
// 添加iOS平台$ ionic platform add ios@4.3.0
// 删除平台$ ionic platform remove androidplugin管理（如上）
缺少某个modules$ npm install
@modules名@latest --save-dev
Android、iOS项目配置
配置app名称、splash page、app version、权限、横竖屏等config.xmlcordova-plugin-travel/plugin.xml
业精于勤荒于嬉！\ Ionic2基础学习之Card
Ionic2基础学习之Card
分享即可 +1积分
全栈工程师
这位童鞋很懒，什么也没有留下～～！
作者的热门手记
Ionic2组件之Card
Cards are a great way to display important pieces of content, and are quickly emerging as a core design pattern for apps. They're are a great way to contain and organize information, while also setting up predictable expectations for the user. With so much content to display at once, and often so little screen realestate, cards have fast become the design pattern of choice for many companies, including the likes of Google, Twitter, and Spotify.
For mobile experiences, Cards make it easy to display the same information visually across many different screen sizes. They allow for more control, are flexible, and can even be animated. Cards are usually placed on top of one another, but they can also be used like a &page& and swiped between, left and right.
卡片是一种非常重要的呈现内容的方式。
有以下一些内容：
Basic Cards
Card Headers
Card Lists
Card Images
Background Images
Advance Cards
Basic Usage
Cards最基本的用法就是&ion-card&里面包含&ion-card-header&和&ion-card-content&
示例代码：
&ion-card&
&ion-card-header&
固定资产卡片-header
&/ion-card-header&
&ion-card-content&
固定资产卡片-content
&/ion-card-content&
&/ion-card&
如上所述，就是有标题和内容
Lists in Cards
可以在Cards中增加&ion-list&来显示列表
示例代码：
&ion-card&
&ion-card-header&
Explore Nearby
&/ion-card-header&
&ion-list&
&button ion-item&
&ion-icon name="cart" item-left&&/ion-icon&
&button ion-item&
&ion-icon name="beer" item-left&&/ion-icon&
&/ion-list&
&/ion-card&
可以看到和在其他地方用&ion-list&的方法一样
上面的代码中并没有把list放在&ion-card-content&中，如果放在content内的话，将会显示边框。
Images In Cards
可以在&ion-card&中增加图片
示例代码：
&ion-card&
&img src="img/pic.jpg" /&
&ion-card-content&
&ion-card-title&
啦啦啦啦啦～～～～
&/ion-card-title&
&/ion-card-content&
&/ion-card&
如图所示，默认是流式布局，从上到下依次排列
Background Images
也可以将图片作为背景图片，将文字浮于文字之上
其实只要通过css样式来控制即可
也就是把父级元素（即&ion-card&)设为相对定位，图片正常放置，文字设为相对定位即可
&ion-card&
&img src="img/pic.jpg"/&
&div class="card-title"&S?o Paulo&/div&
&div class="card-subtitle"&41 Listings&/div&
&/ion-card&
将以下样式写在html页面同名的scss文件中：
ion-card {
text-align:
.card-title {
font-size: 2.0
width: 100%;
font-weight:
.card-subtitle {
font-size: 1.0
width: 100%;
这样最终会将这些样式加在main.css文件中
想要增加样式还有另一种写法:
@Component({
selector: 'page-contact',
templateUrl: 'contact.html',
styles:[`ion-card {
text-align:
.card-title {
font-size: 2.0
width: 100%;
font-weight:
.card-subtitle {
font-size: 1.0
width: 100%;
Social Cards
最后可以通过将之前所有组件组合起来，模拟朋友圈这类社交app的样子
&ion-card&
&ion-item&
&ion-avatar item-left&
&img src="img/1.jpg"&
&/ion-avatar&
&h2&皮卡丘&/h2&
&p&Dec 28, 2016&/p&
&/ion-item&
&img src="img/pic.jpg" /&
&ion-card-content&
&ion-card-title&
啦啦啦啦啦～～～～
&/ion-card-title&
&/ion-card-content&
&button ion-button icon-left clear small color="danger"&
&ion-icon name="thumbs-up" &&/ion-icon&
&div &12 Likes&/div&
&/ion-col&
&button ion-button icon-left clear small color="danger"&
&ion-icon name="text"&&/ion-icon&
&div&4 Comments&/div&
&/ion-col&
&ion-col center text-center&
&ion-note&
&/ion-note&
&/ion-col&
&/ion-row&
&/ion-card&
相关标签：
本文原创发布于慕课网 ，转载请注明出处，谢谢合作！
分享即可 +1积分
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
Copyright (C)
All Rights Reserved | 京ICP备 号-2}