用webview写界面,加载本地htm5,带css

转载 2015年11月20日 16:09:51

转载自:http://www.cnblogs.com/sleeptothedeath/p/3700494.html?utm_source=tuicool&utm_medium=referral


1.在android界面拖入一个webview,然后添加一个internet权限

复制代码
<uses-sdk  
    android:minSdkVersion="8"  
    android:targetSdkVersion="18" />  
<uses-permission android:name="android.permission.INTERNET"/>  
  
<application  
            .............................  
复制代码

 

2.  在assets目录里面放入js,css,html资源文件

 

 

3.在写本地html的时候引入assert里的对应路径

复制代码
<!DOCTYPE html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta name="viewport" content="width=device-width, initial-scale=1">   
<title> 标题 </title>  
<link rel="stylesheet" type="text/css" href="file:///android_asset/css/jquery.mobile-1.4.2.min.css">  
<script src="file:///android_asset/js/jquery-1.7.1.min.js"></script>  
<script src="file:///android_asset/js/jquery.mobile-1.4.2.min.js"></script>  
</head>  
<body>  
  
  
 <div data-role="page">  
     <div data-role="header">  
      <h1>My Title</h1>  
     </div>  
       
     <div data-role="content">  
        <ul data-role="listview" data-inset="true" >  
            <li><a href="#">Acura</a></li>  
            <li><a href="#">Audi</a></li>  
            <li><a href="#">BMW</a></li>  
            <li><a href="#">Cadillac</a></li>  
            <li><a href="#">Ferrari</a></li>  
        </ul>   
     </div>  
 </div><!-- /page -->  
  
</body>  
</html>  
复制代码

 

4.在代码里访问页面

复制代码
package com.example.asd_webview;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.webkit.WebSettings;
import android.webkit.WebSettings.RenderPriority;
import android.webkit.WebView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        WebView webview = (WebView)findViewById(R.id.webView1);
        WebSettings wv_setttig = webview.getSettings();
        wv_setttig.setJavaScriptEnabled(true);
        //wv_setttig.setRenderPriority(RenderPriority.HIGH);
        
        String url = "file:///android_asset/index.html";
        webview.loadUrl(url);
        
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}
复制代码

 

 

5.最后效果如下:

 

 

 

加载webview不难,重点是js和java代码的交互,还有webview和httpclient之间的数据共享

参考:

如何整合前端代码和Android后端JAVA代码       http://tech.it168.com/a2011/0517/1191/000001191561_2.shtml

android webview里设置cookie  (webview的cookie和httpclient的cookie同步)     http://blog.csdn.net/encienqi/article/details/7912733

 

 

一些用户体验的优化

参考:

Android中如何判别WebView加载完毕并使用ProgressDialog进行提示        http://blog.csdn.net/agods/article/details/7443832


相关文章推荐

Android中WebView在加载网页的时候,怎样应用本地的CSS效果?就是说怎样把本地的CSS嵌入到HTML中

###跟加载本地html一样的。 ##自己的项目中的样子是这个 - css文件 - .videolist{background:url("../images/playvideo.png") ...

webview 中使用css适配简单的页面

package com.example.mycssdemo; import android.annotation.SuppressLint; import android.app.Activity;...

WebView 加载HTML和CSS

个人开发项目中需要使用WebView加载一些网络上的内容,目前还没有深入的学习,这篇博客首先简单的记录一下WebView加载html和CSS的相关方法。加载html无非有三种情况:一、存放在asset...

webview之加载H5界面无法调用手机本地图库

webview加载H5页面,如果H5界面需要调用手机的本地图库首先在此祝各位大佬远离BUG 比如我们在开发中会遇到这样的场景,需要加载一个H5界面,这个界面里面可能有用户上传头像这个功能,但是当你怎么...

使用HttpURLConnection加载htm(超链接)获得cookie并将cookie同步到webView中

一、【环境】     1.原生页面使用webView加载h5页面(浏览);     2.(购买商品时)后台h5使用cookie判断登录状态;     3.没登录情况下js调用原生登录窗口; ...

用webview写界面,加载本地js,js,html文件

原地址:http://www.cnblogs.com/sleeptothedeath/p/3700494.html 用webview写界面,加载本地js,js,html文件 以jque...

android,使用webView加载页面,界面空隙问题

在使用WebView加载html页面时,左侧始终出现空隙   google之,得结果WebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_O...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用webview写界面,加载本地htm5,带css
举报原因:
原因补充:

(最多只允许输入30个字)