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

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), {});  
});
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • core package 概要:Core是所有其他包的基础包.它提供了大部分功能包括metadata,templa...
    LOVE小狼阅读 2,854评论 0 3
  • 摘要 该配置文件定义了支持高质量音频分发所需的Bluetooth®设备的要求。这些要求以终端用户服务的方式表达,并...
    公子小水阅读 10,399评论 0 4
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,502评论 19 139
  • 如果感到空虚,该怎么才能让自己逃离这种状态?
    小丑74033阅读 292评论 4 0
  • 我家二宝上六年级了。起初,宝宝的心气儿很盛,情绪很高昂,也许是跟着妈妈上学,绝大多数老师都认识的缘故,那心情是相当...
    赵妍华太阳花阅读 721评论 4 5

友情链接更多精彩内容