1. 程式人生 > >用webview寫介面,載入本地htm5,帶css

用webview寫介面,載入本地htm5,帶css

轉載自: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之間的資料共享

參考:

一些使用者體驗的優化

參考: