執行個體一：WebView載入html5實現炫酷引導頁面
大多數人都知道，一個APP的引導頁面還是挺重要的，不過要想通過原生的Android代碼做出一個非常炫酷的引導頁相對還是比較複雜的，正巧html5在製作炫酷動畫網頁方面比較給力，我們不妨先利用html5做出手機引導頁面，然後將其嵌入APP中。
首先我們分析一下，都需要做哪些工作？
1、製作html5引導頁面。
2、把做好的頁面放入Android工程中assets檔案夾下。
3、利用WebView載入asset檔案夾下的html檔案。
4、在引導頁最後一頁的按鈕上捕捉點擊事件，結束引導頁，進入程式。
簡單的講，整個工作就分以上四步，其中涉及到了Android中一個內建的瀏覽器控制項--WebView，在介紹引導頁之前，先來大體說一下WebView的基本用法。
一、使用WebView瀏覽網頁
用WebView瀏覽網頁，這是最常用也是最簡單的用法，與普通的ImageView組件的用法基本相似，它也提供了大量方法來執行瀏覽器操作，常用的幾個如下：
·void goBack()：後退。
·void goForward()：前進。
·void loadUrl(String url)：載入url網頁。
·boolean zoomIn()：放大網頁。
·boolean zoomOut()：縮小網頁。
……
下面看一個例子，通過WebView瀏覽百度首頁，效果圖如下。
首先不要忘了在AndroidMainfest.xml加入訪問網路的許可權：
<uses-permission android:name="android.permission.INTERNET"/>
布局檔案如下：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <WebView android:id="@+id/wv_webview" android:layout_width="fill_parent" android:layout_height="fill_parent" /></LinearLayout>
java代碼如下：
public class WebViewLoadWeb extends Activity { WebView webView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.webview); webView = (WebView)findViewById(R.id.wv_webview); loadWeb(); } public void loadWeb(){ String url = "https://www.baidu.com/"; //此方法可以在webview中開啟連結而不會跳轉到外部瀏覽器 webView.setWebViewClient(new WebViewClient()); webView.loadUrl(url); } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { //重寫onKeyDown，當瀏覽網頁，WebView可以後退時執行後退操作。 if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){ webView.goBack(); return true; } return super.onKeyDown(keyCode, event); }}
上面代碼首先載入布局檔案中WebView視圖，然後通過setWebViewClient()方法設定了開啟新串連不會跳轉到外部瀏覽器。最後通過loadUrl()方法載入了網址。至於該WebView如何發送請求，如何解析伺服器，這些細節對我們來說是完全透明的，我們不需要關心。
另外需要一提的是，當使用WebView瀏覽網頁時，不做處理的話，按下手機的返回鍵會直接結束WebView所在的Activity，通過重寫onKeyDown()方法，當WebView可以返回時，讓其執行返回操作。
二、使用WebView載入HTML代碼。
WebView提供了一個loadData(String data, String mimeType, String encoding)方法，該方法可用於載入並顯示HTML代碼，不過這個方法在載入html代碼時很可能會出現亂碼的現象。建議用WebView的另一個方法loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)。可以把這個方法認為是loadData()的增強版，它不會產生亂碼。以下是他的幾個參數說明：
·data：指定需要載入的html代碼。
·mimeType：指定html代碼的MIME類型，對於HTML代碼可指定為text/html。
·encoding：指定html代碼編碼所用的字元集。
下面看一個使用WebView載入html代碼的簡單一實例，效果圖如下：
java代碼如下：
public void loadHtmlData(){ String data = "<html>" + "<head>" + "<title>歡迎您</title>" + "</head>" + "<body>" + "<p>我是一段html代碼</p>" + "</body>" + "</html>"; webView.setWebViewClient(new WebViewClient()); //使用簡單的loadData()方法總會導致亂碼，有可能是Android API的Bug //webView.loadData(data, "text/html", "GBK"); webView.loadDataWithBaseURL(null, data, "text/html", "utf-8", null);}
上面代碼很簡單，就是用loadDataWithBaseURL()方法載入html代碼，在這裡就不過多介紹了。
下面進入本篇介紹的重點，通過載入本地html檔案實現炫酷引導頁。
三、載入本地HTML檔案實現炫酷引導頁。
接下來為本篇重點，通過載入H5的方式可以很輕鬆做出炫酷的引導頁，當然前提時你得先做出或者找到一個很好H5引導頁檔案。需要說明的都已經在文章開頭說過了，就不廢話了，先上效果圖：
相信不用我解釋大家就能看懂，最左邊的是第一張頁面，中間的是過度動畫效果，最右邊的是最後一張，其中在最後一張上面有個按鈕，捕捉到這個按鈕的跳轉連結是關鍵。下面先來看代碼（html檔案在assets檔案夾下）：
public class WebViewLoadHtml extends Activity { private String url; WebView webView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //將螢幕設定為全屏 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); //去掉標題列 requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.webview); webView = (WebView)findViewById(R.id.wv_webview); url = "file:///android_asset/guide/index.html"; loadLocalHtml(url); } @SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" }) public void loadLocalHtml(String url){ WebSettings ws = webView.getSettings(); ws.setJavaScriptEnabled(true);//開啟JavaScript支援 webView.setWebViewClient(new WebViewClient(){ @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { //重寫此方法，用於捕捉頁面上的跳轉連結 if ("http://start/".equals(url)){ //在html代碼中的按鈕跳轉地址需要同此地址一致 Toast.makeText(getApplicationContext(), "開始體驗", Toast.LENGTH_SHORT).show(); finish(); } return true; } }); webView.loadUrl(url); }}
上面代碼首先將程式設為全屏無標題列，這樣才更像引導頁（註：截圖中沒有全屏是應為使用剪取工具時喚出了狀態列）。需要注意的是當載入具有js的檔案時需通過WebSettings的setJavaScriptEnabed()方法開啟對js的支援。然後通過setWebViewClient()重寫shouldOverrideUrlLoading()方法，具體用法源碼注釋中已給出。
其中用到html檔案的按鈕跳轉連結的源碼如下：
<div class="swiper-slide"> <span>第三頁</span> <span class="subtitle">這是第三頁</span> <a href="javascript:" onClick="window.open('http:start')" class="swiper_read_more">開啟APP之旅</a></div>
執行個體二：WebView從assets中載入html5頁面，實現地理位置定位
今天調研一個html5頁面的定位問題，發現在手機瀏覽器上html5是可以實現定位的，但是在webview中就無法定位了。而我居然以為html5的地理定位在webview中不可行。html5頁面內容如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><p id="demo">點擊這個按鈕，獲得您的座標：</p><button onclick="getLocation()">試一下</button><script>var x=document.getElementById("demo");function getLocation(){if (navigator.geolocation){navigator.geolocation.watchPosition(showPosition);}else{x.innerHTML="Geolocation is not supported by this browser.";}}function showPosition(position){x.innerHTML="Latitude: " + position.coords.latitude +"<br />Longitude: " + position.coords.longitude;}</script></body></html>
後來又在網上查了查，發現，需要設定一些東西。設定websetting的屬性：
webView.setWebViewClient(new WebViewClient());//webView.loadUrl("http://news.baidu.com/");webView.loadUrl("file:///android_asset/index.html");WebSettings webSettings = webView.getSettings();webSettings.setJavaScriptEnabled(true);/*** 以下部分可以不要*/// //啟用資料庫// webSettings.setDatabaseEnabled(true);// String dir = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();//// //啟用地理定位// webSettings.setGeolocationEnabled(true);// //設定定位的資料庫路徑// webSettings.setGeolocationDatabasePath(dir);/*** 此處很重要，必須要*///***最重要的方法，一定要設定，這就是出不來的主要原因webSettings.setDomStorageEnabled(true);webView.setWebChromeClient(new WebChromeClient(){//配置許可權（同樣在WebChromeClient中實現）@Overridepublic void onGeolocationPermissionsShowPrompt(String origin,Callback callback) {callback.invoke(origin, true, false);super.onGeolocationPermissionsShowPrompt(origin, callback);}});
問題解決！
特別試了試：
同時開啟網路和GPS可以定位，獲得的是經緯度資訊。
只開啟網路可以定位，只開啟GPS也可以定位。
關閉網路和GPS也可以定位。
由此可見，是由地理位置定位所得，只能獲得經緯度資訊。
若要獲得詳細的地址資訊，需要調用地圖API實現。如下所示：
緯度：116.40387397，經度：39.91488908 詳細地址：北京市天安門
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
