设计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>

        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调用系统浏览器或第三方浏览器
            }
        });
    }
}

        权限（连网权限）：

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

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/