ionic框架安装

摘要:ionic框架安装 导语 ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android、iOS,计划支持:Windows Phone、Firefox OS) 的原生App应用 ionic主要包括三个部分: CSS框架 - 提供原生App质感的CSS样式模拟。ionic

ionic框架安装 导语

ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android、iOS,计划支持:Windows Phone、Firefox OS) 的原生App应用

ionic主要包括三个部分:

CSS框架 - 提供原生App质感的CSS样式模拟。ionic这部分的实现使用了ionicons图标样式库。 JavaScript框架 - 提供移动Web应用开发框架。ionic基于AngularJS基础框架开发,因此 自然地遵循AngularJS的框架约束;此外,ionic使用AngularJS UI Router实现前端路由。 命令行/CLI - 命令行工具集用来简化应用的开发、构造和仿真运行。ionic命令行工具使用了 Cordova,依赖于平台SDK(Android & iOS)实现将移动web项目打包成原生app。
由于ionic使用了HTML5和CSS3的一些新规范,所以要求 iOS7+/ Android4.1+。 在低于这些版本的手机上使用ionic开发的应用,有时会发生莫名其妙的问题。 一、ionic集成开发环境安装

需要下载并安装node.js。 地址:https://nodejs.org/en/download/

ionic安装步骤说明
全局安装cordova , ionic

npm install -g cordova ionic

使用Ionic官方提供的现成的应用程序模板,或一个空白的项目创建一个Ionic应用

ionic start myApp tabs / blank / sidemenu

使用Ionic tool 创建 ,测试,运行你的apps(或者通过Cordova直接创建),如果要创建android应用,把右侧创建代码中的ios改为android。

1 2 3 4

cd myApp ionic platform add ios/ android ionic build ios /android ionic emulate ios /android 二、Ionic Framework的一些命令行解释 ionic lib update

更新www/lib/ionic 目录的文件,如有项目中有bower,此命令会运行bower update ionic, 否则则会从CDN上下载文件并替换。

ionic start your_app_name [template]

创建一个项目,其中template可以是内置的模板类型:blank/sidemenu/tabs(default)三种,也可以是github地址:https://github.com/driftyco/ionic-starter-tabs(这叫ionoic-starter),或者是Codepen starter地址:http://codepen.io/ionic/pen/odqCz

可选的参数: -a your_app_name -i com.yourcompany.youapp -w (不要用cordova)

ionic serve [options]

启动一个本地的server,在浏览器中打开,并可监视文件变化,随时刷新浏览器。// 可以在主目录下的ionic.project文件的watchPatterns中配置要监视的文件夹。

1 2 3 4 5 6 7 8

{ "name": "myApp", "app_id": "", "watchPatterns": [ "www/js/*", "!www/css/**/*" ] }

ionic setup sass

增加一个watchPatterns到ionic.project中。

ionic serve –lab

在浏览器中打开ios和andriod的显示界面

ionic serv –address 68.52.96.10

在浏览器中打开ios和andriod的显示界面

angular config自定义服务注入

发表于2016-05-21

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

(function($){ $.module("m1",["ionic"]) .factory('dogmaCacheBuster', [ function() { return function(path) { console.log(path) return path + '?_=' + Date.now(); }; } ]) .config(function($stateProvider,dogmaCacheBusterProvider){ console.log(dogmaCacheBusterProvider.$get()("ddd")) $stateProvider .state("index",{ url:"/index", templateUrl:"index" }).state('main',{ templateUrl:"main" }).state("third",{ templateUrl:"third.html" }) }).controller("oneCtrl",function($scope,$state){ $state.go("main"); }) })(angular); cordova-介绍与入门

发表于2016-05-21

cordova-介绍与入门 导语

Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。
Cordova还提供了一组统一的JavaScript类库,以及为这些类库所用的设备相关的原生后台代码。Cordova支持如下移动操作系统:iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

一、PhoneGap和Cordova的关系

Cordova是PhoneGap贡献给Apache后的开源项目,是从PhoneGap中抽离出的核心代码,是驱动PhoneGap的核心引擎。有点类似Webkit和Google Chrome的关系。渊源就是:早在2011年10月,Adobe收购了Nitobi Software和它的PhoneGap产品,然后宣布这个移动Web开发框架将会继续开源,并把它提交到Apache Incubator,以便完全接受ASF的管治。当然,由于Adobe拥有了PhoneGap商标,所以开源组织的这个PhoneGap v2.0版产品就更名为Apache Cordova。(目前Adobe PhoneGap <===>Apache Cordova,似乎只是包名不一样而已,未来会有多大变化与改变,拭目以待吧!!)

apache cordova
adobe phonegap

二、Cordova配置安装
1. 创建Cordova工程

cordova create Hello com.51itcto.cordova Hello

1 2 3

第一个参数hello,指定目录名称。 第二个参数com.example.hello类似C#的命名空间,或Java的包名。(不太确定,读者自行鉴别,原文写的是a reversedomain-style identifier) 第三个参数指定了应用程序的显示标题。

cd Hello

cordova platform add android 2. 安装plugin cordova plugin addhttps://github.com/wildabeast/BarcodeScanner.git(二维码扫描) 3. 插件管理 cordova plugin add cordova plugin remove cordova plugin list 三、插件的使用
获取官方的插件: http://cordova.apache.org/plugins/ http://ngcordova.com/
1. 获取相机,相册 有两种方法获取拍照得到的图片 1,拍照返回64位的图片数据(destinationType: Camera.DestinationType.DATA_URL) 2,拍照返回图片文件的实际存储地址(destinationType: Camera.DestinationType.FILE_URI)
插件安装: cordova plugin add cordova-plugin-camera 方法说明:https://www.npmjs.com/package/cordova-plugin-camera

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

通过 ngCordova 提供的方法实现,拍照返回64位的图片数据 (成功了,可是图片数据即使100%的质量也很不清晰) var options = { quality: 50, destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.CAMERA, allowEdit: true, encodingType: Camera.EncodingType.JPEG, targetWidth: 100, targetHeight: 100, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false }; $cordovaCamera.getPicture(options).then(function(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData; }, function(err) { // error });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

拍照返回图片文件的实际存储地址(实验不成功,暂没找到问题) var options = { destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.CAMERA, }; $cordovaCamera.getPicture(options).then(function(imageURI) { var image = document.getElementById('myImage'); image.src = imageURI; }, function(err) { // error }); $cordovaCamera.cleanup().then(...); // only for FILE_URI 返回的图片地址信息为(file:///storage/emulated/0/DCIM/Camera/pic.jpg) 与选取图片文件插件方法返回的图片地址(data/data下)不一样 2. 二维码扫描 说明

这个插件采用的是开源版的zxing,如果性能、识别率不满足需求的话,建议使用Scandit,它提供了Community SDK,并且支持Platforms(iOS/Android)、Frameworks(Titanium/Xamarin/Phonegap/Worklight)。其中Community版的支持UPC-A / UPC-E、EAN8 / EAN13、QR Code。

1. 插件安装

cordova plugin addhttps://github.com/wildabeast/BarcodeScanner.git

2. 方法使用

1 2 3 4 5 6 7 8 9 10 11 12 13

function scanCode() { cordova.plugins.barcodeScanner.scan( function (result) { alert("We got a barcode\n" + "Result: " + result.text + "\n" + "Format: " + result.format + "\n" + "Cancelled: " + result.cancelled); }, function (error) { alert("Scanning failed: " + error); } ); } 3. 手机通讯录 1. 插件安装

cordova plugin add org.apache.cordova.contacts

2. 方法使用

//列表界面 var list = this.getList(); var options = new ContactFindOptions(); var fields = ["displayName", "phoneNumbers"]; if(filter){ options.filter = filter; }else{ options.filter = ""; } options.multiple = true; navigator.contacts.find(fields,function(contacts) { console.log('Found ' + contacts.length + ' contacts.'); var records = []; for(var i =0; i < contacts.length; i++){ var obj = { displayName: contacts[i].displayName, phoneNumber: contacts[i].phoneNumbers[0].value }; records.push(obj); } var store = new Ext.data.Store({ data: records, fields: ["displayName", "phoneNumber"] }); list.setStore(store); }, function onError(contactError) { alert('onError!'); },options); 4. 获取位置信息

cordova plugin addhttps://github.com/DoubleSpout/phonegap_baidu_sdk_location.git

Nginx+IIS6.0+Nodejs部署项目

发表于2016-05-20

服务器采用的是windows server 2003,有些项目希望采用nodejs来写服务端,但是试了很多次在windows上安装nodejs,安装不是很成功,最后发现需要采用nodejs 5.0左右的版本,最新的和最低的node版本都不行,所以推荐使用中间版本来搭建。但是如果采用node来做服务器端需要绑定域名,这个时候可以采用nginx来做代理。

1.Nginx配置多域名访问

使用taobao的nodejs源,taobao的地址:https://npm.taobao.org/

1 2 3

location /{ proxy_pass http://127.0.0.1:4001 }