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 add https://github.com/wildabeast/BarcodeScanner.git (二维码扫描)

3. 插件管理

cordova plugin add
cordova plugin remove
cordova plugin list

三、插件的使用

获取官方的插件：

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 add https://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 add https://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 }

来源：oschina

链接：https://my.oschina.net/u/1582832/blog/706605

标签

ionic

cordova

phonegap

android开发

android框架

软件

contacts