Contents
×
MediaCenter Development
  •  
    1 Ionic2研发笔记
    •  
      1.1 用ionic命令创建工程和编译
    •  
      1.2 程序调试
    •  
      1.3 Ionic2的icon
    •  
      1.4 添加pages/photo
    •  
      1.5 测试cordova的camera插件
    •  
      1.6 相册读取
  •  
    2 待归类
    •  
      2.1 自己写cordova-plugin

MediaCenter Development

Keywords: ionic2
Original published url: http://www.geiliedu.com/manual/29
Shared: Visits: 468 Created at: 2016.12.20 Updated at: 2016.12.30 Author: geiliedu(282055808@qq.com)

1 Ionic2研发笔记

1.1 用ionic命令创建工程和编译

ionic start MediaCenter --v2

该命令在mac环境中会自动添加ios平台。需要用下列命令添加android平台

ionic platform add android

build命令,生成ios的ipa文件和android的apk文件。ipa需要事先在xcode中对代码做签名。

xcode代码签名的方法是,先执行一次ionic build ios --device(报错没关系,主要是生成签名相关的配置),然后启动xcode并打开platforms/ios/MediaCenter.xcodeproj目录。 pic

编译ios的ipa的命令:

ionic build ios --device

看到如下信息就表示成功了: pic

编译android的apk的命令:

ionic build android --device

看到如下信息就表示apk编译成功了: pic

1.2 程序调试

  • 浏览器中调试
ionic serve
  • Android模拟器调试
ionic emulate android -c -s -l

其中-c表示app的log信息在控制台输出;-s表示app的服务器端log信息;-l表示代码修改后会自动加载。

  • Ios模拟器调试
ionic emulate android -c -s -l
  • Android真机调试:安卓设备用usb数据线连电脑,用adb命令安装到安卓手机
adb install -r /Users/fengyh/.../build/outputs/apk/android-debug.apk
  • Ios真机调试:ios设备用usb数据线连电脑,用xcode打开工程,IDE中选设备然后点运行。

1.3 Ionic2的icon

1.4 添加pages/photo

  • 添加目录
  • 仿照pages/home的写法,导出PhotoPage类
  • 在pages/tabs到导入PhotoPage类,并用PhotoPage替换HomePage作为tab1Root的值
  • app/app.module.ts中导入PhotoPage类,并在ngModule中的declarations和entryComponents中加入这个类
  • 经上述步骤,页面会看到PhotoPage替换了HomePage
  • 删除HomePage相关的文件和导入

1.5 测试cordova的camera插件

  • 添加插件
ionic plugin add cordova-plugin-camera --save
  • 在photo.ts和photo.html中添加代码完成照相和从相册取照片的测试

1.6 相册读取

$ ionic plugin add cordova-plugin-photos --save

对于android

安装

import { Component } from '@angular/core';
import { NavController, NavParams, Platform } from 'ionic-angular';
import {Camera} from 'ionic-native';
declare var Photos: any;
@Component({
  selector: 'page-photo',
  templateUrl: 'photo.html'
})
export class PhotoPage {
  cameraData: string;
  photoTaken: boolean;
  cameraUrl: string;
  photoSelected: boolean;
  itemList: any[];

  constructor(public navCtrl: NavController, navParams: NavParams, public platform: Platform ) {
    this.photoTaken = false;
  }

  albumList (){
    console.log('albumList called');
    this.platform.ready().then(() => {

      Photos.collections({"collectionMode": "ALBUMS"},
        function(albums) {
          albums.forEach(album=>{
            console.log('id: '+album.id+ ', name: '+ album.name);
          });
        },
        function(error) {
          console.error("Error: " + error);
        });
    });
  }

2 待归类

2.1 自己写cordova-plugin

因项目需要用到udp的广播和收发,现有的udp相关的cordova插件不合适,所以需要自己写插件。 - 参考资料:

http://www.benripley.com/development/ios/udp-broadcasting-on-iphone-using-bsd-sockets/
https://github.com/simonyeldon/PGWakeOnLanPlugin
http://cordova.apache.org/docs/en/latest/guide/hybrid/plugins/index.html
https://taco.visualstudio.com/en-us/docs/createplugintutorial/
  • 安装plugman
$ npm install -g plugman
  • 创建cordova-plugin-mcudp框架
plugman create --name MCUdp --plugin_id cordova-plugin-mcudp --plugin_version 0.0.1