美文网首页Ionic
ionic3 ts中引入第三方js文件详细教程[2018-01-

ionic3 ts中引入第三方js文件详细教程[2018-01-

作者: 柳暗花明又一匪 | 来源:发表于2018-02-09 10:13 被阅读25次

http://blog.csdn.net/z_pigeon/article/details/79112108

[1]放置文件

把引入的文件放到www下的assets目录下,这里引入的文件在重新编译过程中是不会被覆盖的,所以引入文件放到这里

[2]引入文件

在index.html下引入文件,注意修改的是src目录下的index.html,不是www目录下的,如果修改成www下的,会被src下重新编译的index.html覆盖掉.

   举例引入jquery(注意:文件路径是assets/)
 <script src="assets/jquery-1.7.2.min.js"></script>

[3]声明文件

(1)在src目录下建一个services(名字随意)文件夹,新建文件jquery.d.ts,后缀是.d.ts,注意这个,名字随意

(2)编辑该文件,写入(注意:这里的"$",其实用的是jquery的关键词,有时候引其他js的时候你不知道关键词是什么,没关系,请继续往下)

declare var $:any;  

[4]页面使用

页面引入:(注意:第一句就是引入,,注意是"///" ,看你文件自己位置,我的页面ts是在src/pages/home/下;第二个点,重要,引入这句话一定要放在ts文件内容最顶上,其他位置不起作用 )

1.  ///<reference path="../../services/jquery.d.ts"/>  
2.  import { Component } from '@angular/core';  

(2)页面使用$(function(){}),就能随意用,不会报错

[5]关键词选取问题

引入你的js后,写入声明后,在ts中调用你引入的文件中相关逻辑的时候,看看什么对象报错了,就把该文件声明关键词设置为该对象

例:引了一份pinchzoom.js的文件,但是使用的时候我这里RTP报错了,那么就是说该文件需要的关键词有RTP,那么我在编写它的声明文件.d.ts的时候就要把它写成 declare var RTP:any;就可以了.这类引入第三方js一般封装好对象应该只有一个,多个的话大家自行研究哈

$('div.pinch-zoom').each(function () {  
  new RTP.PinchZoom($(this), {});  
});

相关文章

  • ionic3 ts中引入第三方js文件详细教程[2018-01-

    http://blog.csdn.net/z_pigeon/article/details/79112108 [1...

  • ts中引入JS文件

    游戏中都是使用TS,公司的加密算法都是js写的。之前都是引入类,死活不成功。不知道是不是TS中引入JS类不行,要单...

  • html使用ts

    全局安装npm install -g typescript 引入到html中一个js文件,引入的js是ts文件例如...

  • TypeScript——实战1

    Timer.ts文件 JSTimer.js文件 time.html文件 注意:编写的是 Timer.ts 引入的是...

  • 在ts中引入js文件

    第一种是直接下载: 第二种是手动添加:大家可以根据自己项目的目录来放,我这里是放在了assets文件夹下: 【1】...

  • Vue-cli3中使用TS语法,以及使用例子

    并不是要把vue文件改为ts,而是可以在vue中写ts语法 ts有什么用? 类型检查、直接编译到原生js、引入新的...

  • 自定义类或函数的使用

    在ionic3项目根目录下新建一个文件:appconfig.ts,代码如下: 在使用的页面需要引入

  • 如何编写.d.ts这样的类型定义文件

    类型定义文件是帮助TS文件,去理解引入的JS库里的内容的。因为这些JS库里,没有TS要求的类型的概念。 我们写代码...

  • ZZOpenLibs改造

    ZZOpenLibs改造问题 问题 在vue文件的ts写法中,使用require引入libs里面的js,如下 由于...

  • vue中使用全局css变量

    1.简单粗暴型:直接在main.js(main.ts)中引入即可 2.通过配置文件引入(修改配置文件请重启项目) ...

网友评论

    本文标题:ionic3 ts中引入第三方js文件详细教程[2018-01-

    本文链接:https://www.haomeiwen.com/subject/bywyaxtx.html