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中配置要监视的文件夹。

{
  "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

(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

三、插件的使用

获取官方的插件：

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

通过 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  
  });

拍照返回图片文件的实际存储地址（实验不成功，暂没找到问题）
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. 方法使用

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
}

ionic框架安装

ionic框架安装

导语

一、ionic集成开发环境安装

ionic安装步骤说明

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

angular config自定义服务注入

cordova－介绍与入门

cordova－介绍与入门

导语

一、PhoneGap和Cordova的关系

二、Cordova配置安装

1. 创建Cordova工程

2. 安装plugin

3. 插件管理

三、插件的使用

获取官方的插件：

1. 获取相机，相册

有两种方法获取拍照得到的图片

2. 二维码扫描

说明

1. 插件安装

2. 方法使用

3. 手机通讯录

1. 插件安装

2. 方法使用

4. 获取位置信息

Nginx+IIS6.0+Nodejs部署项目

1.Nginx配置多域名访问

你可能感兴趣的:(ionic框架安装)