專案需求

最近開發的專案，需要一個webView，同時這個webView會需要引入一些專案中的資源：

• 一個本地的html檔案，作為webView的模板
• 兩張loading圖片，在圖片未載入的時候進行佔位
• jquery.js,scrollLoading.js 也是本地的，實現滾動載入圖片功能

然後就開始了漫長的Google歷程。

在webView中引入本地的html檔案

這裡最主要的一個webView的方法是：loadHTMLString:baseURL: 把HTML檔案的內容以字串的形式載入到webView裡面，然後解析。

// get the model which is a html file for the webView
NSString * htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString * htmlCont = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];

// load the html file to webView
[_webView loadHTMLString:htmlCont baseURL:nil];

通過上述方法，很方便的就能把一個HTML檔案載入到webView中，很簡單吧，接下來，來點進階功能！

在webView中引入本地的image檔案

這個功能的實現是承接上面那個方法的進一步擴充套件，最關鍵的是那個baseURL。先看實現程式碼：

// get the model which is a html file for the webView
NSString * htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString * htmlCont = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
    
// 獲取當前應用的根目錄
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
    
// 通過baseURL的方式載入的HTML
// 可以在HTML內通過相對目錄的方式載入js,css,img等檔案
[_webView loadHTMLString:htmlCont baseURL:baseURL];

在object-c裡面通過如上面的方式載入HTML檔案，指定了baseURL的值為程式的bundlePath，然後在HTML檔案裡面就可以自由的通過直接書寫標籤的方式載入圖片圖片檔案了

<img src="loading.png" />;

要注意的是：所有在應用內的資原始檔都是在baseURL的根目錄也就是此程式碼中的bundlePath的根目錄，所以圖片資源，不管在專案裡面放在哪個目錄結構下，在HTML內引用的時候，都是直接根目錄的。

baseURL到底是什麼東西？對此，我也很好奇，所以我NSLog了程式碼裡面的baseURL，然後得到的結果是：file:///Users/(使用者名稱)/Library/Application%20Support/iPhone%20Simulator/7.0.3/Applications/(一些大寫字母加連字元加數字的序列號)/(應用名).app/ 。然後我在終端裡面找到這個目錄，開啟一看，發現都是一些HTML，image，txt等靜態資源。

至此，在webView中插入本地image資源的功能已經實現了，下面是更有挑戰性的功能：新增js檔案

新增本地js檔案到webView中

這個實現說起來其實很簡單，因為不需要任何程式碼層面上的修改，只需要按上面新增image的方式，在script的src裡面直接寫js的檔名即可。

但是如果直接這樣寫，你就會發現js資源根本沒有被載入。到底image和js有什麼區別？看上面的圖片，可以看到預設在bundlePath裡面是沒有我引入到工程裡面的jquery.js和scrollLoading.js的。那麼，這個是不是導致js資源沒有被正確載入的原因？

Select .js file and in the “Detail” view unselect the bullseye column indicating it is compiled code

In the “Groups & files” view expand the “Targets” tree and expand the application then go to “Copy Bundle Resources” and drag the *.js files into it.

方法是有了，可是這種英文的描述，還沒有附加圖片，實在是讓人看不懂，大致知道的就是：js檔案在xcode裡面，預設是一種需要被編譯的檔案，這就導致它不會被放到我們剛剛放到的BundlePath(更專業的名稱應該是Bundle Resources)裡。

所以要解決的問題是，怎樣才能使得js檔案不被編譯並且放到Bundle Resources中。

期間為了理解上面那兩句英文而Google的經歷就不說了，直接說結果吧。

在xcode裡面，每個project都有至少一個Targets(多個的也有，但是我不懂)，在Targets裡面(開啟Targets的方式是在左側欄，點選project，在中間的內容區，就會出現project和Targets)，存放了一些資原始檔

在Build Phases下可以看到，跟本次內容關聯最大的有兩項：Compile Sources和Copy Bundle Resources。

在沒修改的情況下，展開Compile Sources就能看到找了很久的jquery.js和scrollLoading.js

開啟Targets(基於xcode5的介面)

展開Compile Sources後能看到兩個js檔案

接下來要做的很簡單，從Compile Sources中刪除兩個js檔案，再在Copy Bundle Resources中新增這兩個檔案，一切搞定。

想來(偷懶，不想Google繼續深入瞭解了)，Compile Sources是放置那些需要被編譯的檔案，.h,.m和冤枉的.js檔案等等，而Copy Bundle Resources裡面放的是一些資原始檔，在程式在執行時會引入的，同時在專案打包之後也依舊存在的檔案。

其他格式的資原始檔，在新增的時候也大致就是這個流程，不重複說了。

說完了，就這麼多了，也歡迎補充一些我說的不全面或者遺漏的地方，畢竟我還是個新手