搭建ionic3的环境 - 简书
搭建ionic3的环境
关于配置环境,请移步
配置了好久的ionic3,发现了不少坑,最终可以build一个完整的项目,现在把一些坑记录下来。这里不在详细的去配置最基本的环境，关于基本的配置，请参照上面给出的网址进行配置。
1.创建一个工程
ionic start UDahuo
创建一个功能.png
创建成功后会有自动的创建一个文件
创建成功产生的文件
文件的结构.png
2.启动项目
ionic serve
可以看到会产生如下的命令行
然后使用谷歌浏览器进行调试,按F12进入开发者模式可以出现如下的图片
这样就成功了
3.进行platform的搭建
使用下面的命令行,这里以配置安卓环境为例
cordova platform add android
正在配置环境
在这一步花费的时间最多，遇到了不少的问题。
在下面的路径下找到GradleBuilder.js这个文件，然后进入进行修改。
文件的路径.png
因为下载gradle时非常缓慢，导致要等很久，因此要去修改相应的路径，网上也有使用自己搭建本地服务器的方式来修改的，在这里我用的是直接在本地文件夹的方式
https\\://services.gradle.org/distributions/gradle-3.3-all.zip
../gradle-3.3-all.
修改相应的路径
然后在自己的路径下放入相应的gradle，记得gradle和上面要一致
......\XX项目\platforms\android\gradle
这个地方放入自己的gradle
在这一步，我遇到了一个坑报错信息如下
Error: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
这一步是因为ionic3的问题导致的，历经查找后，发现要去配置一个gradle，将gradle配置为全局变量才可以
配置全局变量
提供一个解决的方式,有人遇到和我相同的问题,也可以看一下下面的文章
这样后就完了吗？还木有
完成最后的配置
ionic 首次build 下载maven2 缓慢可修改./platforms/android/build.gradle更改国内阿里云镜像，下面两处
repositories {
maven{ url'/nexus/content/groups/public/'}
jcenter()不要
allprojects {
repositories {
maven{ url'/nexus/content/groups/public/'};
jcenter()也不要加，否则速度很慢的说。
然后终于成功
可以看到产生了一个apk的文件
产生的apk文件
1.移动互联网的技术和产品。
2.思维模式和方法论
3.深度思考标签：至少1个，最多5个
最近在使用ionic3和Angular开发一款App。开发体验还是挺好的。期间遇到如何在项目中使用自定义图标字体文件的问题，经过研究，找到了一个解决方法，记录一下。
ionic项目提供了一套丰富的图标库，在ionic3中也进行了升级。虽然很实用，但是在实际项目中，还是需要根据视觉稿来增加图标。
通常，我们都会使用@font-face导入自定的字体文件。那么我们怎么将这些图标融入到ionic3的项目中去呢？
下面以ionic3中的tabs组件作为例子，提出一种解决方式。
话说问题是解决了，但是看起来其实并不优雅，不过能解决问题。=.=||
理解ionic3中的图标组件
ionic icon的使用
ionic3中提供图标使用的方式有不少，其中非常重要的组件是:ion-icon，基本的使用方法如下:
&ion-icon name="heart" &&/ion-icon&
name属性是图标的名称，这样ionic就会在这个标签处渲染生成一个图标。其他的用法，还有:
根据不同的设计风格使用不同的图标(ios or md--&Material Design)
设置图标的不同状态
作为特定组件的属性
ionic也为自己的图标库提供了一个预览的页面，
tabs组件中使用icon
在例子中，tabs组件使用图标的方式，是这样的:
&ion-tabs&
&ion-tab tabIcon="heart" [root]='tabPage1'&&/ion-tab&
&ion-tab tabIcon="alarm" [root]="tabPage2"&&/ion-tab&
&ion-tab tabIcon="at" [root]="tabPage3"&&/ion-tab&
&/ion-tabs&
通过设置tabIcon属性,就可以使用图标库中指定的图标。
仔细看一下渲染后的html结构，你会发现，ion-tab其实是在模板中加入了ion-icon组件：
那么，ionic是如何根据一个name属性，就链接到他的图标库中的图标呢？
ionic使用图标的原理
由于ionic3使用了Angular作为框架开发，因此ion-icon要么是组件，要么是指令。所以我们看看它的源码，是如何实现图标文件的使用的。
源码传送门：
从源码中我们可以看到，ionic把ion-icon定义为一个指令，有三个步骤:
进行平台风格(ios、md）判断和状态的判断。
根据判断的结果，将输入的图标名称，进一步组合成为如下形式的格式化文本
ion-{平台风格标识}-{图标名}-{修饰}
将上一步得到的格式文本，添加到元素的class属性中。
至此，也很好理解了，通过一个css类，就可以使用图标库中的字体定义(@font-face)
ionic将自己的图标字体的scss文件放在中，定义字体名称为Ionicons。
而图标库则成为另外一个git项目，相关的类型放在中。在github中打开源码文件，ctrl+f搜索heart，可以看到css是这样的:
.ion-ios-heart:before { content: "\f443"; }
.ion-ios-heart-outline:before { content: "\f442"; }
通过伪元素，指明了对应的图标字体。-outline后缀指明的是轮廓形状的图标。
知道了这些，我们就可以自定义字体文件和css类，从而让ion-icon也支持我们自定义的图标了。
图标文件，一般大家都会用illustrator矢量设计软件设计，然后导出.svg格式的文件。
要打包成字体文件，也有不少工具，常用的是阿里出品的 。具体使用方法，网站上讲解的非常清楚，这里就不多说了。
当你上传自己的图标svg文件，导入项目，下载完成后，会得到一堆文件。
有3种方式，可以使用图标:
unicode 最原始的方式，但是兼容性好。
fontclass 使用伪元素和css类的方式，与ionic一样，兼容限制ie8+
symbol 唯一支持保留颜色的方式，但是兼容性需要考虑(支持svg的设备和浏览器可以)
在例子中，我们选用fontclass足矣。
将生成的字体文件拷贝到ionic项目src目录下assets中(具体目录根据项目的要求，这里只是例子)的fonts目录里。
然后，书写一份.scss文件，内容如下:
@import "ionicons-variables";
$jpicons-font-path: $font-path !
@font-face {
font-family: "jp-icon";
src: url('#{$jpicons-font-path}/iconfont.eot?t=4'); /* IE9*/
src: url('#{$jpicons-font-path}/iconfont.eot?t=4#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('#{$jpicons-font-path}/iconfont.woff?t=4') format('woff'), /* chrome, firefox */
url('#{$jpicons-font-path}/iconfont.ttf?t=4') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('#{$jpicons-font-path}/iconfont.svg?t=4#jp-iconfont') format('svg'); /* iOS 4.1- */
.jp-icon {
font-family:"jp-icon" !
font-size:16
font-style:
-webkit-font-smoothing:
-moz-osx-font-smoothing:
字体名和路径等等，根据需要自定义就可以了。
下一步，就可以定义自己的类名了，由于例子使用Material Design风格，因此，定义如下:
.ion-md-jpicon__evalTab:before { content: "\e64e"; }
.ion-md-jpicon__recTab:before { content: "\e650"; }
.ion-md-jpicon__storeTab:before { content: "\e651"; }
名字的定义按照之前提到的格式化文本的形式就可以，这里由于想说明清楚的原因，我把名字定义的略复杂了一点，实际使用中可以按自己需要修改。
最后别忘了一点，在你的基础样式表，比如:app.scss中导入这个scss文件。
@import '../assets/fonts/jpicons.scss';
无论怎样，当你准备好这些文件时，下一步就可以使用自己的图标字体啦。
在tabs组件中，可以很方便的使用定义好的字体：
&ion-tabs class="jp-tabs" &
&ion-tab tabIcon="jpicon__storeTab" [root]="store" tabTitle="精选推荐" tabUrlPath="store" &
&/ion-tab&
&ion-tab tabIcon="jpicon__recTab" [root]="recommend" tabTitle="应用场景" tabUrlPath="recommend" &
&/ion-tab&
&ion-tab tabIcon="jpicon__evalTab" [root]="evaluation" tabTitle="深度评测" tabUrlPath="evaluation" &
&/ion-tab&
&/ion-tabs&
在tabs组件的.scss文件中,我们重新定义在该tabs组件下使用的字体名称:
.tab-button{
&&ion-icon{
font-family:"jp-icon" !
/*指定在当前组件中的ion-icon使用的字体名称*/
此外，如果有定义图标字体颜色的需求，简单粗暴的方式是:
.tabs-md .tab-button[aria-selected=true]{
color:$jp-
.tab-button-icon{
color:$jp-
当一个tab被选中时，ionic会修改对应组件元素上的aria-selected,值是true/false。
运行ionic serve，查看渲染后的效果:
再看html代码，可以验证上面所讲到的内容。
如果自定义组件和指令是不是也可以实现图标字体的使用？我想是可以的。
本文只是提供了一种方法而已，不太优雅，但是可以解决问题。好处是，可以使用ionic中的一些关于图标的功能，例如，在tabs组件中，可以设置tabLayout属性来决定图标和文字的布局关系，如果要自己开发布局等功能，当然可行，但是需要花费时间。作为一种实现，本文的介绍也算作一种方式吧。但作为研究和推敲原理，我想应该更深入的发现更好的方式。
个人能力有限，如果有什么错漏，请大家批评指正，之后会再补充内容。
1 收藏&&|&&2
你可能感兴趣的文章
10 收藏，1.8k
4 收藏，2.4k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
有一点不明白&ion-icon&应该没有.jg-icon类名，那你自己定义的font-family应该是没有引入进去的，怎么能用？
有一点不明白&ion-icon&应该没有.jg-icon类名，那你自己定义的font-family应该是没有引入进去的，怎么能用？
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
我要该，理由是：ionic3项目实战教程 - 第7讲 ionic3商品列表页的实现 - 简书
ionic3项目实战教程 - 第7讲 ionic3商品列表页的实现
这一讲主要包含以下几个部分：
1.创建商品列表页
2.根据分类获取商品列表
2.展示商品列表
1.创建商品列表页
执行 ionic g page product-list
实现点击首页分类跳转到该列表页：
在home.html中增加click事件
&div class="categories"&
&ion-grid&
&ion-row wrap&
&ion-col text-center tappable col-3 *ngFor="let c of categories" (click)="goProductList(c)"&
&i class="iconfont {{c.Icon}} icon"&&/i&
&span class="title"&{{c.FavoritesTitle}}&/span&
&/ion-col&
&/ion-row&
&/ion-grid&
在home.ts增加goProductList()函数，
goProductList(item) {
this.navCtrl.push('ProductListPage', { item: item });
2.根据分类获取商品列表
通过全局服务类获取商品列表数据，同时实现了分页加载，products-list.ts完整代码如下：
products-list.ts
import { AppService, AppGlobal } from './../../app/app.service';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-product-list',
templateUrl: 'product-list.html',
export class ProductListPage {
selectedItem:
spinner1: boolean =
params = {
pageNo: 1,
favoritesId: 0,
constructor(public navCtrl: NavController, public navParams: NavParams, public appService: AppService) {
this.selectedItem = this.navParams.get("item");
this.params.favoritesId = this.selectedItem.FavoritesId;
ionViewDidLoad() {
this.getFavoritesItems();
console.log('ionViewDidLoad ProductListPage');
getFavoritesItems() {
this.appService.httpGet(AppGlobal.API.getProducts, this.params, d =& {
this.products = d.
this.params.pageNo += 1;
this.spinner1 =
doInfinite(infiniteScroll) {
if (this.hasmore == false) {
this.appService.httpGet(AppGlobal.API.getProducts,this.params, d =& {
if (d.data.length & 0) {
this.products = this.products.concat(d.data);
this.params.pageNo += 1;
this.hasmore =
console.log("没有数据啦！")
3.展示商品列表
还记得上一讲中封装的商品列表组建ion-product吗？在这里就可以得到复用。在使用前同样需要在product-list.module.ts里进行导入。
product-list.module.ts
import { ComponentsModule } from './../../components/components.module';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ProductListPage } from './product-list';
@NgModule({
declarations: [
ProductListPage,
imports: [
IonicPageModule.forChild(ProductListPage),ComponentsModule
export class ProductListPageModule {}
products-list.html的完整代码
&ion-header&
&ion-navbar style="opacity: 0.8" no-border-bottom color="primary"&
&ion-title&{{selectedItem.FavoritesTitle}}&/ion-title&
&/ion-navbar&
&/ion-header&
&ion-content fullscreen&
&ion-products [products]="products"&&/ion-products&
&ion-col class="nodata" text-center *ngIf="!hasmore"&
没有商品啦 (^?^*)
&/ion-col&
&/ion-row&
&ion-infinite-scroll (ionInfinite)="doInfinite($event)"&
&ion-infinite-scroll-content&&/ion-infinite-scroll-content&
&/ion-infinite-scroll&
&/ion-content&
好了，试试看效果。
怎么样，复杂的列表页就这样简单的实现了。
看到到这里，相信大家对封装的思想应该有自己的认识了。
下一讲讲解如何设计商品详情页。
关注微信订阅号：IonicBlog，可获取最新Ionic资讯和技术博客。
如果教程对你所帮助，请收藏点赞，谢谢！
有任何问题，欢迎私信联系我。Ionic教程3
我的图书馆
Ionic教程3
一般教程的练习都是一个todo List，下面我们用Ionic来做一下todo app，完成后，你们发现，异常简单！
在之前生成的目录结构中，打开www/index.html文件，下面我们来改写它：
1234567891011121314151617
&!DOCTYPE html&&html&&&&head&&&&&&meta charset="utf-8"&&&&&&title&Todo&/title&&&&&&meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&&&&&&link href="lib/ionic/css/ionic.css" rel="stylesheet"&&&&&&script src="lib/ionic/js/ionic.bundle.js"&&/script&&&&&&!-- Needed for Cordova/PhoneGap (will be a 404 during development) --&&&&&&script src="cordova.js"&&/script&&&&/head&&&&body&&&&/body&&/html&
这里，我们包含了ionic必需的组件，ionic.css和ionic.js，ionic.css是整个ui框架的核心，ionic.js是包含了众多angularJS组件。cordova.js是cordova打包app时用。
下面看一下app的原型图：
这是一个侧滑（sidemenu）型的app，这ionic里面创建这种app非常简单，可以使用 ionic start myApp sidemenu 来创建模板，也可以自己手写html。
&body&&&&ion-side-menus&&&&&&ion-side-menu-content&&&&&&/ion-side-menu-content&&&&&&ion-side-menu side="left"&&&&&&/ion-side-menu&&&&/ion-side-menus&&/body&
下面，在www/js目录下创建app.js文件，这是我们程序的入口文件，里面将会创建程序的路由，即跳转地址。下面我们初始化app：
angular.module('todo', ['ionic'])
在index.html里面添加 app.js的引用：
&script src="js/app.js"&&/script&
在body标签里面加入angularJS的入口标志：
&body ng-app="todo"&
这样，app就已经成型了，下面看一下完整的代码：
123456789101112131415161718192021
&body ng-app="todo"&&&&ion-side-menus&&&&&&!-- Center content --&&&&&&ion-side-menu-content&&&&&&&&ion-header-bar class="bar-dark"&&&&&&&&&&h1 class="title"&Todo&/h1&&&&&&&&/ion-header-bar&&&&&&&&ion-content&&&&&&&&/ion-content&&&&&&/ion-side-menu-content&&&&&&!-- Left menu --&&&&&&ion-side-menu side="left"&&&&&&&&ion-header-bar class="bar-dark"&&&&&&&&&&h1 class="title"&Projects&/h1&&&&&&&&/ion-header-bar&&&&&&/ion-side-menu&&&&/ion-side-menus&&/body&
下面我们可以测试一下了，测试可以在浏览器测试，或者真机模拟，ionic提供了一个 ionic serve 命令，内置了浏览器可以测试，运行这个命令会启动一个浏览器窗口运行我们的app。
或者是使用模拟器：
$ ionic build ios
$ ionic emulate ios
基本成型了。下面我们来填充内容：
为body添加一个controller,angularJS里面，与dom节点通信是通过controller来实现的：
&body ng-app="todo" ng-controller="TodoCtrl"&
1234567891011121314
&!-- Center content --&&ion-side-menu-content&&&&ion-header-bar class="bar-dark"&&&&&&h1 class="title"&Todo&/h1&&&&/ion-header-bar&&&&ion-content&&&&&&!-- our list and list items --&&&&&&ion-list&&&&&&&&ion-item ng-repeat="task in tasks"&&&&&&&&&{{task.title}}&&&&&&&/ion-item&&&&&&/ion-list&&&&/ion-content&&/ion-side-menu-content&
angularJS使用双大括号作为变量引用，这里我们声明了一个循环 ng-repeat 来遍历tasks变量，下面看app.js代码：
12345678910
angular.module('todo', ['ionic']).controller('TodoCtrl', function($scope) {&&$scope.tasks = [&&&&{ title: 'Collect coins' },&&&&{ title: 'Eat mushrooms' },&&&&{ title: 'Get high enough to grab the flag' },&&&&{ title: 'Find the Princess' }&&];});
这里我们声明了 task 数组，用来填充到todo列表里面，对应的是ng-repeat里面的tasks，再在浏览器里运行一下，可以看到数据出现了！
一个基本的示例就是这样啦。
馆藏&24369
TA的推荐TA的最新馆藏[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&
喜欢该文的人也喜欢问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
现在用ionic要实现该页面的效果使用的ionic模板是tabs的模板，先在其中的一个页面上要加上一个选项卡，而这个选项看可以滑动选择
这里如果有多个分类的话可以实现滑动
现在用这种方式实现这种效果，可是出现了一种问就是其中一个tabs A的内容很长，而另一个 B则很短，B的页面长度就会被A的拉长了，请问有什么办法解决，
还是说有更好的代码例子，网上的很多例子都有看过，不过都有点不太符合
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
在每个ion-slide标签里面 加上一层 ion-content 就不会相互影响。
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：