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 }