As we all know, no tool can easily build complex interfaces like html/css. To ensure a good user experience, sometimes we may choose to use html to display highly complex and reusable interfaces. On the iOS platform, it is natural to choose UIWebView, I will summarize the small Tips of using UIWebView on the iOS platform in combination with HTML5 based on a jewelry shopping guide project on the latest iPad.
1. Load local html code
This Code contains the index.html file in the wwwdirectory of the project resource.
NSString *path = [[NSBundle mainBundle]pathForResource:@"index" ofType:@"html" inDirectory:@"www"]; NSURL *url = [NSURL fileURLWithPath:path]; NSURLRequest *req = [NSURLRequest requestWithURL:url]; [_webView loadRequest:req];
2. Load network html code
NSString *fullURL = @"http://ruby-china.org/"; NSURL *url = [NSURL URLWithString:fullURL]; NSURLRequest *requestObj = [NSURLRequest requestWithURL:url]; [_webView loadRequest:requestObj];
3. js code on the native code running page
[self.webView stringByEvaluatingJavaScriptFromString:@"alert("Calling from native code");"];
4. Responsive Layout
For html pages of html5 platforms, such code is usually added to the head, which can adapt to screens of different sizes and resolution density.
5. Touch Screen Optimization
This is a magical js Code that allows you to jump to all tags on your page. The response speed on the touch screen is a qualitative leap! The improvement of user experience can make html pages approximate to native applications to the maximum extent.
{ 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. 10 code snippets that are useful for improving user experience
Http://www.jquery4u.com/plugins/10-jquery-ipad-code-snippets-plugins/