二維碼掃描  最近有一個項目用到了 二維碼的掃描  總結一下 記錄一下 1.  ionic platform add ios 2. 添加插件 cordova plugin add https://github.com/wildabeast/BarcodeScanner.git 3.添加ngcordova.min.js 到www文件夾下:在index.html 中引用ngcordova.min.js 和在app.js中聲明一下ngcordova           這裏略過..... 4. 在ap…

拍照是經常用到的,所以記錄一下 拍照的代碼... 1. ionic start camera blankcd camera ionic platform add ios 2. 添加插件,這裏很熟悉.... cordova plugin add org.apache.cordova.camera 3. 可以從這裏下載 ngcordova.min.js 或者ngcordova.js 然後添加到www/lib/ionic/js 文件夾下 (不強求....) 4.在index.html 引用ngcord…

ngCordova的安装配置 官网提供了两种安装的方法: 1. 使用bower来安装 2. 下载zip文件 推荐使用bower安装,在使用bower之前,我们电脑中需要先配置bower.bower的配置非常简单: bower简介: Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源. 准备工作: 安装node环境:node.js 安装Git,bower从远程git仓库获取代码包:g 安装bower: 使用npm,打开终端,输入…

幾乎每個APP都會有地圖 所以在這裏記錄一下 1.在index.html 中 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script> <!-- cordova script (this will be a 404 during development) -->…

windows下安装配置 npm install -g ionic npm install -g cordova ionic start myproject cd myproject ionic platform add Android ionic build android ionic emulate android (build emulate可合并执行: ionic run android ) mac下安装配置 准备工作 安装 xcode及命令行工具 Xcode -> Preference…

实现这个功能需要四个步骤: 步骤一: 说明:因为需要和手机的硬件(返回按钮)打交道,而ionic本身是不具备该功能的,但是有一个东西可以:ng-cordova插件,这个插件是phoneGap为了能让ionic操作硬件而为ionic量身打造的一款插件,只要安装上这个插件,我们的ionic应用就具备了拍照,浏览图库,监听返回按钮等等功能. 操作:按照这个网址http://ngcordova.com/docs/install/上面说的安装好ng-cordova插件 步骤二: 说明:上述的ng-cord…

转自:http://blog.csdn.net/i348018533/article/details/47258449/ 折磨的两个月!Ionic从零单排,到项目发布!遇到了很多问题但都一一解决了,此篇文章留作记录. 当初想着因为项目不大人力足够的并且因为团队没有移动开发经验的情况下,是不是能够是用hybrid app来代替原生来完成这个项目,经过一些技术调研之后选择了Ionic.当时是对Ionic一无所知,凭借一些盲目的自信,想着方正有开发文档能有什么问题呢.现在想想都觉得当时有点冲动万一中间…

在Ionic官网找到的学习资源:http://blog.ionic.io/learning-ionic-in-your-living-room/ 网上的文章比较多,但是很多时候我们很难找到自己需要的.下面这些资源覆盖面很广,看一下有没有你需要的: PS:嫌麻烦的可以直接在这里找:http://thompsonemerson.github.io/ionic-collection/ 太多了,就不一一翻译了,哪些英文不懂的就百度或留言 Ionic Basics Hello World: Your Fi…

上篇通过更新文件升级APP,如果遇到了比如更新插件之类的问题,上篇是无法解决的,所以为了解决这个问题,需要下载apk文件升级APP.   1.配置文件如下:{'appVersion':'1.0.0','content':'1.更新app信息展示<br>2.修复XXX'} 2.安装ngCordova,下载地址:https://github.com/driftyco/ng-cordova 1.将ng-cordova.js 拷贝到你的lib文件夹下,然后在index.html文件中的cordova.…

https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git 从上面的连接下载 插件 1.肯定是要加入 下面的那个文件的吖 从这里下载 ngCordova.min.js 2. 不要忘记了 在app.js 中注入 ngCordova angular.module('starter', ['ionic', 'ngCordova']) 3. 在控制器中  注意:不要忘记注入  $cordovaSocialSharing ,不然会…

1.Ionic环境安装 Ionic开发是依赖于Nodejs环境的,所以在开发之前我们需要安装好Nodejs.下载安装:http://nodejs.org/ 安装完成之后打开PowerShell输入命令node -v和npm -v验证是否安装成功,如果返回版本号则说明成功. 在PowerShell命令行中执行: npm install -g cordova ionic 1 1 这是使用npm包管理器安装cordova和ionic,-g的意思是全局安装,全局安装后在PowerShell中任何目录下都…

准备工作 资源 预装工具 安装bower npm install -g bower 安装ngCordova bower install ngCordova (*由于网络获取资源的原因,后面几次建项目后都无法下载到,自己便复制了原来的ngCordova目录(到YourProject\wwww\lib目录下),发现也是可以使用的) 下载好后,在项目的index.hmtl进行引用: <script src="lib/ngCordova/dist/ng-cordova.js"> 日…

本章主要关注cordova的各种插件,利用好手机(移动设备)的原生功能.首先cordova是一个将web网页内嵌到原生app的平台(核心功能),然后cordova拥有的插件系统扩展了核心功能. Cordova插件即插即用.有一些由官方项目组提供支持,有很好的维护.有一些是社区提交并维护,也许维护不那么及时,那么在使用前最好确认一下插件是否能在当前cordova正常工作(cordova插件和cordova版本匹配). 本章包含 2.1插件使用考虑的问题 2.2安装cordova插件 2.3使用co…

windows下安装配置 npm install -g ionic npm install -g cordova ionic start myproject cd myproject ionic platform add Android ionic build android ionic emulate android (build emulate可合并执行: ionic run android ) mac下安装配置 准备工作 安装 xcode及命令行工具 Xcode -> Preference…

Using Local Notifications In Your Ionic Framework App 配置好ng-cordova先 <script src="lib/ngCordova/dist/ng-cordova.js"></script> <script src="cordova.js"></script> var ionicApp = angular.module("ionic", […

安装cordova插件: cordova plugin add cordova-plugin-network-information 在app.js 的run()里面的function()注入$cordovaNetwork,然后就可以监听网络的链接状态和断开状态了,部分代码如下: .run(function($ionicPlatform,$state,$ionicPopup,$ionicLoading,$rootScope,$ionicHistory,$ionicViewSwitcher,$co…

在一些涉及支付功能的app,一般需要绑定银行卡,除了靠用户手动输入银行卡号,用手机扫描银行卡也是一种常用的手段,查阅了写资料,发现ionic有CardIO插件可以实现这个功能,就兴致冲冲去尝试,结果有些失望.下面介绍一下如何在ionic中使用CardIO实现扫描银行卡功能相关CardIO插件的ngCordova说明 1.在入口文件main.js 中 const app = angular.module("app", ["ionic", "ngCordova…

详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-4-canvas2imageplugin/ 在前面几篇文章中简单写了一下,在项目中怎么实现扫描的功能和将信息转化为二维码的功能,现在来介绍一下怎么将生成的二维码保存到手机的本地,这样关于二维码的内容基本上就全面了,好开心~~! 同样的,我还是想说,首先我这个是做基于ionic+ngCordova+Anjularjs的项目,所以,希望大家在看之前已经了解…

拨打电话: <access origin="tel:*" launch-external="yes" /> 发邮件: <access origin="mailto:*" launch-external="yes" /> 发短信 <access origin="sms:*" launch-external="yes" /> 调用照相机: 1.配置环境,配…

原文档请看http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0/ 1.首先下载这个插件: 可以在package.json文件中添加“cordova-plugin-device"来添加,也可以直接在ngCordova官网里找到相应的命令来下载, 命令为: cordova plugin add cordova-plugin-camera 2.在ionic项…

之前项目中需要使用到定位功能,前边的文章提到的坐标位置是有问题的,是国际坐标,国内的环境使用google地图会出现问题,所以需要使用国内的地图进行坐标解析,因为国内和国外的坐标体系不一致,需要通过转换才能使用[具体原因请到网上自由查找] 1.先需要安装插件,在项目的根目录下运行命令 cordova plugin add cordova-plugin-geolocation然后这里需要注意,你的会计注入需要加入ngCordova才能使用,否则不能操作设备的 2.控制器中注入$cordovaGeol…

使用phonegap开发APP的优劣在此不必细说,快速,简单,跨平台,以及随着iOS,Android本身对webview优化所带来的不错的性能,便是其独有的优势.而且私以为在目前激烈而又变化快速的移动APP市场环境下,用phonegap来开发APP未尝不是一种低成本mvp的方案,快速发布,成王败寇^-^ 为什么选用ionic 其中ionicframework便是phonegap开发hybrid APP技术中的一员新秀,甚至可以说是一员虎将,而且免费且开源. Ionic的优势非常显著: 性能优异…

Ionic 框架介绍 Ionic是一个基于Angularjs.可以使用HTML5构建混合移动应用的用户界面框架,它自称为是"本地与HTML5的结合".该框架提供了很多基本的移动用户界面范例,例如像列表(lists).标签页栏(tab bars)和触发开关(toggle switches)这样的简单条目.它还提供了更加复杂的可视化布局示例,例如在下面显示内容的滑出式菜单.Ionic 自动升级APP一.准备工作 1.Cordova插件: cordova plugin add https:/…

angular.module('starter', ['ionic', 'route', 'config', 'global', 'commonJs', 'ngCordova']) .run(['$ionicPlatform', '$rootScope', '$location', '$timeout', '$ionicHistory', 'CommonJs', '$cordovaToast','$cordovaKeyboard', function ($ionicPlatform, $root…

Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表展示一周搜索引擎抓取变化的需求,因为之前使用过 Chart.js, 所以去查了些资料果然是有既有的模块的. Angular Chart 就是基于 Chart.js 以及 Angular 构件的图标展示组件. Angular Chart 的使用 分别下载 Chart.js 和 Angular Chart,下载…

在ionic项目中,如果想实现定位功能,可以使用ng-cordova提供的cordova-plugin-geolocation. 但由于高墙的缘故,国内andorid环境下,此插件不起作用(ios环境下可用). 国内比较好的是现实使用百度地图提供的API,来实现定位,以及地图的一系列扩展功能. 现在我们使用'Weizhe He'提供的cordova-qdc-baidu-location来尝试创建简单的定位app. Stpe1:创建一个项目(此处使用的是tab类型的项目,创建方式可参照我前一篇如何…

一.简介 1.Ionic是什么 IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用.提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择.Ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架.Ionic框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台…

最近接手了一个app任务,由于不懂android和ios,只想简单点写代码,所以,最终采用了基于H5的web框架:ionic + cordova(也叫phonegap)来开发.app的设计中有一个扫描二维码的功能,各种搜索之后,找到了一个cordova的插件,就是barcodescanner啦.代码如图: 可是不知道为什么,用安卓真机测试的时候,会打开两次摄像头(打开第一次,闪一下,又打开一次).由于完全不熟悉这个框架的东西.百度.博客.官方文档,翻了N久,始终没找到解决的办法.困扰了一天,最后…

参见:http://blog.csdn.net/Luo_xinran/article/details/52164480 ngCordova是基于Cordova封装的AngularJS的调用本地设备接口的模块,可以调用70+个常用设备接插件 ngCordova的安装配置 官网提供了两种安装的方法: 1. 使用bower来安装 2. 下载zip文件 bower简介: Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源. 备工作:…

ionic是一个以cordova为基础的html5前端框架,功能强大,能够快速做出与原生开发相似的应用. 一,安装和配置 1,安装(前提:cordova环境配置完成) npm install -g ionic 2,创建项目(空项目) ionic start [ProjectName] blank 创建项目的选项包括:blank,sidemenu,tabs,maps 3,添加平台支持 ionic platform add android ionic platform add ios 4,编译和测试…