ionic2 cordova插件、第三方JS库引入

来源:互联网 发布:软件项目工作量统计表 编辑:程序博客网 时间:2024/06/06 06:38

ionic2 cordova插件:

从ionic-native npm包导入要使用的cordova插件

1、首先命令行安装插件(项目工程根目录下):

ionic plugin add cordova-plugin-app-version 

2、.ts文件中import使用

import { AppVersion } from 'ionic-native';AppVersion.getAppName();AppVersion.getPackageName();AppVersion.getVersionCode();AppVersion.getVersionNumber();

ionic2 使用非ionic-native中的cordova插件:

ionic2中使用了typescript,所以需要在使用前先定义,
使用cordova的时候需要在import之后 @Component之前声明cordova
declare let cordova:any;
//使用cordova-plugin-themeablebrowser,import & 声明cordova后可使用以下方法:
cordova.ThemeableBrowser.open()

极光推送jpush-phonegap-plugin插件,使用window.plugins需要用以下方法:
(window).plugins.jPushPlugin.init();

Ionic2 TypeScript项目中导入第三方JS库:
Typings 的方式:
TypeScript 中引用之前的 JS 库还需要引入对应的类型定义,也就是.d.ts声明文件。
对于一些流行的 JS 库,相应地有了一个 Typings 库。Typings 库的作用就是将一些现有的 JS 库生成好了对应的定义文件,
可以通过 Typings 直接加载到项目中
命令安装:

npm install @types/LibraryName --save

1、命令行安装(项目工程根目录下)

npm install -g typingstypings search chart.jstypings install chart.js --save //typings install chart.js --source npmnpm install chart.js --save 

2、.ts文件import导入使用

import * as ChartJs from 'chart.js'; //import ChartJs from 'chart.js'; 

其他第三方 JS 库的引用:
方式1:
直接引入js文件(以百度地图库为例)
1、直接在项目的 index.html 中引用即可

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=申请的key值"></script>

2、.ts文件中declare var xxx 声明使用

declare var BMap;//然后就可使用百度地图 JS SDK 的功能了

方式2:
定义.d.ts方法使用(给js库从新定义声明文件):
1、定义一个.d.ts,声明要引用JS库里面定义的变量,变量名保持一致

declare var BitmapKit: any;

2、index.html里面导入JS

<script src="plugin/kitmapkit/bitmapkit.js"></script>

3、.ts文件头加入

/// <reference path="plugin/kitmapkit/bitmapkit.d.ts"/>let bitmapkit = new BitmapKit();
0 0
原创粉丝点击