TWaver - 專(zhuān)注UI技術(shù)

構(gòu)建iOS App有很多技術(shù)方式可以選擇，本文介紹基于UIWebView的Cocoa Touch組件嵌入HTML頁(yè)面的方式實(shí)現(xiàn)的一個(gè)iPhone
App例子。文中將穿插iOS的基本內(nèi)容，TWaver HTML5的基礎(chǔ)應(yīng)用，以及Objective C與Javascript相互調(diào)用的技術(shù)點(diǎn)。


首先通過(guò)XCode構(gòu)建個(gè)Empty Application即可

創(chuàng)建一個(gè)UIViewController子類(lèi)我命名為MainViewController，然后再xib可視化拖拽出如下界面，其中包含一個(gè)UISwitch開(kāi)關(guān)，一個(gè)UISlider拉條，一個(gè)UITextField輸入框，以及一個(gè)最重要的UIWebView組件。

該例子中UISwitch用于自動(dòng)布局的開(kāi)關(guān)，UISlider作為network拓樸圖的縮放控制，UITextField作為圖元label的編輯更新，UIWebView用于加載TWaver HTML5的拓?fù)浣M件

接下來(lái)將twaver.js和demo.html的頁(yè)面內(nèi)容drag添加進(jìn)入項(xiàng)目，形成如下目錄結(jié)構(gòu)的工程。這里細(xì)心的同學(xué)以及發(fā)現(xiàn)這行代碼<meta name = “viewport” content = “user-scalable=no, width = 500″></meta>，這個(gè)例子我希望讓拓?fù)渥约嚎刂瓶s放，所以關(guān)閉了瀏覽器的scalable功能并設(shè)定了寬度，更多的viewport知識(shí)可以參考這里


這時(shí)需要我們做個(gè)設(shè)置，XCode默認(rèn)將js作為Source而不是Resource處理，所以會(huì)導(dǎo)致找不到j(luò)s資源的問(wèn)題，可以在XCode的Build
Phases里面將twaver.js從Compile Sources干掉，在Copy Bundle Resources里面加入twaver.js

以下代碼再界面呈現(xiàn)時(shí)通過(guò)UIWebView的loadRequest函數(shù)加載指向demo.html的NSURLRequest，注意其中對(duì)textfield的添加的個(gè)空函數(shù)是為了回車(chē)能取消編輯，最后的becomeFirstResponder是為了能接收到Shake手勢(shì)，該例子中通過(guò)選中圖元搖晃手機(jī)可以彈出編輯告警界面。

以下是Switch開(kāi)關(guān)控制html頁(yè)面內(nèi)javascript代碼，Objective C調(diào)用Javascript比較容易，直接調(diào)用stringByEvaluatingJavaScriptFromString運(yùn)行即可

 

如果javascript函數(shù)有返回值，則即是stringByEvaluatingJavaScriptFromString函數(shù)的返回值，以下代碼就是通過(guò)這種方式來(lái)獲取network當(dāng)前的zoom值，以及當(dāng)前選中圖元的名字信息

Javascript沒(méi)有直接調(diào)用Objective C的函數(shù)，我們只能通過(guò)改變頁(yè)面location的方式，在UIWebView的UIWebViewDelegate中攔截shouldStartLoadWithRequest函數(shù)回調(diào)來(lái)實(shí)現(xiàn)Javascript主動(dòng)調(diào)用Objective C代碼。實(shí)際還不是那么完美，建議讀下這篇文章，我現(xiàn)在才有的也是文章建議的再建立一個(gè)iFrame方式去改變location避免一些副作用，以下是相關(guān)的代碼，邏輯很簡(jiǎn)單我就不解釋了。

 

 

最后為了讓跟隨我四年多的已無(wú)法升級(jí)到iOS5的itouch繼續(xù)發(fā)揮余熱，還得做如下一些設(shè)置才能用于調(diào)試測(cè)試，首先Summary里面的Deployment
Target需要設(shè)置到4.*的版本，plist文件中刪除Required device capabilities這行設(shè)置，最后在Architectures內(nèi)改成armv7和armv6

最后是兩個(gè)比較重要的obc和js代碼文件供大家參考TWaver HTML5 Demo

最后將程序Archive歸檔發(fā)布到了App Store等著Apple的“審判”，如果順利的話過(guò)幾天大家就可以在App Store上通過(guò)查找到“TWaver”關(guān)鍵字，下載玩玩這篇文章的App，最后當(dāng)然是free的App了。