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

时间:2024-04-12 14:01:30

原文出处:  https://blog.csdn.net/qq_37705048/article/details/85006740
延伸阅读:ionic3 引入第三方js(步骤很简单)

以jquery为例:

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

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

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

下面是home.ts文件

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

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

二、手动引入js文件;

        1、下载jquery.min.js文件,找到assets下面,创建js文件夹,将下载好的jquery.min.js放在js文件夹下,然后在index.html中引入,一定放在cordova.js下面
ionic3中引入第三方js库的方法总结 (实用、赞)

 

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

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

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

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

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

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

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

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

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

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

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

 

 

以上就是三种使用方法;最后引入成功!!
ionic3中引入第三方js库的方法总结 (实用、赞)
————————————————