ionic2使用心得（1）

最新推荐文章于 2021-02-20 23:56:51 发布

etowaru

最新推荐文章于 2021-02-20 23:56:51 发布

阅读量1.7k

点赞数

分类专栏： ionic2 文章标签： ionic2 cordova ionic-native

本文链接：https://blog.csdn.net/etowaru/article/details/71171932

版权

ionic2 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

首先，重要的事情说三遍！跳墙再安装！

安装node.js并且更新NPM

安装ionic cordova ---------npm install ionic cordova

安装淘宝镜像----------------请自行百个度

创建ionic2项目 -----------------ionic start [ProjectName] --v2

如果失败，请使用如下命令:ionic start [ProjectName] --v2 --skip-npm

cd [ProjectName]

cnpm install --save

如果此时已经成功创建项目，那么使用如下命令:ionic serve -------------本地运行项目

平台支持：ionic platform add [Name]

通常来说我们只需要Android或者IOS

平台打包以及真机运行：ionic run android ----安卓真机运行

ionic run IOS ----IOS真机运行

ionic build android ----安卓打包

ionic build ios ----IOS打包

ionic2插件调用：

cordova第三方插件:(1)安装插件，如 cordova plugin add cordova-plugin-networkinterface

(2)查看该plugin文件夹下该插件目录中plugin.xml文件中的clobbers标签，这将影响到你如何使用它，如<clobbers target="window.networkinterface" />

(3)在需要的ts文件中增加declara let cordova:any，请注意该行需要放在import部分之后@Component之前

(4)在export中增加使用代码（请注意如果调用方式为window.XXX,调用时请将window改为“(<any>window)”）

附上某home.ts完整代码：

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

declare let cordova: any;

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public navParams: NavParams) {

}
getIPAddress(){
　　if('undefined' != typeof cordova){
　　　　(<any>window).networkinterface.getIPAddress(function(ip){
　　　　　　alert(ip);
　　　　});
　　}
}
}

html页面代码（请在任意正文位置加上就行）

ionic-native插件：

(1)请注意更新你的本地ionic-native/core，因为这个东西不支持update，所以只能先卸载再安装，命令如下：

npm uninstall @ionic-native/core

npm install @ionic-native/core --save

(2)安装你需要使用的插件（此处以camera为例）

cordova plugin add cordova-plugin-camera

npm install @ionic-native/camera --save

(3)在全局文件中配置,在src/app文件夹下的app.module.ts中

①添加导入（位置随便找个import的地方就行，推荐在import最下面）：import { Camera } from '@ionic-native/camera';

②在@NgModule中的providers中添加Camera(添加进去就行);

③参考官网说明进行实际使用

贴上contact.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';

declare let cordova: any;

@Component({
selector: 'page-contact',
templateUrl: 'contact.html'
})
export class ContactPage {

constructor(public navCtrl: NavController, private camera: Camera) {

}

options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}

takePicture() {
this.camera.getPicture(this.options).then((imageData) => {
let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
alert('Error');
});
}
}