ionic
文章平均质量分 84
小魏的马仔
易唐云网,愿所有的努力不被辜负,所有的温柔都被更温柔对待
展开
-
ionic-打包问题解决0316
在加载完Android平台后,使用命令行ionic build android 对项目进行打包,出现如下错误You may not have the required environment or OS to build this project"Could not create the Java Virtual Machine""Could not reserve enough space fo原创 2016-04-26 18:14:01 · 3304 阅读 · 0 评论 -
ionic之如何应用karma进行单元测试
karma测试1. 创建ionic项目ionic start ionic-testing tabscd ionic-testing2. 安装karma插件npm install karma karma-jasmine karma-phantomjs-launcher --save-dev --registry=https://registry.npm.taobao.org3. 为了能更方便的直接使用原创 2016-08-17 18:00:46 · 2167 阅读 · 0 评论 -
ionic-karma之 No binary for PhantomJS browser on your platform. Please, set "PHANTOMJS_BIN" env var
解决思路1. 重新安装PhantomJSnpm install karma-phantomjs-launcher使用淘宝解决下载过慢问题npm install karma-phantomjs-launcher --save-dev --registry=https://registry.npm.taobao.org2. 手动设置环境变量windows平台set PHANTOMJS_BIN=/usr/原创 2016-08-17 18:07:26 · 1521 阅读 · 0 评论 -
ionic之自动生成app图标和启动页面
素材准备icon.png 1张 最小尺寸为192*192 不带圆角 格式为 png、psd、aisplash.png 1张最小尺寸为2208*2208 中间尺寸(因为涉及到缩放和裁剪,边缘可能需要留白,不要放置内容) 1200*1200 格式为 png、psd、ai流程放置位置自动生成通过命令行进入项目中,然后执行ionic resources生成完成后,可以进入resources原创 2016-08-03 11:15:51 · 12801 阅读 · 1 评论 -
ionic之如何应用karma进行单元测试(2)-测试controller和service
测试controller和service准备工作准备工作项目搭建你已经按照上一篇文章,创建了ionic-tests工程,并在工程中加载了karma测试用例,完成了项目搭建、测试工作。如果没有,请参考ionic之如何应用karma进行单元测试开始测试理解karma和jasmineJasmine is a behavior-driven development framework for testing原创 2016-08-18 11:13:58 · 1296 阅读 · 0 评论 -
ionic实战之实现图片列表以及图片浏览
所有文章,首发于CSDN-柠檬加冰博客原文链接地址效果展示图片列表点击图片,展示大图左右滑动,切换图片实现功能图片列表应用技术ionic row & col cssionic list cardng-src动态设置图片路径代码html代码 <div class="row padding"> <div class="col list card" style="height:原创 2016-08-19 11:49:26 · 9993 阅读 · 1 评论 -
ionic之搜索框浮动在轮播图片上
实现效果实现代码html代码 <div class="articleHeader"> <div class="search"> <ion-item ui-sref="tabsController.searchPage" id="articlePage-button10" class="item" style="opacity:0.7;b原创 2016-08-09 16:18:40 · 3954 阅读 · 0 评论 -
ionic之ion-slide-box实现图片轮播
实现效果我是代码html代码 <ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true" slide-interval=2000 show-pager="true" pager-click="pageClick(index)原创 2016-08-09 16:23:57 · 7516 阅读 · 4 评论 -
ionic之ion-slide-box实现图片轮播样式修改
实现图片轮播具体实现方式,请参照我上一篇文章http://blog.csdn.net/xuexiiphone/article/details/52163822本篇主要讨论内容为:如何修改ion-slide-box的相关样式样式代码css代码–修改图片大小.box { width: 100%; height: 200px;}css代码–修改page小圆点位置.slider-pager {原创 2016-08-09 16:30:34 · 9195 阅读 · 2 评论 -
ionic之上拉加载更多
我是代码controller代码.controller('articlePageCtrl', ['$scope', '$stateParams', '$ionicSlideBoxDelegate', 'FinancList', '$timeout', function ($scope, $stateParams, $ionicSlideBoxDelegate, FinancList, $timeou原创 2016-08-09 16:41:32 · 6182 阅读 · 1 评论 -
ionic之$ionicLoading实现加载动画
我是代码 //触发函数 $scope.test= function () { //弹出缓冲提示 $scope.showLoadingToast(); //这里使用定时器是为了缓存一下加载过程,防止加载过快 $timeout(function () { //停止缓冲提示 $sc原创 2016-08-10 10:01:07 · 4984 阅读 · 0 评论 -
ionic之使用crosswalk编译
使用流程进入工程目录,输入下面的命令ionic browser add crosswalk然后直接使用build命令生成apkionic build android效果slideBox滑动效果提升明显,无卡顿侧边栏slideMenu的滑出、滑入效果提升明显,无卡顿页面切换,不再出现白边。测试机型:华为p8原创 2016-08-10 11:55:49 · 1335 阅读 · 0 评论 -
ionic之打包release签名apk
打包流程build未签名apk在工程目录下ionic build --release android生成签名文件keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000这里需要你输入相关信息,没啥用,不想输入的话,就随便填行了。jar原创 2016-08-10 14:48:25 · 8755 阅读 · 6 评论 -
ionic之路由跳转
简介ionic中比较常见的两个基于状态机(stateProvider)的页面跳转分别是ui-sref state.go查看ui-sref的底层实现源码可以看到element.bind("click", function(e) { var button = e.which || e.button; if ( !(button > 1 || e.ctrlKey || e.metaK原创 2016-08-22 13:35:38 · 3358 阅读 · 0 评论 -
ionic之将android导航栏安放到底部
我是代码 .config(function ($stateProvider, $urlRouterProvider,$ionicConfigProvider) { $ionicConfigProvider.platform.ios.tabs.style('standard'); $ionicConfigProvider.platform.ios.tabs.position('botto原创 2016-08-02 18:55:09 · 2604 阅读 · 0 评论 -
ionic之android真机CSS样式失效
问题action-sheet的样式在android上失效了原因ionic为了适应android,从而使用了原生的action-sheet。导致css失效。方案找到ionic.css,然后屏蔽掉下面的代码即可。不要看行号,直接搜action-sheet,每个版本行号不一致然后,依然是美美的~~~真是坑爹原创 2016-08-02 18:46:46 · 2314 阅读 · 0 评论 -
ionic之使用ng-class控制样式
我是代码html <p ng-class="{true: 'done', false: ''}[info.scheduleState == 'done']">{{ info.scheduleDes }}</p>css.done { text-decoration: line-through}这个就可以根据info.scheduleState == 'done' 表达式的值控制标签样式。。效原创 2016-08-02 17:52:51 · 5316 阅读 · 0 评论 -
npm_express安装
1 创建myappserver目录 mkdir myappserver2 进入目录 cd myappserver3 初始化npm npm npm init4. 下载express npm install express --save5. 安装express npm install express6. 将app.js拷贝到myappserver路径下7. 执行app.jsnode app.j原创 2016-04-26 18:14:04 · 809 阅读 · 0 评论 -
安装ionic全流程
1 下载node.js2 安装JDK 3 安装Android SDK 4 安装Apache ant 5 创建hello world! 1. 下载node.js,官网 https://nodejs.org 速度太慢国内镜像: https://npm.taobao.org/dist 下对应版本即可1.1 下载&安装node 1.1.1 安装完成后,打开cmd命令行界面,1.1.2 进入bin文件夹,具原创 2016-04-26 18:13:52 · 4433 阅读 · 0 评论 -
ionic之cordova插件自定义
插件文件目录插件java类package com.cool.toast;import org.apache.cordova.CallbackContext;import org.apache.cordova.CordovaPlugin;import org.json.JSONArray;import org.json.JSONException;import android.content.原创 2016-07-27 11:57:07 · 1172 阅读 · 0 评论 -
ionic错误集锦(更新2016-07-26)
1. initially cordova project ,无反应设置翻墙代理,多试几次就好2. ionic platform add android 无反应解决方案1:设置翻墙代理,然后多试几次解决方案2:在工程目录下有个hooks文件夹,里面有个after_prepare文件夹,把这个文件夹的名字改掉,试一下。3. ionic platform add android ,报错failed to原创 2016-07-26 09:08:16 · 1007 阅读 · 0 评论 -
ionic之手动控制tab跳转
我是代码angular.module("ezApp",["ionic"]).controller("ezCtrl",function($scope,$ionicTabsDelegate){$ionicTabsDelegate.select(0);});原创 2016-07-29 11:22:36 · 3770 阅读 · 0 评论 -
安装ionic全流程
1 下载node.js2 安装JDK3 安装Android SDK4 安装Apache ant5 创建hello world!1. 下载node.js,官网 https://nodejs.org 速度太慢国内镜像: https://npm.taobao.org/dist 下对应版本即可1.1 下载&安装node1.1.1 安装完成后,打开cmd命令行界面,1.1.2 进入bin文件夹,具体路径如下~原创 2016-07-17 18:04:59 · 977 阅读 · 0 评论 -
ionic实战之easyNote项目
项目简介项目预览主要应用知识点ion-listion-itemlocalStrorageservice.jsionic-datapickerionic-timepickerionic-tabsgithub源码https://github.com/iceLemonTea/easyNote1.1原创 2016-07-29 16:35:07 · 1626 阅读 · 2 评论 -
npm安装bower:ENOGIT git is not installed or not in the PATH
bower安装进入cmd,执行命令 npm install bower -g; -g,执行完毕后,说明bower已经安装成功,之所以先按照bower,是因为ngCordova插件的安装,需要通过bower来实现进入工作目录,执行bower install ngCordova问题ENOGIT git is not installed or not in the PATH本地如果有git,就检查原创 2016-07-21 00:15:25 · 2800 阅读 · 0 评论 -
ionic之快速启程(ionic-creator & ionic-lab)[附下载地址]
前言新手使用ionic最头疼的一共两个问题,一个是如何搭建一套符合程序员美感的产品框架,一个是http请求出现的诸多问题。笔者今天试用了一下ionic creator这款产品,不得不说,除了因为网速问题导致的页面保存慢了一点,这个产品无愧于良心之作。步骤登陆ionic creator1 访问https://creator.ionic.io/app/dashboard/projects2 注册,然后到原创 2016-08-04 17:24:34 · 10064 阅读 · 8 评论 -
ionic之动态改变icon大小
说明ionic 的 icon本质上是一种字体,因此可以使用font-size对其进行大小修改 <button class="ion-android-arrow-back" style="font-size: 22px;"> </button> <button class="ion-android-arrow-back" style="font-size: 12px;">原创 2016-08-01 16:28:12 · 5760 阅读 · 0 评论 -
ionic之时间&日期组件实例
ionic-datepickintroducehttp://market.ionic.io/plugins/ionicdatepickerdownloadbower install ionic-datepicker#0.9.0 --saveload js<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></s原创 2016-08-01 18:01:50 · 21878 阅读 · 14 评论 -
ionic之实战2easyLife(ionic源码)
产品效果下载地址https://github.com/iceLemonTea/easyLife1.0用到的相关技术ionic之打包release签名apkionic之使用crosswalk编译ionic之$ionicLoading实现加载动画ionic之上拉加载更多ionic之ion-slide-box实现图片轮播样式修改ionic之ion-slide-box实现图片轮播ionic之搜索框浮动在轮播原创 2016-08-10 16:04:12 · 2822 阅读 · 0 评论 -
ionic实战之easyNote项目1.2(ionic源码)
前言原有的功能做完之后,虽然我是一个没什么美感的程序员,但看到自己的界面简直也是丑哭了。幸亏想起了不知道是哪位前辈说的话不会copy的程序员,不是一个好程序员于是果断百度,找了一款类似应用,开始我的copy之旅,以下效果,感谢any.do产品(撒花)最新效果源码下载https://github.com/iceLemonTea/easyNote1.1原创 2016-08-02 14:10:06 · 2044 阅读 · 2 评论 -
ionic之使用webStorm提交github
准备git账号下载git软件配置git环境变量安装webstorm note:具体的git安装以及环境变量配置流程,如有不明之处,请自行百度流程说明1. 设置webStorm的git配置2. 选择在github上分享项目3. 将项目添加到提交列表(commit List)4. 提交项目到github5. 查看结果原创 2016-08-10 16:14:08 · 1206 阅读 · 0 评论