IONIC - 技术教程文章
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
废话不多说了，直接给大家贴代码了，具体代码如下所示： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换操作</title><link rel="stylesheet" href="../ionic/css/ionic.css" rel="external nofollow" ><script src="../ionic/js/ionic.bundle.min.js"></script><script type="text/javascript">angular.module(myApp, [ion...
详解ionic本地相册、拍照、裁剪、上传（单图完全版）
网络上已有的ionic图片选择上传博客碎片化过于严重，功能残缺或者引入了一些不必要的插件。这次以项目为契机，把ionic的图片选择、裁剪、上传整合一下，多图上传请戳ionic选择多张图片上传插件安装cordova plugin add cordova-plugin-camera //用于通过相机、相册选择图片并完成裁剪 cordova plugin add cordova-plugin-file-transfer //用于上传图片到服务器将功能封装为服务angular.module(starter.services, [])//文件上传 .fac...
ionic选择多张图片上传的示例代码
在上一篇博客ionic本地相册、拍照、裁剪、上传（单图完全版） 中，跟大家分享了ionic项目选择本地图片、拍照、裁剪、上传到服务器的内容，但是上一节的内容由于使用了Cordova的Camera插件进行了图片选择与拍摄，所以每次只能支持1张图片的选择与上传。上一篇博客中的内容适合用于头像情景。 在本节中，跟大家分享使用Corodva的ImagePicker插件，实现多图选择与上传。废话不多说，进入主题。 插件安装 cordova plugin add corodva-p...
ionic3+Angular4实现接口请求及本地json文件读取示例【图】
一 准备工作 首先，ionic3+Angular4的开发环境你得有，这里就不赘述。环境准备好，创建一个空白项目，模板自选。 二 实现过程 1 新建json文件和service service记得在app.module.ts中引用json和service2 json文件格式 格式类似这样，根据实际需求决定。 [{"id":"1","name":"xiehan","age":"24","message":"测试json文件读取"},{"id":"2","name":"xiehan","age":"24","message":"测试json文件读取"},{"id":"3","name":"xiehan","age...
详解angularJS+Ionic移动端图片上传的解决办法【图】
前端开发中经常会碰到图片上传的问题，网上的解决办法很多，可是有些图片上传的插件会有一些附属的插件，因此因为一个图片上传的问题可能额需要引入其他插件到项目中，久而久之项目会不伦不类，有时候插件之间也会有一些冲突，所以我们可以自己写一个图片上传的方法。 今天的demo是帮朋友做的一个移动端微信公众号项目，项目架构采用angular+ionic，因为对dom的操作jQuery会方便很多，但是jQuery比较厚重，所以最后选择用轻量级的z...
ionic2懒加载配置详解【图】
文章标题为part 1，并解释目前可以如此配置，但后续使用上可能还有变动。 以ion-cli默认home组件为例。添加home.module.ts文件 import { NgModule } from @angular/core; import { IonicPageModule } from ionic-angular; import { HomePage } from ./home; @NgModule({declarations: [HomePage],imports: [IonicPageModule.forChild(HomePage)],exports: [HomePage] }) export class HomePageModule { }修改home.ts，主要是加入Io...
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
在ionic App中遇到一个文字上下循环滚动的效果实现，网上查了之后才知道有个通俗的名字-跑马灯。 这里借助了jQuery库的选择器和动画函数，并且把jquery的操作封装到指令里。先看指令代码： angular.module(starter) .directive(slideScroll, function ($window, $timeout) { return { restrict: AE, link: function (scope, element, attr) { var _scrollHeight = 40; var _newsLen = 3; var index = 0; setInterval(function () {...
ionic App问题总结系列之ionic点击系统返回键退出App
在安卓下，如果不处理系统返回键的事件，那么每次点击返回键，将页面将返回到上一个路由，这种逻辑不符合app的路由逻辑。正确的应该是：当页面到了各个导航页的首页时，此时再按返回键应该提示是否退出app，用户点击确认后退出app。 在run()方法中添加下面的方法 $ionicPlatform.registerBackButtonAction(function (e){//阻止默认的行为e.preventDefault();// 退出提示框function showConfirm() {var servicePopup = $ionicPopup....
ionic3 懒加载
ionic3 默认使用了懒加载技术，相较以前预加载的版本，ionic3构建的app在首页加载时间上有较大的优化，但是，ionic3默认每个页面都会对应一个模块，对于页面较多，但是每个模块都很小的应用可能并不怎么合理。于是，尝试将几个小模块合并为几个大的模块。 1. 一个模块对应一个页面： 默认状态下每个页面都会对应一个模块，如果项目之中的页面比较多那么最后构建的项目中的将会看到有很多的 js 。 原setting.module.tsimport { NgMo...
ionic2屏幕适配实现适配手机、平板等设备的示例代码
本文介绍了ionic2屏幕适配实现适配手机、平板等设备的示例代码，分享给大家，具体如下： 推荐使用的编辑器是：VS code （Visual Studio Code）=>只负责编辑文档，不编译。而WebStorm 有检查编译等，在ionic1开发的时候，还很方便用浏览器随时点击按键浏览效果，但是开发ionic2之后，ionic2有自动检查编译，会照成webstorm卡顿，无法编辑。一、首先增加一个一面作为测试我使用的工程是sidemenu在项目目录下执行如下命令: ionic g p...
angular+ionic返回上一页并刷新页面
假定当前页面为editCata页面，要返回的是cataDetail页面。目前我找到两种方法实现返回上一页并刷新，如果以后有其它方法，再继续添加。 1、在editCataCtrl.js中注入$ionicHistory服务. 使用$ionicHistory.goBack()方法即可返回到上一页面。 JS端代码： $scope.goBack=function(){$ionicHistory.goBack();}HTML代码： <button class="button button-clear" ng-click="goBack()">返回上一页</button>如果需要返回上一页时，重试加载页...
AngularJS ionic手势事件的使用总结
这两天学习了AngularJS手势事件感觉这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。长按 : on-hold在屏幕同一位置按住超过500ms，将触发on-hold事件： 你可以在任何元素上使用这个指令挂接监听函数： <any on-hold=“…”>…</any>示例代码： <body ng-controller=”ezCtrl”> <ion-header-bar class=”bar-positive” on-hold=”show_delete();”> <h1 class=”title”>on-hold</h1> </ion-header-bar> <ion-cont...
ionic 3.0+ 项目搭建运行环境的教程【图】
本文介绍了基于ionic3.4.0的项目搭建，分享给大家，具体如下： 在写这篇文章的时候，ionic版本已经更新到3.4.0。手头上有一大堆ionic1.x版本的项目，也在这个基础上开发了许多第三方的插件。实在是按捺不住迭代重构的想法，终于开始了3.x的升级。文中的内容都是在实践的过程编写的，注意请不要着急升级版本。 环境迁移 先看下升级后最新的环境输出信息全局升级了Cordova和Ionic的版本，分别是7.0.1和3.4.0。输出ionic info 打印出最...
Ionic3实现图片瀑布流布局【图】
瀑布流布局是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。瀑布流布局一般使用在网页中，在移动端用的比较少但是也不可缺。下面就介绍一下如何在ionic3中使用瀑布流布局。首先创建一个项目，这里不多做介绍。我们用about这个模块来进行瀑布流的开发。这里先介绍一下实现的流程：我们先要定义一个container，在container中存在有多个box，box里...
解决ionic和angular上拉加载的问题
说到ionic上拉加载就跟pc的分页是一样的，他需要在html数据列表的最下面边添加 <ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="10%"> </ion-infinite-scroll> 当列表为空 当ng-if为true的时候， 列表没有被填充满的时候 ，他就会自动加载loadMore（）； <span style="font-size:18px;"> $scope.loadMore = function() { Msdk.postJSON(/informNotice/queryNoticeInfo, { pageIndex: $scope.newsL...
利用Ionic2 + angular4实现一个地区选择组件
前言 本文主要给大家介绍的是关于利用Ionic2 + angular4实现一个地区选择组件的相关内容，为什么会有这篇文章？主要是因为最近在项目重构的过程中，发现之前用mobiscroll写的地区选择指令在angular2中很难重用（毕竟是用typeScript）。于是就萌生了自己写一个组件的想法。想和之前一样基于mobiscroll去写，但是发现非常耗费精力，于是某日万般无奈这下搜了一下相关的组件，不出所料已经有人写了。https://www.npmjs.com/package......
ionic 自定义弹框效果【图】
在工作过程中往往需要自定义的弹框。因此，将内容整理如下，以方便学习。若有不当之处，敬请斧正！ 思路 利用ionic自带的弹框$ionicPopup。隐藏头部和尾部，只保留body部分在利用templateUrl或者template，引入需要的模板代码 $ionicPopup.show({cssClass:team-popup,template: "<div class=list popup-form>" +"<div class = form-title>{{tempItem.name}}</div>" +"<div class=form-content>" +"<div class=input-name>input1:</...
ionic环境配置及问题详解【图】
必备条件： 安装Node.js安装Java JDK（jdk-8u71-windows-x64.exe），注意：版本必须要1.8+安装绿色版AndroidSDK (ADK编译) AndroidSDK添加环境变量在Path系统变量中添加如下配置： %ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools; 第一次用ionic，发现各种坑。 首先node.js不要使用最新版本，否则会出现各种问题。一开始用的v8.x的版本，各种报错，后面切换到v7.8版本正常，所以建议使用稳定版v6.11.0 LTS。 gradle -v时报ER...
Ionic + Angular.js实现验证码倒计时功能的方法【图】
前言 之前跟大家分享了关于 Android 原生实现验证码倒计时，地址是这里，现在公司使用 Ionic 开发的 App 也要实现类似的功能，现在也记录下来，供大家参考： 效果图：正文 首先介绍下与本文相关的概念 $interval $interval 是 window.setInterval 的 Angular 包装形式，函数如果在没有被取消的时候会无限执行。（取消使用 cancel(promise) ） 用法： $interval(fn,delay,[count],[invokeApply],[Pass]);参数说明： fn : 无限执行的...
ionic中的$ionicPlatform.ready事件中的通用设置
前言 $ionicPlatform.ready事件是用于检测当前的平台是否就绪的事件，相当于基于document的deviceready事件, 在app中一些通用关于设备的设置必须在这个事件中处理, 为了代码的可读性,我们把设置功能封装成一个方法, 只要在该事件中调用就行了。 关键代码和说明 .factory(setCommon, [$ionicPlatform,$location,$timeout,$cordovaToast,$ionicNativeTransitions,function ($ionicPlatform, $location, $timeout, $cordovaToast, $io...
Ionic3 UI组件之Gallery Modal详解【图】
Gallery Modal可以理解为相册的预览界面。可以显示网络图片，也可以显示base64Image。 在这个例子中，我用来实现图片的预览功能。 相机拍照，或者相册选择图片后，用缩略图组件显示缩略图，点击缩略图可以预览大图。 组件特性： 支持手势缩放可加载网络图片，也可以加载本地图片或者base64Image参考地址：https://github.com/nikini/ionic-gallery-modal 1）安装包： npm install ionic-gallery-modal --save2）在app.module.ts中添...
Ionic项目中Native Camera的使用方法【图】
本文介绍如何在ionic项目中使用设备的camera。 Ionic版本：v3.2.0 / 2017-05-10 / MIT Licensed / Release Notes 1）第一步是安装ionic-native/core。所有用到Native的功能，这一步不能省。npm install @ionic-native/core --save ps：关于第一步，官方的说明是ionic-native/core是默认就包含在每一个Ionic应用里面的，注意下图中的红色矩形文字。 言外之意如果开发环境都是最新版本，期间也没有经历Ionic版本的升级，是可以忽略这...
Ionic2开发环境搭建教程【图】
关于网络环境：ionic开发环境不需要FQ。我这里没有设置FQ，亲测可行。但是angular2的开发环境搭建，则需要FQ网络，否则很多包会安装失败。 建议大家在搭建开发环境的时候，不要参考百度出来的各种博客，太零碎，重要的是时间久，也不一定写的对。强烈建议参考官网引导教程。http://ionicframework.com/gettingstarted/ 1.下载安装Node.js。官网地址：https://nodejs.org/en/我安装的是v7.10.0版本。 2.安装完成后通过命令行 node -...
Ionic3 UI组件之autocomplete详解【图】
无论是web开发还是app开发，autocomplete是常用组件之一。 可惜截止到目前，ionic官方并未提供此组件。 ionic2-autocomplete是GitHub上的开源的Ionic2组件，本文将讲解如何在自己的项目中使用它。 组件地址：https://github.com/kadoshms/ionic2-autocomplete 1）npm install ionic2-auto-complete --save 2）打开app.module.ts，添加：import { AutoCompleteModule } from ionic2-auto-complete; 并且在imports数组里面增加AutoCo...
ionic实现下拉刷新载入数据功能
本文实例为大家分享了ionic下拉刷新载入数据的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html ng-app="myApp"> <head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="js/lib/ionic1/css/ionic.min.css" rel="external nofollow" ><script src="js/lib/ionic1/js/ionic.bundle.m...
ionic实现底部分享功能
本文实例为大家分享了ionic底部分享功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html ng-app="myApp"> <head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="js/lib/ionic1/css/ionic.min.css" rel="external nofollow" ><script src="js/lib/ionic1/js/ionic.bundle.min.j...
使用ionic播放轮询广告的实现方法(必看)
使用ionic中的ion-slide-box实现，下面是完整的代码示例： <!DOCTYPE html> <html ng-app="app"> <head><meta charset="utf-8"><title>ionic-demo</title><link href="../lib/ionic/css/ionic.css" rel="external nofollow" rel="stylesheet"><script type="text/javascript" src="../lib/ionic/js/ionic.bundle.js" charset="utf-8"></script><style type="text/css">div.box{width: 100%;height: 320px;}div.box > img{width: 10...
ionic+AngularJs实现获取验证码倒计时按钮【图】
按钮功能为：点击“获取验证码”——按钮不可用-设置倒计时-60秒后重新获取。 主要实现原理：点击后，设置一个$interval，每一秒更改一次剩余时间，并依赖Angular数据绑定实时显示在页面中。设置一个$timeout，60秒后将按钮初始化到可用状态。 实现代码： （1）js代码，设置成一个directive以便多次调用。 angular.module(winwin).directive(timerbutton, function($timeout, $interval){return {restrict: AE,scope: {showTimer: ...
Ionic2调用本地SQlite实例
普通的app用ionic内置的Storage存储键值对的方式可以满足日常的使用，但是有时候遇到一些奇怪的需求。比如说有个网友留言说做一个离线版的App，怎样调用本地Sqlite执行SQL语句。问题描述清楚直接上代码。需要说明的是SQLite是手机内置的数据库存储方式，在Ionic2中需要安装相应的插件和安装包。过程很简单 第一步 安装插件、并加入项目$ ionic plugin add cordova-sqlite-storage $ npm install --save @ionic-native/sqlite第二步...
AngularJS之ionic 框架下实现 Localstorage本地存储【图】
前言：我们前台用的是ionic+AngularJS，做的是混合模式移动应用。最近有一个需求是，我在页面A上面滑动的时候，跳入页面B，页面B需要加载页面A的数据，这样的页面传值如何实现呢？那就需要用到LocalStorage本地存储了。 Ionic Ionic是目前最有潜力的一款HTML5手机应用开发框架。通过SASS构架应用程序，他提供了很多UI控件来帮助开发者开发强大的应用。加上angularjs可以让ionic应用体验度增强。代码也非常简单。angularjs可以提供...