xcode,在webView中引入本地html,image,js,css文件的方法(ios自學筆記)

項目需求

最近開發的項目,需要一個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文件

這個功能的實現,很大程度上是借鑑了這篇文章:UIWebView – Loading External Images and CSS。大家可以去看看這篇文章,或者看我下面的繼續描述。

這個功能的實現是承接上面那個方法的進一步擴展,最關鍵的是那個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等靜態資源。

bundlePath和其中的內容展示

至此,在webView中插入本地image資源的功能已經實現了,下面是更有挑戰性的功能:添加js文件

添加本地js文件到webView中

這個實現說起來其實很簡單,因爲不需要任何代碼層面上的修改,只需要按上面添加image的方式,在script的src裏面直接寫js的文件名即可。

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

在這篇文章:How to load a local .CSS file & JavaScript resources using iPhone UIWebView Class和這篇文章iPhone基於lightbox的圖片放大特效和網頁佈局中,都提及到一個

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 SourcesCopy Bundle Resources

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

打開Targets(基於xcode5的界面)
打開Targets(基於xcode5的界面)

展開Compile Sources後能看到兩個js文件
展開Compile Sources後能看到兩個js文件

接下來要做的很簡單,從Compile Sources中刪除兩個js文件,再在Copy Bundle Resources中添加這兩個文件,一切搞定。

想來(偷懶,不想Google繼續深入瞭解了),Compile Sources是放置那些需要被編譯的文件,.h,.m和冤枉的.js文件等等,而Copy Bundle Resources裏面放的是一些資源文件,在程序在運行時會引入的,同時在項目打包之後也依舊存在的文件。

其他格式的資源文件,在添加的時候也大致就是這個流程,不重複說了。

發佈了39 篇原創文章 · 獲贊 15 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章