IONIC - 技术教程文章
ionic3 自定义组件 滑动选择器 ion-multi-picker【图】
1.ionic3中有一个 ion-datatime 给大家选择时间提供了一个很方便的组件 效果如图 链接 https://ionicframework.com/docs/api/components/datetime/DateTime/2.经过查找发现有另一个更方便 也更能满足不同需求的组件 ion-multi-picker 链接： https://github.com/raychenfj/ion-multi-picker 里面有demo的链接 效果如图 它可以用一个 parentVal 的属性来绑定每个列之间的关系 会随着前面的选择自动变更后面两列的内容 具体想...
ionic3 MenuToggle使用介绍【图】
在某个子页面，加上 menuToggle 属性即可作为触发开关： 只能配合 app.html 使用： 官网文档和例子：https://ionicframework.com/docs/api/components/menu/MenuToggle/https://github.com/ionic-team/ionic/tree/v3/demos/src/menu/app原文：https://www.cnblogs.com/rjwx60/p/10929398.html
ionic 项目的启动屏幕
首先要做好图片，图片的大小最好是192px*192px(icon.png)、2208px*2208px(splash.png);然后在APP项目中建立一个新文件夹，resources，将准备好的两张图片放进来。如果你建的是新项目，先要安装android平台：ionic platform android下载$cordovaSplashscreen插件，建议去官网下载（http://ngcordova.com/docs/plugins/splashscreen/），cordova plugin add org.apache.cordova.splashscreen下载安装完成后，执行ionic resources命令...
十分钟使用ionic Framework开发一个跨平台移动应用【图】
Ionic是一个前端的框架，帮助开发人员使用HTML5, CSS3和JavaScript做出原生应用。ionic的理念类似前端开发的BootStrap，目标是封装HTML5移动跨平台开发的最佳实践。就像Twitter Bootstrap在前端开发中做的一样。Ionic框架眼下发展非常迅速。我们从2014年3月開始使用，当时是1.0.0beta2，如今已经更新到1.0.0beta10，大概每2个星期会出一个beta版本号，而且都包括实质性更新。Ionic框架非常先进，js部分是基于AngularJS框架，大量使...
Ionic3学习笔记（十四）使用 videogular2 实现视频播放以及遇到的一些问题【代码】
本文为原创文章，转载请标明出处目录使用 videogular2 安装增加图标、字体支持导入 module举个例子遇到的问题 iOS 端自动进入全屏播放Android 端 autoplay 不起作用更多1. 使用 videogular2安装终端运行:npm install videogular2 --save npm install @types/core-js --save-dev增加图标、字体支持videogular2 GitHub 地址：https://github.com/videogular/videogular2git clone 下来，将它的 fonts 文件夹 copy 到你...
Ionic2 开发环境搭建
安装 node.js 推荐下载地址：https://nodejs.org/zh-cn/download/安装nrm，方便切换NPM源，推荐taobao的源 $ npm i -g nrm $ nrm ls npm ---- https://registry.npmjs.org/ cnpm --- http://r.cnpmjs.org/ * taobao - https://registry.npm.taobao.org/nj ----- https://registry.nodejitsu.com/ rednpm - http://registry.mirror.cqupt.edu.cn/ npmMirror https://skimdb.npmjs.com/registry/ edunpm - http://registry.enpmjs.o...
BionicApi 学习笔记
1、内存管理 malloc, realloc, free new, delete2、文件输入操作 fopen, fwrite, fputs, fputc, fprintf, fflush fread, fgets, fgetc, fscanf, feof fseek, ferror, fclose 3、字符串操作4、数学5、日期和时间6、进程控制 执行shell命令： system <stdlib.h> 与子进程交互： popen,pclose <stdio.h> #include <stdio.h> FILE *stream; stream = popen("ls", "r"); if (NULL == stream) { // unable to execute the command. }e...
（转）windows下安装Ionic【代码】【图】
原文：http://www.itwap.net/ArticleContent.aspx?id=26 Ionic官方教程： http://learn.ionicframework.com/videos/windows-android/ 以下内容参考官方教程得出。 1、下载JDK并配置好Java运行环境 下载地址： http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html （请注意选择您电脑的对应版本） Java环境变量的配置：参看：http://jingyan.baidu.com/article/f9...
使用Ionic + Apache Cordova开发跨平台混合型的移动应用【代码】【图】
JavaScript 写多了，要想真正提高js水平，研究其他js框架源码是不错的选择。Github上大部分都是js、css相关的项目，可以有目的性的 check out 下来，研读研读，还是非常收益的，跟随nb的人，也会慢慢变的nb。场景：有一个朋友，他公司是做移动应用开发的，3个安卓开发人员，3个 ios，然后是 java 开发，美工 ，10多个人的公司，主要是以接项目为主，一个项目（电商、微信、聊天 类型的）大概在20万左右， 差不多1个半月 做完（代码...
ionic学习使用笔记（二） slide 组件的使用【代码】
开始做的时候，遇到了个要用ionic实现有一系列的序列需要展示，但是当前页面上只能展示一小部分，剩余的在没有出现时是隐藏的，还得能滑动出现，但是又不能有滚动条。之前使用jQuery来实现的话，其实就是一个向左滑动的图片切换。想着这个功能其实还是蛮常见的，ionic的framework应该能实现。然后就查看了一下文档，发现slides是可以实现的。一开始直接粘贴了文档里面的代码，想着能自己直接修改样式来实现，设置slide宽度为20%，每...
Android内核源码bionic目录下的子目录arch-arm源码分析笔记
依旧是好记性不如烂笔头，今天需要学习的是arch-arm目录下的代码。首先我们先看一下inclue目录下的endian这个头文件我们主要是需要知道下面的几点知识。1、先看一下下面的代码的片段#if !defined __ARM_ARCH_5__ && !defined __ARM_ARCH_5T__ && !defined __ARM_ARCH_5TE__ && !defined __ARM_ARCH_5TEJ__ && !defined __ARM_ARCH_4T__ && !defined __ARM_ARCH_4__ 正如google上面的注释文本所说： REV与REV16在ARM5与ARM4...
ionic之angular拦截器【代码】
ionic作为应用，肯定和服务器有数据交换，分散处理api太繁琐，所以一般用拦截器来集中处理。 主要由以下几个方面的应用： 服务器地址注入错误处理token注入日志处理无token时跳转至登录页面 ... 有四个方法 request: function(config) requestError: function(config) response: function(response) responseError: function(response) 基本看方法名称就知道其意义。具体的用法、写法请参考：http://my.oschina.net/ilivebox/blo...
abgularjs4+ionic3集成搭建
1:安装一下cnpm用淘宝镜像安装npm install -g cnpm --registry=https://registry.npm.taobao.org2:使用 cnpm命令安装(全局安装 Angular CLI 脚手架工具)cnpm install -g @angular/cli3:ng new 项目名称 创建一个项目 ng new my-app4:进入刚才创建的项目里面启动服务cd my-app cnpm install //安装依赖 ng serve5:运行ng serve --open6:项目导入7:创建组建cd 项目ng g component components\login8:属性 定义 赋值，*ngFor *ngIf...
ionic2+angularjs2【代码】【图】
感觉TypeScript真不错，强类型，有点类似c#的感觉，而且如果写错了编辑器都可以感知出来，于是就开始看ionic2。ionic2是基于angular2的，语法跟以前有了很大的变化。但自己写原生app写惯了，反而觉得这种方式更方便一些。每个页面都是一个组件，组件里也可以套组件，html标签都可以自定义，也就可以无限扩展。虽然ionic2和angular2都还没发布正式版，但手头的这个小东西用一下也未尝不可，就开始动工了。先列一下学习资源：TypeScr...
Ionic系列——支付【代码】【图】
1、为什么用Ping++ 简单的说就是更方便，他和支付平台做了一下对接，申请不用那么复杂了，但是本身是免费的，收费的是各个平台。 其实你也可以自己去看支付宝啊，微信啊，银联的接口文档，直接对接平台，但那样很费劲，会有认证费，认证材料，接口等一系列的东西要准备。而Ping++的认证会更简单一点。 支付宝服务市场 https://app.alipay.com/market/productIndex.htm 微信支付 https://pay.weixin.qq.com/wiki/doc/...
ionic repeat 重复最后一个时要执行某个函数【代码】
在DOM里ng-repeat那个重复的标签上写ng-init="$last?lastAction($index):‘‘"，用三目表达式来判断是不是最后一个，是最后一个就去执行lastAction()函数。$scope.lastAction = function(index){ console.log(index+" is the last one.....")}当采用ionic ion-slide-box时，当前的slide box上有一部分内容也要进行滚动，比如banner，滚动banner时肯定会触发整个页面的滚动，为了达到滚动banner而不带动整个页面的滚动的目的，可...
ionic 3 热更新 Hot Code Push【代码】
最近用ionic 3 做的app业务做的差不多了,突然想到以后app如果有更新该怎么搞?想到我们的app后期更新应该不大,,最多就是改改bug和增加下用户体验,如果只有一些小的更新,然后提交各个应用商店,需要长时间的审核...鉴于我们制作android平台,再而我们用的技术是前端3大件:html,css和js,因此我计划用热更新来搞. ionic热更新有两个插件:cordova-plugin-code-push 微软公司开发的插件(正好有一篇教程)cordova-hot-code-push ionic 官...
ionic 编译 gradle下载。
ionic 编译时一直从之前某个地址下载编译apk时需要的jar包。由于很久之前配置了本地的gradle仓库地址，连接外网时一直找不到jar包下载。程序卡在报错界面。 解决办法：找到环境变量gradle_home 发现没有init.gradle这个配置仓库的路径.后在用户的.gradle的文件下找到该文件夹.网上有说gradle的机制会为每个新的程序重新配置一个新的gradle.也算是某种解耦..更改完gradle地址.问题解决.原文：https://www.cnblogs.com/johnS/p/9290...
ionic 签名、打包
ionic build android --release// 生成签名文件keytool -genkey -alias runan.keystore -keyalg RSA -validity 1000 -keystore runan.keystore// 开始签名jarsigner -verbose -keystore runan.keystore -signedjar runan.apk android-release-unsigned.apk runan.keystore密码：phone原文：https://www.cnblogs.com/crazycode2/p/9821620.html
ng-class ionic【代码】
我发现 ng-class="{yourclass:true,outerclass:false}" 竟然不起作用...囧....幸好有Google ....1 <p ng-class="{{ class }}">First</p> 2 <p ng-class="getClass()">Second</p> 3 <p ng-class="class">Third</p> 4 <p ng-class="{ ‘red‘: true }">Fourth</p>控制器1 angular.module(‘app‘, []) 2 .controller(‘Ctrl‘, [‘$scope‘, function($scope) { 3 $scope.class="red"; 4 $scope.getClass = fun...
关于IONIC框架初认识
新进击的菜鸟程序猿首先就是配置环境咯，下载node.js,安装淘宝镜像在 cmd命令大全输入cnpm init cnpm install gulp --save-dev cnpm instal gulp-webserver --save-dev开启本地服务gulp webserve 当然前提是你先把大概的文件都构架好 css js (controllers services) view文件夹 lib这个直接放进去用 gulp.js拦截服务请求的直接利用tabs直接切换页面。<ion-nav-bar class="bar-dark" > <ion-nav-back-button><...
ionic框架对Android返回键的处理
在HybridApp移动跨平台开发中，android平台会遇到一些比较特殊并难以解决的问题，这些问题在原生应用开发中很easy， Android的返回键处理就是问题之一，假如我们要实现一个在很多App中都有的在主页按返回键弹出对话框提示用户退出应用的功能，在原生应用开发中是很容易的，只要在onKeyUp事件里面对返回键事件进行处理就可以了。按2次返回键退出应用的Java代码如下：private long exitTime = 0;@Override public boolean onKeyDown(...
ionic的开发打包自己APP的步骤
开发ionic混合app的流程！a:安装配置需要环境：java环境，Android ADT需要该环境，下载并配置jdk的环境变量：java_homec++的环境，node需要，node的底层是c++开发的；下载vs2016,并把c++环境勾选上即可下载安装ADT环境，打包Android包需要；安装node,下载插件时需要，npm的包管理机制；下载安装git,下载ng-cordova的插件所需要的；b:安装项目依赖： 在cmd命令下执行语句 安装cordova: npm install -g cordova;安装ionic环境：npm i...
Ionic发布成android
目前环境1、ant的版本是1.9.42、jdk的版本是1.73、ionic安装版本是1.5.54、cordova版本是5.1.1经测试，虽然ionic上面写的支持的最低版本是android-16，但是我发布的时候最低支持android-17,android-16每次都 编译失败，不知道是不是环境的问题。 修改android的发布版本需求修改如下文件中的targetSdkVersion：1、platforms\android\AndroidManifest.xml2、platforms\android\project.properties3、platforms\android\CordovaLib\An...
ionic【图】
Referenece:https://ionicframework.com/getting-started#cli 官网https://www.genymotion.com/ 安卓模拟器https://ionicons.com/ 图标库开始的时候，按照官网例子，搭载模板 首先确定安装了node 然后npm install -g ionic 安装ionic 按照模板 ionic start myApp tabs 启动项目 cd myApp ionic serve浏览器的调试http://localhost:8100/?ionicplatform=android 当这样的话，会显示Android的样式http://localhost:8100/?ionicplatfo...
ionic 调用restful API services时全局错误处理的实现 或自定义错误处理的实现【图】
往往我们的ionic程序需要调用API Service. 比如天气，地图等等。当这些API Service 不稳定或者不可访问时，我们可以通过在注册一个自定义的ErrorHandler， 来处理此类错误。 1. 将自定义错误处理类作为provider, 也就是Service. 在终端使用命令： ionic g provider GlobalErrorHandler . ionic generate 命令行定义可以参考此处2. 实现GlobalErrorHandler， 完整代码如下。 import { ErrorHandler, Injectable } from ‘...
ionic tabs隐藏完美解决【代码】
开发app过程中需要进行子页面tabs隐藏，网上找了N多方案，度娘出来的都是写指令， 但是测试中bug明显，于是墙外谷歌。。终于找到完美的方法，如下 tabs.html<ion-tabs class=" " ng-controller="TabsCtrl" ng-class="{‘tabs-item-hide‘: hideTabs}"></ion-tabs>controller里.controller(‘TabsCtrl‘, function($scope, $rootScope, $state) { $rootScope.$on(‘$ionicView.beforeEnter‘, function() {var statename = ...
一个简单移动页面ionic打包成app
先贴JS代码好了，缓动和调整透明度的功能,最后用ionic打包成应用就可以window.onload=function(){ search(); move(); calc();}function search(){ var search = document.querySelector(".hw_header_box"); var banner = document.querySelector(".img_content"); var height = banner.offsetHeight; var height1=2*height; var opacity = 1;// console.log(height1); window.onscroll=function(){ ...
ionic 散【代码】
ionic 安卓机上 tab 飘到上面问题angular.module(‘GR.app‘, [ ‘ngResource‘, ‘ionic‘ ]) .config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider){ $ionicConfigProvider.tabs.position(‘bottom‘);}]); //禁止侧滑事件$ionicSideMenuDelegate.canDragContent(false);ionic $ionicSideMenuDelegate 侧滑事件$scope.toggleLeft = function() { $ionicSideMenuDelegate.toggleLeft();};$ioni...
node+mongodb+ionic+cordova
node + mongodb1,环境 windows 1,install nodejs 2,install npm | cd npmjs node cli.js install -gf1.12.node 开发nmp install express -g | nmp remove express -gnpm install express-mongoose1,express -e myProject ejs change htmlvar ejs = require(‘ejs‘) ;app.engine(‘html‘,ejs.__express) ;app.set(‘view engine‘, ‘html‘); 3.ionic 开发 1,npm install -g cordova ionic 2,ionic start myApp tabs...