IONIC - 技术教程文章

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...

【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 登录注册&#x8;模块采用的是 Wilddog 野狗通讯云的身份认证服务,不得不说各方面和 Google 收购的 Firebase 很像,十分简单易用。其中 User 有个 photoURL 字段是用来存放用户头像 URL 的,所以寻思着找了个免费的第三方图床(SM.MS)来存放用户头像。用到的 Cordova 插件是 &#x8;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

&#x8;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...