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...
【Ionic+AngularJS 开发】之『个人日常管理』App（二）【图】
准备工作资源预装工具安装bower1npm install -g bower 安装ngCordova1bower install ngCordova （*由于网络获取资源的原因，后面几次建项目后都无法下载到，自己便复制了原来的ngCordova目录（到YourProject\wwww\lib目录下），发现也是可以使用的）下载好后，在项目的index.hmtl进行引用：1<script src="lib/ngCordova/dist/ng-cordova.js"> 日历工具FullCalendar 安装插件本项目需要（安装）的插件有：插件名说明扩展阅读cordova...
ionic的学习-02路由中的几个参数【图】
Part1 路由中的几个参数第一步：看几个参数的位置①ionic中是通过<ion-nav-view></ion-nav-view>实现不同模板渲染跳转的。②ionic中的<ion-nav-view></ion-nav-view>中的name属性对应位置关系===================华丽丽的分割线=================== 第二步：路由跳转的三种方式①$state.go(url)方式，括号里的参数为需要跳转的url地址attention：不要忘记在controller中注入$state ②ui-sref=""方式③<a href=""></a>中的href属性...
IONIC和Cordova安装、打包踩过的坑【图】
1、问题1：直接执行npm install -g cordova ionic，因为网络原因，执行不成功 解决方案：将npm映射到淘宝服务器：npm install -g cnpm --registry=https://registry.npm.taobao.org 注意：需要用管理员身份运行cmd 然后执行：cnpm install -g cordova ionic2、问题2：执行cnpm install -g cordova ionic命令时报错，缺少package.json 解决方案：执行npm init -y生成一个3、问题3：执行cnpm install -g cordova ion...
ionic框架Android平台，添加第三方module引用【代码】
1. android平台目录下的settings.gradle里面的默认内容是// GENERATED FILE - DO NOT EDIT include ":" include ":CordovaLib"如果直接修改此文件添加module引用，下次ionic cordova build android 命令，会复原回上面的配置所以需要在其他地方修改打开下面路径文件android/cordova/lib/builders/GradleBuilder.js找到这个地方// Write the settings.gradle file.fs.writeFileSync(path.join(this.root, ‘settings.gradle‘),‘/...
ionic3样例应用
https://github.com/jujunjun/ionic3-study 该应用包括的样例内容有：文件上传，上拉更新，下拉加载，弹出层，列表，加载中，栅格，按钮等。 php提供的文件上传接口需要加上下面代码：header(‘Access-Control-Allow-Origin:*‘); header(‘Access-Control-Allow-Origin:http://你的域名‘); header(‘Access-Control-Allow-Credentials:true‘);header(‘Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS‘);heade...
Ionic开发环境搭建【图】
Ionic开发环境搭建1.安装jdk1.1.安装【jdk-8u60-windows-x64.exe】到【C:\Program Files\】目录 1.2.jdk下载地址http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html或者百度一下jdk2.安装adt2.1.解压【adt-bundle-windows-x86_64-20140702.zip】到【D:\Program Files\】 2.2.adt下载地址http://www.androiddevtools.cn/3.安装ant3.1.解压【apache-ant-1.9.6-bin.zip】到【D:\Program Files\】 3.2.an...
Ionic android 底部tabs【代码】
ionic android tabs 默认显示在上部，如果要跟苹果一起统一在底部，那么可以在app.js添加配置1 .config(function($ionicConfigProvider) { 2 $ionicConfigProvider.tabs.position(‘bottom‘); 3 }) 原文：http://www.cnblogs.com/ediszhao/p/5841860.html
[分享] ionic小助手 V1.5（告别命令行，超强功能）【图】
ionic中文社区群：65048636欢迎大家来交流www.ionic-china.com ionic中文网 **注意：使用前请确保您已经安装部署好ionic 没有安装的看这里**Ionic_1.x 全套配置搭建开发环境教程(nodejs,jdk,androidsdk)做ionic项目开发时手动输入命令太麻烦 分享一个小助手给大家有了ionic小助手，再也不用手动输入命令啦。现在就来看看都能干什么吧。 先来看看界面（建议管理员运行助手 以免某些命令不能顺利执行）悬浮窗口 查看资料的时候双击它...
Ionic3学习笔记（十六）上传头像至图床【代码】
本文为原创文章，转载请标明出处个人做的开源 Demo 登录注册模块采用的是 Wilddog 野狗通讯云的身份认证服务，不得不说各方面和 Google 收购的 Firebase 很像，十分简单易用。其中 User 有个 photoURL 字段是用来存放用户头像 URL 的，所以寻思着找了个免费的第三方图床（SM.MS）来存放用户头像。用到的 Cordova 插件是 Camera 和 File Transfer，分别用来拍照、相册选择和上传图片，Cordova 插件的安装、导入、使用我就...
「Ionic」WebStorm的使用錯誤-【代码】【图】
前言：遇到這個錯誤，不要慌張，搶按照濤叔下面的方式處理就可以了。 1、Couldn‘t find ionic.config.json file. Are you in an Ionic project? 用WebStorm創建PhoneGap/Cordova App項目的是后，項目文件是不全的。如下圖： 全的目錄是下面這樣的解決辦法就是 我們直接 把一個 ionic.config.json 複製粘提進去就可以了。如果找不到這個文件那個就自己建一個吧。ionic.config.json裡面的代碼就兩行：{"name": "myApp","app_id":...
ionic build --release android
ionic bulid androidionic build --release androidkeytool -genkey -v -keystore demo.keystore -alias demo.keystore -keyalg RSA -validity 20000jarsigner -verbose -keystore /yourpath/demo.keystore -signedjar demo_signed.apk demo.apk demo.keystorezipalign -v 4 your_project_name-unaligned.apk your_project_name.apkSigning Your App ManuallyYou do not need Android Studio to sign your app. You can sign ...
ionic3 项目常用
ionic cordova platform add android ionic cordova build android —prod 【debug版本，无需签名】ionic cordova build android --prod --release 【发布版，需要签名（要使用jarsigner签名必须用release版本）】ionic cordova platform add iosionic cordova build ios —-prod 服务器密码：789456iop.MainActivity.java if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { getWindow().getDecorView().setSystem...
如何离线创建Ionic1项目
在创建ionic项目的时候，需要联网下载许多东西，由于墙的缘故，我们在创建、添加android平台、编译过程中，失败的可能性非常高，为解决这个问题，我创建了一个空的Ionic1 tab项目，并完成了上述三个步骤。基于这个项目，我们可以使用以下方式来离线创建自己的新项目。具体步骤如下： 新建一个项目文件夹，名字用你自己的项目名字，尽量不用中文，中文没测试过。下载并解压文件[com.larryLin.ionic1.rar]，并将解压后的文件拷贝到你...
angularjs 水平滚动选中按钮高亮显示 swiper和回到顶部指令的实现ionic【代码】
首先安装 swiper npm install --save swiper 或者 bower install --save swiper<link rel="stylesheet" href="../bower_components/swiper/dist/css/swiper.min.css" /> <script src="../bower_components/swiper/dist/js/swiper.jquery.min.js"></script>指令文件代码(function() {‘use strict‘;angular.module(‘campus.core‘).directive(‘swiperSlide‘,swiperSlide).directive(‘goToTop‘,goToTop);swiperSlide.$injec...
关于ionic3做微信公众号
前段时间用ionic3做了一个微信商城，收尾的时候好多问题，就推翻了。。谈一下我的感想吧ionic3深度定制的一套框架，刚开始我的3.0.1当时还可以进行browser端的build,到最近3.6.0版本取消这个端的build命令，导致项目没有办法aot和prod 导致加载文件很大，移动端的流量金贵，虽然用了懒加载，一次性加载的数据还是有2M左右，项目打开的速度真的是龟速，还有ionic3没有路由使用了页面堆叠的方式，一开始一直以为这是路由，真的很傻很...
在Mac OS X上安装Ionic
安装xcode(从app store下载，用于编译调试ios平台app)安装node.js(npm)安装ionic(sudo npm install -g ionic)安装cordova(sudo npm install -g cordova)安装iOS模拟器连接工具(sudo npm install -g ios-sim)安装iOS设备调试连接工具(sudo npm install -g ios-deploy)安装android sdk(从官网下载或者从现有目录拷贝，用于编译调试android平台app)设置相关环境变量：打开环境变量配置文件：open ~/.bash_profileexport ANDROID_SDK=$...
ionic app 真机调试
ionic项目开发完成之后需要在手机端测试效果，但是如果出现问题又不知道问题在哪，需要借助chore浏览器打印查看的问题需要用新版的chore浏览器（至少要v.45以上）1.将app安装到手机并打开手的开发者模式，将你的app在手机上允许手机调试模式；2.在浏览器打开chrome://inspect/#devices网址，进去选择打开你的手机，第一次可能需要FQ，此后就不需要了，3.点开之后就是相当于在pc端测试了，在手机上的操作，报错都会在浏览器的consol...