ionic3中引入第三方js库的方法总结 (实用、赞）

雨点打透心脏的1/2处 2023-06-26 08:30 19阅读 0赞

原文出处:  [https://blog.csdn.net/qq\_37705048/article/details/85006740][https_blog.csdn.net_qq_37705048_article_details_85006740]  
延伸阅读：[ionic3 引入第三方js(步骤很简单)][ionic3 _js]

以jquery为例：

创建ionic3项目：ionic start ionic3-test tabs

**一、在使用的页面导入js文件路径；**

下载jquery.min.js文件，找到assets下面，创建js文件夹，将下载好的jquery.min.js放在js文件夹下，在使用的页面的ts头部引入文件路径，我是在home页面下引入并测试的。

下面是home.ts文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzA1MDQ4_size_16_color_FFFFFF_t_70][]

这个有可能会报错，那就使用下面第二种方法

**二、手动引入js文件；**

1、下载jquery.min.js文件，找到assets下面，创建js文件夹，将下载好的jquery.min.js放在js文件夹下，然后在index.html中引入，一定放在cordova.js下面  
![20181214170734695.png][]

2、在page文件目录下创建services文件夹，services文件夹下创建jquery.d.ts文件，文件里写入declare var $:any;

![20181214171028709.png][]

3、在需要使用的页面最顶部：  ///<reference path="../../services/jquery.d.ts"/>    ， 然后就可以使用jq了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzA1MDQ4_size_16_color_FFFFFF_t_70 1][]

**三、引入模块的方法，推荐使用;**

1、npm下载jquery:     npm install jquery --save  可以使用淘宝镜像cnpm, mac可能需要获取权限就加sudo

![20181214172158858.png][]

2、使用typings，使用第三方插件会提示类型和方法，在 Typescript 2.0 之后，推荐使用 @type 方式了，具体是： npm install @types/jquery  ，这一步骤不做不会影响使用。

![20181214172739573.png][]

3、在使用的页面顶部引入jquery模块；  import \* as $ from 'jquery'

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzA1MDQ4_size_16_color_FFFFFF_t_70 2][]

以上就是三种使用方法；最后引入成功！！  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzA1MDQ4_size_16_color_FFFFFF_t_70 3][]  
————————————————

[https_blog.csdn.net_qq_37705048_article_details_85006740]: https://blog.csdn.net/qq_37705048/article/details/85006740
[ionic3 _js]: https://blog.csdn.net/Z_pigeon/article/details/79112108
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzA1MDQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181214171709346.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzA1MDQ4,size_16,color_FFFFFF,t_70
[20181214170734695.png]: https://img-blog.csdnimg.cn/20181214170734695.png
[20181214171028709.png]: https://img-blog.csdnimg.cn/20181214171028709.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzA1MDQ4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20181214171255327.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzA1MDQ4,size_16,color_FFFFFF,t_70
[20181214172158858.png]: https://img-blog.csdnimg.cn/20181214172158858.png
[20181214172739573.png]: https://img-blog.csdnimg.cn/20181214172739573.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzA1MDQ4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20181214172938104.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzA1MDQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzA1MDQ4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20181214171346808.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzA1MDQ4,size_16,color_FFFFFF,t_70