ionic框架安装

ionic框架安装

导语

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

ionic主要包括三个部分：

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

1、ionic集成开发环境安装

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

ionic安装步骤说明

---

1. 全局安装cordova , ionic

   npm install -g cordova ionic

2. 使用Ionic官方提供的现成的应用程序模板，或一个空白的项目建立一个Ionic应用

   ionic start myApp tabs / blank / sidemenu

3. 使用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

2、Ionic Framework的一些命令行解释

1. ionic lib update

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

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

3. ionic serve [options]

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

1 2 3 4 5 6 7 8

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

1. ionic setup sass

   增长一个watchPatterns到ionic.project中。

2. ionic serve –lab

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

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

1、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

2、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

3、插件的使用

---

获取官方的插件：

• 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 / EAN1三、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 }