我叫它：响应式网页webApp

一、具体构架思路是这样的：

客户端：Android手机

Android手机中有控件WebView，通过设置WebView控件的添加，我们可以通过Url的设置来访问链接网页。但是这里就出现一个问题（网页的尺寸大小和手机屏幕不

匹配），那么，咋办？不用担心，响应式网页可以解决这个问题，把它缩小后就成为一个手机页面了，放在手机中显示一点问题都没有。

服务器端：可以使用IIS服务器

后台端：这个后面会有介绍

数据库：随你

二、具体实现和例子

2.1 、手机端

手机端只需要设置播放容器即可（是不是比原生开发快多了呢？）

程序代码如下：

Layout布局文件：

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"  
 5     tools:context=".MainActivity" >
 6 
 7     <WebView
 8         android:id="@+id/view_html5_1" 
 9         android:layout_height="200dp"
10         android:layout_width="match_parent"
11         android:layout_alignParentTop="true"/>
12     
13 </RelativeLayout>

Android_layout

Activity文件代码：

 1 package com.zdw.myhtml5_test;
 2 
 3 import android.os.Bundle;
 4 import android.webkit.WebView;
 5 import android.webkit.WebViewClient;
 6 import android.app.Activity;
 7 
 8 public class MainActivity extends Activity {
 9     private WebView webView1,webView2;
10     protected void onCreate(Bundle savedInstanceState) {
11         super.onCreate(savedInstanceState);
12         setContentView(R.layout.activity_main);
13         init1();//调用方法
14     } 
15     
16 /***********************************************<--初始化WebView控件-->*******************************************/    
17     private void init1(){
18         webView1 = (WebView) findViewById(R.id.view_html5_1);//找ID
19         
20         //WebView加载网页Url
21         webView1.loadUrl("http://www.miayi.net/modules/WapMain/");
22         
23         //WebView加载本地Url
24         //webView.loadUrl("file:///android_asset/mtest.html");
25         
26         //设置
27         webView1.setWebViewClient(new WebViewClient(){
28             public boolean shouldOverrideUrlLoading(WebView view, String url) {              
29                 view.loadUrl(url);//加载Url
30                 return true;//返回值是true的时候控制去WebView打开，为false调用系统浏览器或第三方浏览器
31             }
32         });
33     }
34 }

Android_activity

权限（连网权限）：

1 <uses-permission android:name="android.permission.INTERNET"/>

Android_manifest

2.2、网页端

网页端一般用VisualStudio开发就好了。打开后新建一个工程，打开后界面如下：

当然，如果你还想慢慢自己加CSS、JS等等特效就out了，快速开发就是需要调用各种资源，这里给大家推荐一下，样式我用的bootsrap框架、amaze_UI也可以、字体文件

用的 Font Awesome，具体大家可以去官网查看哈。

bootsrap参考网站：http://www.bootcss.com/

amaze_UI参考网站：http://amazeui.org/

Font Awesome参考网站： http://fontawesome.com.cn/

2.3 、工欲善其事，必先利其器。先下载插件吧！

右键项目，选择管理NuGet程序包，再选择联机，系统自己检索。

在收索中输入你要下载的包，选择添加即可，会耗点时间。

由于我已经下载了，所以这里和大家不一样。

2.4 之后就有很多可以调用的资源了，

、

这里注意，是不是有2个名字相同的js文件呢？

这里我们一般用带有min的，它表示压缩过的文件，这样带入程序会是占用空间更加小。

2.4 之后就可以调用资源，参考官网样式搭建架构了。

最后推荐几个网站给大家：

Bootstrap可视化布局 http://www.bootcss.com/p/layoutit/