ionic框架安装

最新推荐文章于 2024-04-18 09:58:26 发布

chileique7275

最新推荐文章于 2024-04-18 09:58:26 发布

阅读量380

点赞数 1

文章标签：移动开发运维 git

原文链接：https://my.oschina.net/chinacaptain/blog/706605

版权

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－介绍与入门

导语

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

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

转载于:https://my.oschina.net/chinacaptain/blog/706605

chileique7275

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ionic框架安装

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

扫一扫