IONIC - 技术教程文章
【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...
ionic imgBase64【代码】
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 70, destinationType: destinationType.DATA_URL,targetWidth: 250,targetHeight: 250,correctOrientation:true });function onPhotoDataSuccess(imageData) {saveImageToDB(imageData,1);smallImage1.style.display = ‘block‘;smallImage1.src = "data:image/jpeg;base64," + imageData;}var imagePath = "img/OBseverLOGO.png";function convertIm...
ionic 安装本地插件极光推送【代码】【图】
问题：按照官方文档的步骤假如把插件保存到了D:\push\jpush，当执行到cordova plugin add D:\push\jpush的时候，ionic 不是从本地目录安装，而是从registry.cordova.io上搜索!!! 原因：待查（难道是‘\‘是特殊的转义字符？请大神指教！） 解决方法：把路径中的 ‘\‘ 改为 ‘/‘ ，完美运行cordova plugin add D:/push/jpush注：在这个帖子里 http://ionichina.com/topic/54f96e7b59a9bdef119234a1 也没有指出这个问题，下面有我的...
ionic start 创建ionic项目报错，及解决过程【代码】【图】
问题描述：前一次创建利用命令行创建ionic项目一次性成功，第二次没有运行：$ npm install -g ionic cordova直接运行：ionic start ionicDemo出现上图错误： × Running command - failed!Exception: npm ERR! path C:\work\ionicdemo\node_modules\fsevents\node_modulesnpm ERR! code EPERMnpm ERR! errno -4048npm ERR! syscall scandirnpm ERR! Error: EPERM: operation not permitted, scandir ‘C:\work\ionicdemo\node_modul...
关于ionic中几个问题【代码】
第一、每个页面的独立样式style标签不能写在ion-view外面，否则会出现路由问题，建议写在ion-content后面，例如下面的例子中，如果style但在ion-view中的话会出想路由问题，显示不了返回和标题之类的<ion-view view-title="首页"><ion-content class="has-header mainPage"><div class="adver_con" ng-if="isShowAdver"><ion-slide-box class="slideBox" auto-play="true" show-pager="false" does-continue="true" slide-interval...
ionic3 懒加载在微信上缓存的问题【图】
1.懒加载是什么？ 在ionic2中所有的组件、模块、服务、管道等都堆积在app.module.ts模块中，在页面初始化的时候会一次性加载所有的资源，导致资源过大，页面渲染缓慢，也导致app.module.ts混乱，不美观，不易维护，不适用于结构繁多、业务复杂的项目。 懒加载的出现，使得在跳转到对应页面的时候加载对应页面的js、css、html,这样每个页面都是一个模块，只有在需要的时候才会加载，大大缓解了首屏的压力。2.懒加载的使用： ...
ionic 使用mobisscrolls，实现日期选择的插件【代码】【图】
废话不多说，直接说用法：1，先下载mobisscrolls的破解版，下载地址，链接：http://pan.baidu.com/s/1boSKf51 密码：5dft当然你也可以去官网下载，不过官网的是要收费的。官网：https://demo.mobiscroll.com/但是官网有一些简单的代码例子贴出来了，可以查看调用，点击链接直达https://demo.mobiscroll.com/v3/angular/datetime#demo=time&theme=material2，下载jquery，你可以到官网下载，或者直接在项目里面使用npm、bower安装；...
ionic中使用Cordova Uglify 压缩js与css【代码】
参照：https://www.npmjs.com/package/cordova-uglify安装：npm install cordova-uglify安装完成之后，打开：hooks/uglify-config.json{"alwaysRun": true,"recursiveFolderSearch": true,"foldersToProcess": ["js","css",],"uglifyJsOptions": {"compress": {"drop_console": true},"fromString": true},"cleanCssOptions": {"noAdvanced": true,"keepSpecialComments": 0} }修改：alwaysRun": true,运行：cordova build android...
ionic----------------------------------混合App开发
混合app开发工具： ionic、H5+(网上打包)、appcan原生App开发：react native（用先进的js(es6)构建出来的原生app） 、weex(基于vue，优酷使用了weex)模板、组件相关网站：ant.design、主题森林、awesomes1.下载项目并打包2. 原文：http://www.cnblogs.com/luxiaoxiao/p/6428679.html
Ionic Js十六：滚动条【代码】【图】
ion-scrollion-scroll 用于创建一个可滚动的容器。<ion-scroll[delegate-handle=""][direction=""][paging=""][on-refresh=""][on-scroll=""][scrollbar-x=""][scrollbar-y=""][zooming=""][min-zoom=""][max-zoom=""]>... </ion-scroll> ?HTML 代码<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px"><div style="width: 5000px; height: 5000px; background: url(‘http://www.runoob.com/try/demo...
[转]Ionic + AngularJS angular-translate 国际化本地化解决方案
本文转自：http://www.cnblogs.com/maoyazhi/p/4332362.html欢迎访问我们的网站，网站上有更多关于技术性的交流：http://www.ncloud.hk/技术分享/ionic-plus-angularjs-angular-translate-国际化本地化解决方案/一、手动切换语言1.在app.js文件中首先要加上一个参数：?1angular.module（’passbox’,[‘ionic’,’pascalprecht.translate’]）2.需要引用js文件?1<script src=”js/angular-tran...
161913、ionic + 高德地图定位【代码】
实例一：var AMapArea=document.getElementById(‘amap‘);AMapArea.parentNode.style.height="100%";//$scope.AMapId=‘container‘;$scope.mapObj;//存放初始化的地图对象//$scope.initAMap=function(){var position=new AMap.LngLat(116.397428,39.90923);$scope.mapObj=new AMap.Map("container",{resizeEnable: true,zoom: 14,center: [116.39,39.9]});$scope.mapObj.plugin([‘AMap.Geolocation‘], function () {var geoloc...
配置 Ionic环境【图】
本博客只适合win7 系统 准备 必须要有 注意了！！！！//注意所以路径均不支持中文 1.安装JSK （jsva环境） 默认安装位置 如果是32位操作系统 需要安装32bit版的JDK C:\Program Files\Java\jdk1.8.0_111 在终端中打命令查看 jdk版本号 2. 安装安卓环境 傻瓜教程不用说了 重要的几步说下 要把下面的对勾给去掉要不然的话会每次打开一次就会提示一下 ...
ionic -v2版本项目结构【代码】
myApp │ config.xml //项目配置文件，包名、名称、minSdkVersion等都在此处配置 │ ionic.config.json │ package.json //项目依赖文件列表 │ tsconfig.json │ tslint.json │ ├─hooks │ ├─node_modules //项目依赖文件 │ ├─platforms //项目添加的平台 ├─resources //项目图标 │ │ icon.png //安装应用后桌面图标 │ │ splash.png //打开APP后的闪屏图片 │ │ │ ...