设计webapp的新思路

一般设计移动应用有3中方式：原生、脚本、混合；今天我们用另一种方式实现。

我叫它：响应式网页webApp

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

客户端：Android手机

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

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

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

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

数据库：随你

二、具体实现和例子

2.1 、手机端

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

程序代码如下：

Layout布局文件：

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

     xmlns:tools="http://schemas.android.com/tools"

     android:layout_width="match_parent"

     android:layout_height="match_parent"

     tools:context=".MainActivity" >

     <WebView

         android:id="@+id/view_html5_1"

         android:layout_height="200dp"

         android:layout_width="match_parent"

         android:layout_alignParentTop="true"/>

 </RelativeLayout>

Android_layout

Activity文件代码：

 package com.zdw.myhtml5_test;

 import android.os.Bundle;

 import android.webkit.WebView;

 import android.webkit.WebViewClient;

 import android.app.Activity;

 public class MainActivity extends Activity {

     private WebView webView1,webView2;

     protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.activity_main);

         init1();//调用方法

     }

 /***********************************************<--初始化WebView控件-->*******************************************/

     private void init1(){

         webView1 = (WebView) findViewById(R.id.view_html5_1);//找ID

         //WebView加载网页Url

         webView1.loadUrl("http://www.miayi.net/modules/WapMain/");

         //WebView加载本地Url

         //webView.loadUrl("file:///android_asset/mtest.html");

         //设置

         webView1.setWebViewClient(new WebViewClient(){

             public boolean shouldOverrideUrlLoading(WebView view, String url) {

                 view.loadUrl(url);//加载Url

                 return true;//返回值是true的时候控制去WebView打开，为false调用系统浏览器或第三方浏览器

             }

         });

     }

 }

Android_activity

权限（连网权限）：

 <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/