iOS中UIWebView的科學使用方法總結 – iPhone手機開發技術文章 iPhone軟體開發教學課程

眾所周知,沒有哪一個工具能像html/css那樣如此輕易的構建復雜的界面,為瞭保證良好的用戶體驗,有時我們可能會選擇使用html的方式來展示復雜度高,復用性低的界面,在iOS平臺,選擇UIWebView是非常自然的,那麼我根據最近的一個iPad上的珠寶導購項目來向大傢總結一下iOS平臺結合HTML5使用UIWebView的小Tips。

1、加載本地html代碼

這段代碼加載瞭項目資源路徑下www目錄裡面的index.html文件

	NSString *path = [[NSBundle mainBundle]pathForResource:@"index" ofType:@"html" inDirectory:@"www"];
        NSURL *url = [NSURL fileURLWithPath:path];
        NSURLRequest *req = [NSURLRequest requestWithURL:url];
        [_webView loadRequest:req];

2、加載網絡html代碼

        NSString *fullURL = @"https://ruby-china.org/";
        NSURL *url = [NSURL URLWithString:fullURL];
        NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
        [_webView loadRequest:requestObj];

3、原生代碼運行頁面裡面的js代碼

[self.webView stringByEvaluatingJavaScriptFromString:@"alert("Calling from native code");"];

4、響應式佈局

對於針對html5平臺的html頁面,一般都會在head裡面添加這樣的代碼,它能自適應不同尺寸和分辨率密度的屏幕


5、針對觸摸屏優化

這是一段非常神奇的js代碼,能夠讓你的頁面中所有標簽的跳轉,在觸摸屏上面的響應速度有一個質的飛躍!對於用戶體驗的提升,能使得html頁面最大化的近似原生應用。

{
    var touching_flag = false;

    $(document).on('touchstart', "a:not(.notouch):not([href='#'])", function () {
        if (!touching_flag) {
            touching_flag = true;
        }
        window.setTimeout(function () {
            touching_flag = false;
        }, 0);
        return false;
    });

    $(document).on('touchend', "a:not(.notouch):not([href='#'])", function () {
    	window.location.href = $(this).attr('href');
        touching_flag = false;
    });

}

6、對於提升用戶體驗非常有用的十個代碼片段

https://www.jquery4u.com/plugins/10-jquery-ipad-code-snippets-plugins/

發佈留言