Web中的HTML代码：
<html>
<head>
<script>
function getInfo(name)
{
window.location = "/getInfo/"+name
}
</script>
</head>
<body>
<h1 onclick="getInfo('why')">Name</h1>
</body>
</html>
iOS中，先拖拽WebView，访问localhost，然后通过WebView的委托事件监听url跳转操作，并且把跳转截取下来。
也就是说，在onclick的时候，普通浏览器灰跳转到那个url，但是在iOS的这个WebView里面，这个跳转会被拦截，
用这种方式可以巧妙地实现JS调用iOS的原生代码：
//
// DWViewController.m
// DareWayApp
//
// Created by why on 14-6-3.
// Copyright (c) 2014年 DareWay. All rights reserved.
//
#import "DWViewController.h"
@interface DWViewController ()
@property (weak, nonatomic) IBOutlet UIWebView *myWebview // 主页面
@end
@implementation DWViewController
- (void)viewDidLoad
{
[super viewDidLoad]
// Do any additional setup after loading the view, typically from a nib.
// 适配iOS6的状态栏
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
_myWebview.frame = CGRectMake(0,20,self.view.frame.size.width,self.view.frame.size.height-20)
}
// 加载制定的URL
NSURL *url =[NSURL URLWithString:@"http://localhost"]
NSURLRequest *request =[NSURLRequest requestWithURL:url]
[_myWebview setDelegate:self]
[_myWebview loadRequest:request]
}
// 网页中的每一个请求都会被触发
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
// 每次跳转时候判断URL
if([request.mainDocumentURL.relativePath isEqualToString:@"/getInfo/why"])
{
NSLog(@"why")
return NO
}
return YES
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning]
// Dispose of any resources that can be recreated.
}
1、首先我们需要先新建一个WebApp项目，目录结构为：index.html 项目首页html入口文件
--html 项目文件夹
--html/css 用于存放用到的css文件
--html/js 用于存放用到的js文件
2、index.html我们可以用Dreamweaver CC来新建，操作如下：点击文件菜单，再点新建，在弹出的窗口中点流体网格布局，再点创建。
3、创建好html文件后，点击文件-另存为，将文件名改为：index.html，保存到我们新建的WebApp项目根目录下。如下图：
4、这时会弹出一个对话框，提示内容如下：
这时，我们将用到的boilerplate.css文件和Untitled-2.css文件，复制到WebApp项目html/css目录下，将用到的respond.min.js文件复制到WebApp项目html/js目录下。
这里解释下，boilerplate.css是定义跨浏览器兼容性的样式文件，Untitled-2.css是定义自适应媒体查询的样式文件，respond.min.js扩展IE8以下浏览器支持css3的js文件，如果不需要考虑支持IE8以下浏览器，可以删除掉。这里由于我们是打包生成手机端的APP，不需要用到respond.min.js，我们把它删除掉，然后再修改下CSS的引用路径，如下：
<link href="html/css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="html/css/Untitled-1.css" rel="stylesheet" type="text/css">
5、这样一个简单的WebApp项目就新建好了。优化下html代码，如下图：
6、接着我们来使用KM盒子将这个WebApp项目打包生成手机APP应用。
打开KM盒子软件，点击安卓设备按钮，在弹出的菜单中选择 自定义打包。
接着，在弹出的对话框，设置 APK名称，安装包ID，文件路径选择我们刚才的WeApp文件夹目录，然后点击编译文件。
接着，在弹出的对话框中，双击三个图片，分别设置APK的竖向启动画面、横向启动画面和桌面图标文件，图片格式为PNG图片文件。
最后，在弹出的对话框，点击生成APK安装包，这样一个WebApp项目打包生成手机APP就完成了。
我们来看下安装到手机上的效果：
最后，我们学习下Dreamweaver CC生成的流体网格布局CSS文件，具体看源文件，我加了中文注释：
@charset "utf-8"
/** HTML5 ✰ Boilerplate color:rgb(144 255 173)">v3.0.2
/*
* HTML5 ✰ 样板
*
链接：https://github.com/ljianshu/mt-app
适合没有经验的朋友。
集点菜、用户评价和商家信息为一体的移动端点餐APP
1. 点餐页面
点选商品后自动添加到购物车，并计算好总价，在商品列表、购物车列表和商品详情页都可以随意增减数目，此外左侧商品分类和右侧的商品相互关联，通过better-scroll插件滑动商品列表时，相应的商品分类也会跟着跳转。
2. 用户评价页面
主要包括一个TAB栏，包括三部分：全部、有图和评价三个模块
3. 商家信息页面
主要介绍一些商家基本信息，可以通过better-scroll插件，进行左右滑动图片。
效果预览 ：
再说一篇，是饿了么的翻版。
