1. 程式人生 > >ionic3 引入第三方外掛

ionic3 引入第三方外掛

[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]頁面使用

        (1)頁面引入:(                注意: 第一句就是引入,,注意是"///" ,看你檔案自己位置,我的頁面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一般封裝好物件應該只有一個,多個的話大家自行研究哈     
  1. $( 'div.pinch-zoom').each( function () {
  2. new RTP.PinchZoom($( this), {});
  3. });