用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


WebView载入本地html(含css资源)显示不全解决办法

androud studio加载本地包含css资源的html文件时显示不全,在浏览器中能正常显示,在自己的虚拟机中只显示一部分...
  • list_view
  • list_view
  • 2016年06月12日 14:41
  • 3338

android-WebView加载本地html、本apk内html和远程URL

WebView(网络视图)能加载显示网页,可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页,实现WebView有以下两种不同的方法: 第一种方法的步骤: 1.在要Activity中...
  • qq_17007915
  • qq_17007915
  • 2015年09月25日 10:30
  • 1839

Android初识-webview访问本地HTML5及本地HTML5之间的跳转

1.将html5工程拷入Android工程目录assets下 2.MainActivity下webview加载默认HTML5页面 webView = (WebView) findViewById(R....
  • tuwei123
  • tuwei123
  • 2015年11月17日 10:42
  • 3337

Android WebView使用全面解析(加载网络资源、本地HTML,JS交互)

简述:     WebView是什么?有什么用途?我们先来看一下官方介绍:      A View that displays web pages. This class is the basis ...
  • u012810020
  • u012810020
  • 2016年09月30日 09:53
  • 5126

WebView 加载HTML和CSS

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

Android Webview 加载外部html时选择加载本地的js,css等资源文件

在使用WebView加载网页的时候,有一些固定的资源文件如js的jquery包,css,图片等资源会比较大,如果直接从网络加载会导致页面加载的比较慢,而且会消耗比较多的流量。所以这些文件应该放在ass...
  • qduningning
  • qduningning
  • 2015年01月27日 17:11
  • 9587

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

package com.example.mycssdemo; import android.annotation.SuppressLint; import android.app.Activity;...
  • SoulOfAndroid
  • SoulOfAndroid
  • 2015年08月16日 13:28
  • 4503

android 通过webView,简单的通过网页唤起本地界面,如果比较多的话最好不要用原生的webView和js去搭建,用框架去做

android 通过webView,简单的通过网页唤起本地界面,最好不要用原生的webView和js去搭建,用框架去做...
  • intbird
  • intbird
  • 2014年12月31日 15:31
  • 1437

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

转载自:http://www.cnblogs.com/sleeptothedeath/p/3700494.html?utm_source=tuicool&utm_medium=referral ...
  • fwt336
  • fwt336
  • 2015年11月20日 16:09
  • 584

Android的webview加载本地html、本apk内html和远程URL

首先在layout文件夹下的xml中 加入WebView控件   再在主文件中输入如下代码 public class TestDemo ext...
  • windone0109
  • windone0109
  • 2010年03月15日 10:58
  • 109235
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用webview写界面,加载本地htm5,带css
举报原因:
原因补充:

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